Afficher la pageAnciennes révisionsLiens de retourHaut de page Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu’il s’agit d’une erreur. ==== 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é==== <code> $(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 = '<div class="col-sm-2">' + last_hour.html().replace(re_label, hour_text + ' ' + (hj + 2)) .replace(re_id, '"d' + di + '-h' + (hj + 1) + '"') .replace(/value="(.*?)"/g, 'value=""') + '</div>'; // 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<first_day_hours.length){ var last_hour = $(this).children('div').children('div:last').prev(); var add_button = $(this).find('.add-an-hour'); addHour(last_hour,add_button); } for (var i = 0; i < first_day_hours.length; i++) { $(this).find('.hours:eq(' + i + ')').val(first_day_hours[i]); // fill hours } }); }); // Buttons "Add an hour" $(document).on('click', '.add-an-hour', function () { var last_hour = $(this).parent('div').parent('div').prev(); addHour(last_hour,this); /* ancien code commenté */ });</code> 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 : <code> while($(this).find('.hours').length<first_day_hours.length){ var last_hour = $(this).children('div').children('div:last').prev(); var add_button = $(this).find('.add-an-hour'); addHour(last_hour,add_button); }</code> 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) txs/contrib/framadate_a17/javascript_et_jquery.txtde 127.0.0.1