1 Dernière modification par COPAR (11-03-2018 21:32:12)

Sujet : Vers quelle solution s'orienter ?

Bonjour,

Je veux faire une sorte de wizard avec plusieurs scénarios possibles, comme suivant mon image:
http://nsa39.casimages.com/img/2018/03/11/180311085748649138.jpg


Je débute avec javascript, c'est à dire que je comprend tout juste les concepts de base comme les var et les conditions...mais j'aimerais faire quelque chose d'assez optimal, je veux dire sans en écrire des tonnes.
Mon seul impératif est d'utiliser jquery.
De plus je ne veux pas (encore) récupérer les données ou vérifier la validité des champs etc.

Pour l'instant, je veux juste créé plusieurs step qui apparaîtront ou disparaîtront au moment voulu (au click et suivant le chemin pris par l'utilisateur).

2

Re : Vers quelle solution s'orienter ?

J'ai un exemple similaire à ce que je veux faire ici:
https://www.kidepann.fr/diagnostic-repa … s-roulants
(entrez Bourg-en-bresse dans le input ville pour accéder aux étapes suivantes)

Je voulais avoir votre avis sur le code proposé par ce site.
N'y a t-il pas moyen de faire plus simple, sans avoir besoin de changement d'url et requête AJAX?

var NumArbo = 0;
//Pour gérer le fait que si un problème est préselectionné, on ne doive pas faire le scrollTo sur le changement de selection la première fois lors du déroulé du diagnostic
var FirstLoad = true;

$(document).ready(function () {

    //On empeche la validation du form via entré
    $(window).keydown(function (event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            return false;
        }
    });

    //On permet de lancer la fonction de recherche de l'adhérent via la touche entré
    $('#CodePostal').bind('keyup', function (e) {
        if (e.keyCode === 13) { // 13 = touche entré
            HandleChoixZone();
        }
    });

    //On permet de lancer la fonction de recherche de l'adhérent via la touche entré
    $('#Ville').bind('keyup', function (e) {
        if (e.keyCode === 13) { // 13 = touche entré
            HandleChoixZone();
        }
    });

    //On permet de lancer la fonction de recherche de l'adhérent lors du click sur le bouton
    $('#btCheckForZone').on('click', function () {
        HandleChoixZone();
    });

    $("body").on("click", "#cgv", function () {
        var selectedRadio = $(this).parents(".contentForm").find("input[type='radio']:checked");
        $(this).prop("href", $(this).data("href") + "/" + selectedRadio.data("adherent-id"));
    })
    LoadChoixTunnel();

    $("#ChoixTunnel").on('change', function () {
        LoadChoixTunnel();
    });

    $('#btFermerPopup,.btFermerPopup').on('click', function () {
        //On cache la popup
        $('.popupResultat').hide(150);
        $('#popupMailRappelOK').hide(150);
    });

    //Sur le click sur plannifier depannage dans la popup, on valide la formulaire
    $('#btPlannifierDepannage').on('click', function () {



        if ($("input[type = radio][name = IsSAV]:checked").val() === "true") {
            //On check si la date et le produit posé est set
            if ($("#DateDePose").val() !== "" && $("#ProduitPose").val() !== "") {
                $('#formDiagnostic').submit();
            } else {
                //On check quel champs n'est pas remplis
                if ($("#DateDePose").val() === "") {
                    //On affiche le message d'erreur en fonction
                    $("#DateDePose-field-error").text("Le champs date de pose est requis !");
                }
                if ($("#ProduitPose").val() === "") {
                    $("#ProduitPose-field-error").text("Le champs produit posé est requis !");
                }
                //On scroll au bon endroit pour afficher les messages d'erreurs
                $('html, body').animate({
                    scrollTop: $("#DateDePose-field-error").offset().top - 150
                }, 500);
                $('#popupResultat').hide(150);
            }
        }
        else {
            //On check si l'ugence est bien cochée
            if ($("#IsUrgence").val() !== "undefined") {
                $('#formDiagnostic').submit();
            } else {
                $("#ProduitPose-field-error").text("Veuillez préciser si il s'agit d'une urgence !");
                //On cache la popup
                $('#popupResultat').hide(150);
            }
        }
    });

    //Event du submit du form
    $('#formDiagnostic').submit(function (e) {

        var validator = $("#formDiagnostic").validate()


        //On test la validation du formulaire
        if ($('#formDiagnostic').valid()) {
            //Fonction Google
            var type = $("#TypeDiag").val();
            var adherent = $("#TadherentNom").val();
            ga('send', 'pageview', '/prise-rdv-' + type + '-' + adherent + '-etape4');
            console.log('/prise-rdv-' + type + '-' + adherent + '-etape4');
        } else {
            //Si le form n'est pas valid on ferme la popup
            var error = validator.errorList;
            //$("#DateDePose").valid();
            $('#popupResultat').hide(150);
        }
    });


    //On active le datepicker
    $('.datePicker').datepicker($.datepicker.regional["fr"]);

    //Si on est sur la page de diagnostic
    if ($('#ChoixTunnel').orNot()) {
        //On gère le clicks sur les radio buttons
        $('input[type=radio][name=IsSAV]').change(function () {
            if ($(this).val() === "true") {
                $("#divSAV-Oui").show(150);
                $("#divSAV-Non").hide(150);
                $("#divTunnelDiag").hide(150);
            } else {
                //On montre le chopix du diag
                $("#divTunnelDiag").show(150);
                $("#divSAV-Non").show(150);
                $("#divSAV-Oui").hide(150);
            }
        });

        //Lors du click sur la radioButton 
        $('input[type=radio][name=IsUrgence]').change(function () {
            if ($(this).val() !== "undefined") {
                //On montre le chopix du diag
                $("#divTunnelDiag").show(500);
            }
        });

        $('#DateDePose').on('change', function () {
            if ($(this).val() !== "" && $('#ProduitPose').val() !== "") {
                //On montre le chopix du diag
                $("#divTunnelDiag").show(500);
            } else {
                $("#divTunnelDiag").hide(500);
            }
        });

        $('#ProduitPose').on('change', function () {
            if ($(this).val() !== "" && $('#DateDePose').val() !== "") {
                //On montre le chopix du diag
                $("#divTunnelDiag").show(500);
            }
            else {
                $("#divTunnelDiag").hide(500);
            }
        });

        //On scroll au bon endroit
        $('html, body').animate({
            scrollTop: $(".etapeDisponible").offset().top - 100
        }, 500);
    }

    //Lors du click sur le bouton d'affichage de la popup
    $("#buttonValiderDiagnostic").on('click', function () {
        HandlePopupFinDiag(false);
    });

    //Lors du click sur le bouton d'affichage de la popup
    $("#buttonValiderDiagnosticSansReponse").on('click', function () {
        HandlePopupFinDiag(true);
    });

    //$(document).on('click', '#submit-se-faire-rappeler', function () {
    //    if ($('#se-faire-rappeler-form').valid()) {
    //        $('#submit-se-faire-rappeler').attr('disabled', 'disabled');
    //    }
    //});


});

