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 =
		    '<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é	*/
    });

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<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);
	    }

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/framadate/javascript_et_jquery.txt
  • Dernière modification: 2018/02/21 21:29
  • par titouan