==== JS et JQuery ==== Vous trouverez tous les fichiers Javascript dans le même dossier sous framadate/js/app JQuery permet, à l'aide de sélecteurs, de considérer les balises HTML comme des objets, pour pouvoir modifier leurs attributs, générer des balises, affecter une fonction à un événement ou bien faire un traitement particulier sur une liste de balise HTML partageant un trait commun (le type de balise, une classe,...) exemple de sélecteur : $(".toto") désigne tous les éléments ayant la classe "toto" retrouver plus d'informations sur JQuery sur les sites officiels et les tutoriels ====exemple de code modifié==== $(document).ready(function () { ... function addHour(last_hour,add_button){ // last_hour : Jquery selector on the last hour of the day selected // add_button : Jquery selector on the linked button //var last_hour = $(this).children('div').children('div:last').prev(); // for and id var di_hj = last_hour.children('.hours').attr('id').split('-'); var di = parseInt(di_hj[0].replace('d', '')); var hj = parseInt(di_hj[1].replace('h', '')); // label, title and placeholder var last_hour_label = last_hour.children('.hours').attr('placeholder'); var hour_text = last_hour_label.substring(0, last_hour_label.indexOf(' ')); // RegEx for multiple replace var re_label = new RegExp(last_hour_label, 'g'); var re_id = new RegExp('"d' + di + '-h' + hj + '"', 'g'); // HTML code of the new hour var new_hour_html = '
' + last_hour.html().replace(re_label, hour_text + ' ' + (hj + 2)) .replace(re_id, '"d' + di + '-h' + (hj + 1) + '"') .replace(/value="(.*?)"/g, 'value=""') + '
'; // After 11 + button is disable if (hj < 99) { last_hour.after(new_hour_html); $('#d' + di + '-h' + (hj + 1)).focus(); add_button.prev('.remove-an-hour').removeClass('disabled'); if (hj == 98) { add_button.addClass('disabled'); } } } $('#copyhours').on('click', function () { var first_day_hours = $selected_days.find('fieldset:eq(0) .hours').map(function () { return $(this).val(); }); $selected_days.find('fieldset:gt(0)').each(function () { while($(this).find('.hours').length Noter bien que les fonctions sont définies lorsque le document est prêt : cela assure l’existence des balises HTML, donc que les sélecteurs JQuery vont bien marcher. dans le cadre de l'issue 203, * j'ai extrait le code de $(document).on('click', '.add-an-hour', function () {...}) dans une autre fonction addHour(last_hour,add_button) avec * last_hour est un sélecteur jquery sur le champ horaire à copier et à adapter (de n à n+1) * add_button est un sélecteur jquery sur le bouton d'ajout d'horaire du jour (afin de le désactiver si la limite est atteinte) * j'ai ajouté l'appel de cette fonction dans $(document).on('click', '.add-an-hour', function () {...}) pour qu'il conserve son fonctionnement \\ * Enfin j'ai ajouté l'appel fonction addHour(last_hour,add_button) dans $('#copyhours').on('click', function () {...}) avec une boucle sur les jours pour avoir au moins autant d'horaire que le premier jour : while($(this).find('.hours').length les codes dans les sélecteurs ":eq(0)" (comprendre equal 0) et ":gt(0)" (comprendre greater than 0) désignent respectivement le 1er et les non-premiers (les autres) éléments du sélecteur précédent (ici une balise fieldset)