//Pour afficher la popup en fonction du resultat du diag
function HandlePopupFinDiag(IsSansReponse) {



    //Fonction Google
    var type = $("#TypeDiag").val();
    var adherent = $("#TadherentNom").val();
    ga('send', 'pageview', '/prise-rdv-' + type + '-' + adherent + '-etape3');
    console.log('/prise-rdv-' + type + '-' + adherent + '-etape3');

    if (IsSansReponse) {
        //ON affiche le bon titre
        $('.descriptionAvecReponse').hide(150);
        $('.descriptionSansReponse').show(150);
    } else {
        //ON affiche le bon titre
        $('.descriptionAvecReponse').show(150);
        $('.descriptionSansReponse').hide(150);
    }

    //On calcul le prix à afficher dans la popup de confirmation
    $.ajax({
        url: UrlGetPrice,
        type: 'POST',
        success: function (data) {

            //On test si il s'agit d'un SAV
            if ($('#IsSAV').closest('.contentRadio').hasClass('isChecked') == true) {
                $('.contentPrix').hide();
            } else {
                $('.contentPrix').show();
                $('.spanPrix').text(data.price);
                $('.tauxHoraire').text(data.mainOeuvre);
            }
        }
    });

    $('#popupResultat').show(150);

    $('html, body').animate({
        scrollTop: (window.screen.availWidth < 1000 ? 50 : 500)
    }, 500);

}

