Блог

У меня есть функция, которая заполняет список через AJAX.

 function listCourses() {    
var s= document.getElementById( 'courses' );

return $.ajax({
    type: "GET",
    url: "http://localhost:80/RickVideos/courseLib.xml",
    dataType: "xml",

    success: function( xml ){

        // load array with course codes
        var arr = [];
        $(xml).find( 'courseCode' ).each(function() {
                s.options[ s.options.length ] = new Option( $( this ).text());
        });

     },

    error: function() {
        alert("An error occurred while processing XML file." );
    }

});
 

При вызове функции я бы хотел, чтобы во время обработки AJAX отображалось модальное диалоговое окно, а затем модальное диалоговое окно заменялось другим модальным диалоговым окном, отображающим заполненный список.

  $(  "#ajaxLoading #listOfCurrentProjects" ).overlay({
    left: "center",
    top: "center", 
   closeOnClick: false, 
    load: false
}); 
$( "#newCourse" ).click( function() { 
   $("#ajaxLoading").overlay().load();

    listCourses().done(function() {
        $("#ajaxLoading").overlay().close();
        $("#listOfCurrentProjects").overlay().load();   
});;
 

При newCourse нажатии кнопки ajaxLoading отображается диалоговое окно, а затем закрывается. listOfCurrentProjects Диалоговое окно не отображается. При newCourse повторном нажатии кнопки ajaxLoading диалоговое окно отображается, а затем закрывается, заменяясь listOfCurrentProjects диалогом. Это желаемое поведение. Почему это не происходит при первом нажатии кнопки?

Вместо этого используйте обещания, которые реализованы в jQuery 1.5 и далее, например .done() , . Вы можете решить не использовать success error обратный вызов or .

 var listCourses = function() { 
    return $.ajax({
        type: "GET",
        url: "http://localhost:80/RickVideos/courseLib.xml",
        dataType: "xml"
    });
});
 

Вы можете вызывать свой AJAX, когда захотите, используя listCourses() . Вы даже можете привязать его к обработчику, почти как то, что вы сделали:

 $('#newCourse').click(function() { 
    $('#ajaxLoading').overlay().load();

    listCourses().done(function(xml) {
        var s = document.getElementById('courses');
        $(xml).find( 'courseCode' ).each(function() {
            s.options[s.options.length] = new Option($( this ).text());
        });

        $("#ajaxLoading").overlay().close();
        $("#listOfCurrentProjects").overlay().load();
    }).error(function() {
        alert("An error occurred while processing XML file." );
    });
});
 

Вы можете сделать его еще более подробным, выполнив вызов AJAX через переменную:

 var listCourses = $.ajax({
    type: "GET",
    url: "http://localhost:80/RickVideos/courseLib.xml",
    dataType: "xml"
});
 

А затем просто ссылайтесь на переменную listCourses , а не на функцию listCourse(s) , при прослушивании щелчка на #newCourse :

 $('#newCourse').click(function() { 
    $('#ajaxLoading').overlay().load();

    listCourses.done(function(xml) {
        var s = document.getElementById('courses');
        $(xml).find( 'courseCode' ).each(function() {
            s.options[s.options.length] = new Option($( this ).text());
        });

        $("#ajaxLoading").overlay().close();
        $("#listOfCurrentProjects").overlay().load();
    }).error(function() {
        alert("An error occurred while processing XML file." );
    });
});