$ .Ajax загружает HTML-код и показывает его после как в JQuery .load - PullRequest
Новая
       25

$ .Ajax загружает HTML-код и показывает его после как в JQuery .load

1 голос
/ 02 марта 2012

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

Когда я делаю это: 

$("#divLogin").load("./affichage/choixFormat.html", function() {
    $("#choix-box").fadeIn(300);
});

Работает нормально, загружает HTML в DIV и после его показа.

Но у меня есть код для меня лучший скрипт с $ .Ajax, который не работает: 

$.ajax({
        url: "./affichage/choixFormat.html",
        type: "POST",
        async: false,
        cache: true,
        dataType: "html",
        beforeSend: function() {
        $("#loading").removeClass("hide");
        },
        timeout: 5000,
        error: function(request, textStatus, errorThrown) {
            console.log(request.status);
        },
        success: function (msg, textStatus, request) {
        $("#divLogin").html(msg);
        }
    });
$("#choix-box").fadeIn(300);

Яваскрипт пытается исчезнуть DIV, прежде чем он завершит загрузку, я думаю ... Но я не понимаю почему ... я выбрал async: false!И я увядаю после успеха!

Я предпочитаю использовать $ .Ajax, потому что мы можем сделать больше вещей с ним ... Кто может объяснить, почему это не работает?И JQuery .load работает нормально: (

Спасибо

Я ошибаюсь, извините, два решения не работают :( Я должен два раза загрузить DivLogin для исчезновения: (

Я также пытаюсь сделать: 

request.done(function(msg) {
    console.log("End of div loading");
    $("#choix-box").fadeIn(300);
});

Но это тоже не работает :( У меня только ЛОГ в консоли. DOM слишком длинный, чтобы загрузить HTMLи не могу показать это ... вот почему я должен загрузить его в первый раз, а во второй раз выполнить скрипт.

У кого есть другое решение, пожалуйста?

Теперь я пробую слишком много вещей ... самое лучшее на данный момент: 

$('#div').ready( $("#div").fadeIn(300) );

Но это не всегда тоже идеально :( Неужели нет реального решения в JQuery, пожалуйста?

Хорошо, вот мой последний код, который не всегда показывает мой div :( Иногда да, а иногда нет, невозможно понять почему? 

$('body').prepend('<div id="divChoiceFormat"></div>');
//getContenu('./affichage/choixFormat.html', 'divChoixFormat');

// CSS Load
appendCss("./style/choiceFormat.css", "choiceFormatCSS")

$("#divChoiceFormat").load("./affichage/choiceFormat.html", function() {

    // When ready
    $('#divChoiceFormat').ready( $("#choice-box").fadeIn(300) );
}

Чтобы загрузить CSS до HTML, я сделал: 

function appendCss(url, id) {

    var link = $("<link>");
    link.attr({
        charset: "UTF-8",
        media:   "all",
        type:    'text/css',
        rel:     'stylesheet',
        id:      id,
        href:    url
    });
    $("head").append( link );

return false;
}

Может, мой заказ неверный?

Ответы [ 2 ]

1 голос
/ 02 марта 2012

Поместите это $("#choix-box").fadeIn(300); в успех ajax.

0 голосов
/ 06 сентября 2014 
// before sent

// call
$("#divLogin").load("./affichage/choixFormat.html", function( response, status, xhr ) {

    if ( status == "error" ) {
        console.log('Error : '+ xhr.status + " " + xhr.statusText);

    }else if(status == "success"){
        $("#divLogin").html(response);
        $("#choix-box").fadeIn(300);

    }else if(status == "notmodified"){
        console.log('Error : similar html detected'); 

    }else{
        console.log('Error : no status'); 
    }
});

Вот и все работает. Если это не так, в вашем html есть еще одна вещь.

  • Проверьте идентификаторы, если они уникальны для всех блоков, иначе используйте класс для несколько вызовов с несколькими блоками.
  • Проверьте и ваш относительный путь: './ affichage / choixFormat.html'
  • Наконец, кешируйте ответ в экземпляре, чтобы повторить load () efficently.
  • И, пожалуйста, не используйте Html при вызове ajax ... худшая практика.

То, что я делаю, это то, что я делаю раньше, чем когда-либо, уникальный переворот.

...