//Pour gérer la modale de choix de zone/adherent
function HandleChoixZone() {
    var IsInError = false;

    //On récupère le codePostal
    var CodePostal = $("#CodePostal").val();
    $("#cpNonCouvert").addClass("hidden");
    $("#cpExist").addClass("hidden");

    //On récupère le Ville
    var Ville = $("#Ville").val();
    $("#villeNonCouvert").addClass("hidden");
    $("#villeExist").addClass("hidden");

    $("#villeCpIncoherence").addClass("hidden");


    //On check si le code Postal entré est vide
    if (CodePostal === "") {
        $("#cpRequired").removeClass("hidden");
        IsInError = true;
    }
    else {
        $("#cpRequired").addClass("hidden");
    }
    //On check si la ville
    if (Ville === "") {
        $("#villeRequired").removeClass("hidden");
        IsInError = true;
    }
    else {
        $("#villeRequired").addClass("hidden");
    }

    //SI une erreur on sort de la fonction
    if (IsInError) {
        return;
    }

    //On check les zones
    $.ajax({
        url: UrlCheckForZone,
        type: 'POST',
        data: {
            codePostal: CodePostal,
            ville: Ville,
            from: typeLink
        },
        success: function (data) {
            //En fonction du nombre de zone retournée on affiche ou non la popup de choix
            if (typeof data.choixZone !== "undefined" && data.choixZone === true) {
                //On affiche la popup de choix
                $.ajax({
                    url: UrlChoixZone,
                    type: 'GET',
                    data: {
                        codePostal: CodePostal,
                        ville: Ville,
                        from: typeLink
                    },
                    success: function (data) {
                        $("#popupChoixAdherent").html(data);

                        //On init le caroussel
                        $('.contentListeLesPlus').not('.slick-initialized').slick({
                            slide: 'li',
                            dots: false,
                            infinite: true,
                            slidesToShow: 1,
                            slideToScroll: 1,
                            mobileFirst: true,
                            autoplay: true,
                            autoplaySpeed: 9000,
                            arrows: true,
                            responsive: [
                                {
                                    breakpoint: 992,
                                    settings: "unslick"
                                }
                            ]
                        });

                        HandleEventPopupChoixZone();

                        $("#popupChoixAdherent").show(150);

                        //On scroll sur la popup
                        $('html, body').animate({
                            scrollTop: $("#popupChoixAdherent").offset().top + 250
                        }, 500);

                        //Fonction Google
                        var type = $("#TypeDiag").val();
                        //On varie le ga en fonction de la page sur laquelle on se trouve
                        if (window.location.pathname === "/se-faire-rappeler" || window.location.pathname === "/rappel") {
                            ga('send', 'pageview', '/demande-rappel-' + type + '-etape1');
                            console.log('/demande-rappel-' + type + '-etape1');
                        }
                        else {
                            ga('send', 'pageview', '/prise-rdv-' + type + '-etape1');
                            console.log('/prise-rdv-' + type + '-etape1');
                        }

                    }
                    , error: function (request, status, error) {
                        console.log(request.responseText);
                    }
                });
            }
            else {
                //EN cas de mauvaise cohérence ou de non existance de la ville CP
                if (typeof data.existanceCP !== "undefined" && typeof data.existanceVille !== "undefined") {
                    if (!data.existanceCP) {
                        $("#cpExist").removeClass("hidden");
                    }
                    if (!data.existanceVille) {
                        $("#villeExist").removeClass("hidden");
                    }
                }
                else if (typeof data.coherenceVilleCP !== "undefined" && !data.coherenceVilleCP) {
                    $("#villeCpIncoherence").removeClass("hidden");
                }
                else {
                    //On test si on est sur la page se faire rappeler
                    if ($('#SeFaireRappeler').val() === "true") {
                        $("#cpNonCouvert").removeClass("hidden");
                    } else {
                        //On redirige vers la page de rappel
                        window.location.href = UrlRappel + "?codePostal=" + CodePostal + "&ville=" + Ville;
                    }
                }
            }
        }, error: function (request, status, error) {

            console.log(request.responseText);

            //On test si on est sur la page se faire rappeler
            if ($('#SeFaireRappeler').val() === "true") {
                $("#cpRequired").removeClass("hidden");
            } else {
                //On redirige vers la page de rappel
                window.location.href = UrlRappel + "?codePostal=" + CodePostal + "&ville=" + Ville;
            }
        }
    });
}

