jQuery ændre og Ajax metoder intermitterende svigt på IE og Firefox på Windows

Indlæg af Hanne Mølgaard Plasc

Problem



Jeg har ikke kunnet replikere denne fejl i mine testmiljøer, men vi har fået regelmæssige opkald fra kunder, der hævder, at en valgmenu onChange -hændelse i det væsentlige ikke indeholder en anden menu. De foretager et udvalg af den første menu, og den hænger uden at producere den anden menu, hvorfra man kan udfylde formularen.


Jeg bruger metoden change() tildelt til den første valgmenu til at køre en Ajax-anmodning på serveren for at gribe den anden menu, som er befolket med værdier baseret på det, der er valgt i det første. Jeg kører jQuery 1.7.1, og denne metode lykkes i alle mine testmiljøer.


Disse opkaldere bruger Firefox og IE på Windows-maskiner; Indtil videre er der ingen opkald fra Mac-brugere eller Windows-brugere med andre browsere. Jeg vil gerne have mere information fra dem, men disse brugere er temmelig uerfarne med selv hvordan man leder efter en fejlrapport i browseren. Jeg har implementeret følgende rettelser, der anbefales i andre løsninger, der er indsendt på StackOverflow og andre bestyrelser, men stadig med ingen succes:



  • Deaktiver cacheegenskaben i Ajax-opkaldene

  • Brug $ ('. selectMenu') .ændre () metode i stedet for $ ('. selectMenu'). bind ('ændre', funktion () {...});

  • Force HTTPS i Ajax-stierne (da dette er på en sikker form)

  • Kontroller og sørg for samme oprindelsespolitik for Ajax-opkald

  • Sørg for, at metoden change () ender med en return false for at forhindre jQuery i at boble begivenheden



Med det her er min kode. Det er ret ligetil og i overensstemmelse med standardeksempler på, hvordan man implementerer jQuery change() og ajax() metoderne. Der er to udvalgte menuer. Når den første er valgt, kører den en Ajax-anmodning på serveren for at opnå indholdet for den anden menu, baseret på den valgte værdi i den første.


$('#Sections').change(function() {
    $('#sectionsIndicator').css('display', 'block');
    $.ajax({
        async: true,
        type: 'post',
        url: 'https://example.com/getCategoriesMenu',
        data: { id: $('#Sections').val() },
        dataType: 'html',
        cache: false,
        success: function(data) {
            $('#\_categories').html(data);
            $('#sectionsIndicator').css('display', 'none');
            preview.update(); //render a preview of the whole form
        },
        error: function(xhr, status, error) {
            var msg = "It appears an error has occurred while trying to update the Categories menu.";
            msg += " Please try adjusting your security settings or refreshing this page before attempting to post this form.";
            msg += " [ Status: " + status + "   Error: " + error + " ]";
            alert(msg);
        }
    });
    return false;
});


Værdien data på en vellykket Ajax-forespørgsel er en HTML <select> -menu. #\_categories vælgeren svarer til en <div>, der er viklet omkring den anden valgmenu.


Som jeg sagde ovenfor, kan jeg ikke lave en fejl på alle større browsere i Mac, Windows XP, Windows Vista og Windows 7. Men jeg kan ikke nægte at brugere rapporterer menuen, når de forsøger at lave en udvælgelse.

Bedste reference


Du mangler et halvkolon efter msg += " Please try adjusting your security settings or refreshing this page before attempting to post this form." Dette kan forårsage et problem