//Sur la validation du form de la popup de choix d'adhérent
function onSuccessChoixZone(data) {
    if (typeof data.status !== "undefined" && data.status === 1) {
        //Fonction Google Analytics
        var type = $("#TypeDiag").val();
        $("#TadherentNom").val(data.adherentNom);
        ga('send', 'pageview', '/prise-rdv-' + type + '-' + data.adherentNom + '-etape2');
        console.log('/prise-rdv-' + type + '-' + data.adherentNom + '-etape2');
        window.location.href = data.url;
    }
        //SI on vient de la page "se faire rappeler"
    else if (typeof data.status !== "undefined" && data.status === 0) {
        //Fonction Google Analytics
        var type = $("#TypeDiag").val();
        $("#TadherentNom").val(data.adherentNom);
        ga('send', 'pageview', '/demande-rappel-' + type + '-' + data.adherentNom + '-etape2');
        console.log('/demande-rappel-' + type + '-' + data.adherentNom + '-etape2');

        //On reste sur la page de rappel
        $("#popupChoixAdherent").hide(150);
        //On set la valeur sélectionné
        $("#AdherentId").val(data.AdherentId);
        //on scroll jusqu'au formulaire en bas de page
        $('html, body').animate({
            scrollTop: $(".titreSecondaire").offset().top + 250
        }, 500);
    }
        // Temporaire, pour limiter un compte à un seul adhérent car ça pète la synchro
    else if (typeof data.status !== "undefined" && data.status === -1) {
        $("#popupChoixAdherent").hide(150);
        //On affiche un message d'erreur

        //on change les libelle
        $('#titleErrorPopup').text("Votre compte est lié à un autre adhérent KIDEPANN");
        $('#libelleErrorPopup').text("Votre compte utilisateur est déjà lié à un autre adhérent KIDEPANN, veuillez créer un nouveau compte.");

        //on affiche la popup
        $('#popupError').show(350);
    }
    else {
        //On rebind les events de la popup
        HandleEventPopupChoixZone();
    }
}

//Pour gérer les event après le load de la modal de choix d'adherent
function HandleEventPopupChoixZone() {

    $('#btFermerPopupChoixZone').on('click', function () {
        //On cache la popup
        $('#popupChoixAdherent').hide(150);
    });

    //On gère le clicks sur les radio buttons
    $('input[type=radio][name=ZoneID]').change(function () {
        //on met la raison sociale dans le span
        $("#spanRaisonSocial").text($(this).data("adherent"));
        //On affiche la div du message
        $("#divRaisonSocial").show(350);
    });
    if ($('input[type=radio][name=ZoneID]').length === 1) {
        $("#spanRaisonSocial").text($('input[type=radio][name=ZoneID]:eq(0)').data("adherent"));
        //On affiche la div du message
        $("#divRaisonSocial").show(350);
    }

    //On gère les popup
    var radio = $('.groupeRadio .contentRadio.contentRaisonSocial input[type="radio"]');
    if (radio.orNot()) {
        radio.each(function () {
            var self = $(this);
            var parent = self.parent();
            parent.addClass('radioStyle');

            if (self.is(':checked')) {
                parent.addClass('isChecked');
            }

            $('.isRadioStyle', parent).click(function () {
                self.click();
            });

            self.change(function () {
                radio.each(function () {
                    var parent2 = $(this).parent();
                    //On remove la classe isCHecked
                    parent2.removeClass('isChecked')
                });

                if (self.is(':checked')) {
                    parent.addClass('isChecked');
                }
                else {
                    parent.removeClass('isChecked');
                }
            });
        });
    }
}

//Pour gérer le diagnostic
function LoadChoixTunnel() {

    //On cache la div qui a potentiellement pu déjà être affichée
    $("#divValiderDiagnostic").hide(350);
    $("#divValiderDiagnosticSansReponse").hide(350);

    var SelectionTunnel = $("#ChoixTunnel").find(":selected").val();


    //Pour ne pas lancer la recherche si on ne sélectionne rien ou si on est pas sur la page de diagnostic
    if (typeof SelectionTunnel !== "undefined" && SelectionTunnel !== undefined && SelectionTunnel !== "") {
        //On reset le numéro de l'arbo pour tout recommencer si besoin
        NumArbo = 0;

        //On stock l'arbre ID sélectionné
        $('#ArbreID').val(SelectionTunnel);

        $.ajax({
            url: UrlChoixArbre,
            type: 'POST',
            data: {
                id: SelectionTunnel
            },
            success: function (data) {

                //Pour Google stocker le type de diag
                var typeDiag = traiterChaine($("#ChoixTunnel").find(":selected").text());
                $("#TypeDiag").val(typeDiag);

                //On up la partial
                NumArbo++;
                $(".derouleDiag-" + NumArbo).html(data);
                //On anim l'affichage
                $(".derouleDiag-" + NumArbo).show(250);

                //Pour gérer le fait que si un problème est préselectionné, on ne doive pas faire le scrollTo sur le changement de selection la première fois lors du déroulé du diagnostic
                var ProblemeID = $("#ProblemeID").val();
                if (FirstLoad && ProblemeID !== "00000000-0000-0000-0000-000000000000") {
                    FirstLoad = false;
                } else {
                    //On scroll jusque là bas
                    $('html, body').animate({
                        scrollTop: $(".derouleDiag-" + NumArbo).offset().top - 100
                    }, 500);
                }

                BindEvents(NumArbo);
            }
        });
    }
}

//Pour binder les events du diag
function BindEvents(numArbo) {
    //On gère les images des radio button que le click déclenche la radio aussi
    var images = $('.derouleDiag-' + numArbo + ' .groupeRadio .imgReponseTile');
    images.each(function () {
        //var radioID = ;
        $(this).on("click", function () {
            $("#" + $(this).data("radio")).click();
        });
    });

    //On récupère le potentiel select Option de la div que l'on vient de générer
    var selectOption = $('.derouleDiag-' + numArbo + ' .contentSelect #selectOptionQuestion-' + (numArbo + 1));
    if (selectOption.orNot()) {
        selectOption.on('change', function () {
            var self = selectOption.find(":selected");
            var numArboFromRadio = self.data("numarbo");
            var isDiagnosticFromRadio = self.data("isdiagnostic");
            var isSansSolution = self.data("sanssolution");

            LoadNextQuestion(self, numArboFromRadio, isDiagnosticFromRadio, isSansSolution);

        });
    }

    //On récupère tous les radio button de la div que 'lon vient de générer
    var radio = $('.derouleDiag-' + numArbo + ' .groupeRadio .contentRadio input[type="radio"]');
    //On récupère toutes les radio button de la div fraichement généré
    if (radio.orNot()) {
        radio.each(function () {
            var self = $(this);
            var parent = self.parent();
            parent.addClass('radioStyle');
            if (self.is(':checked')) {
                parent.addClass('isChecked');
            }

            $('.isRadioStyle', parent).click(function () {
                self.click();
            });

            //Sur le click de la radiobutton
            self.click(function () {
                $('.derouleDiag-' + numArbo + ' .groupeRadio .contentRadio.isChecked').removeClass('isChecked');
                parent.addClass('isChecked');
                var numArboFromRadio = self.data("numarbo");
                var isDiagnosticFromRadio = self.data("isdiagnostic");
                var isSansSolution = self.data("sanssolution");

                if (self.not(':checked')) {
                    LoadNextQuestion(self, numArboFromRadio, isDiagnosticFromRadio, isSansSolution);
                }
            });
        });
    }
}

//Permet de charger la question suivante
function LoadNextQuestion(self, numArboFromRadio, isDiagnosticFromRadio, isSansSolution) {
    var success = function () { };


    if (isSansSolution === "True") {
        //$("#DiagnosticID").val(self.val());
        //On affiche le bouton d'affichage de la popup
        $("#divValiderDiagnosticSansReponse").show(350);
    }
    else if (isDiagnosticFromRadio === "True") {
        $("#DiagnosticID").val(self.val());
        //On affiche le bouton d'affichage de la popup
        $("#divValiderDiagnostic").show(350);
    }
    else {

        //On cache la div qui a potentiellement pu déjà être affichée
        $("#divValiderDiagnostic").hide(350);
        $("#divValiderDiagnosticSansReponse").hide(350);

        //On charge la suite
        success = function (data) {
            //On up la partial

            $(".derouleDiag-" + numArboFromRadio).html(data);
            $(".derouleDiag-" + numArboFromRadio).show(250);
            $('html, body').animate({
                scrollTop: $(".derouleDiag-" + numArboFromRadio).offset().top - 150
            }, 500);
            //On boucle en récursif pour dérouler le diag
            BindEvents(numArboFromRadio);
        }
    }

    $.ajax({
        url: UrlLoadNextQuestion,
        type: 'POST',
        data: {
            reponseId: $(self).attr('name'),
            numArbo: numArboFromRadio
        },
        success: success
    });
}


function onSeFaireRappelerFormBegin() {
    $('#submit-se-faire-rappeler').hide(0);
    $('.loader-gif').show(150);
}

//SUr le submit du form de la page se faire rappeler
function onSeFaireRappelerFormSubmit(data) {

    if (typeof data.statut !== "undefined" && data.statut === 0) {
        //On met à jour
        $('#divFormSeFaireRappeler').html(data.html);

    } else if (typeof data.statut !== "undefined" && data.statut === 1) {
        //On met à jour
        $('#divFormSeFaireRappeler').html(data.html);

        //On affiche une popup de validation
        $('#popupMailRappelOK').show(350);

        //On scroll au bon endroit pour afficher les messages d'erreurs
        $('html, body').animate({
            scrollTop: $(".popupMailRappelOKTitle").offset().top - 350
        }, 500);

        //Fonction Google Analytics
        var type = $("#TypeDiag").val();
        ga('send', 'pageview', '/demande-rappel-' + type + '-' + data.adherentNom + '-etape3');
        console.log('/demande-rappel-' + type + '-' + data.adherentNom + '-etape3');


    }
}