Загрузить HTML-код в пределах вызова AJAX

Question

У меня возникли трудности с функцией Javascript, которую я пишу. Основная функция скрипта заключается в том, что когда определенная функция AJAX вызывается и возвращается успешно, она загружает некоторый HTML из файла и вставляет этот HTML-код в главную страницу, а затем (после загрузки) исчезает в родительском div.

jQuery.ajax({ 
    type: "POST", 
    url: "fns/authenticate.php", 
    data: dataString, 
    success: function (data) { 
     if (data=='1') { 
      jQuery("#authlogin").fadeOut(500, function(){ 
       $(this).remove();     
       jQuery("#result").load("fns/logic.html", function() { 
        jQuery('#authtrue').fadeIn(1000); 
       }); 
     }); 
     } else { 
      jQuery('#details-error').fadeIn(200); 
     } 
    } 
}); 

return false; 

Теперь AJAX, кажется, функционирует должным образом, в том, что он будет выполнять при правильных условиях и исчезать, и в правильных дивы, проблема, кажется, что содержание не загружается из logic.html или он не привязан к правилу #result.

HTML главной странице выглядит так:

<div id="authlogin"> 
<!-- HTML form --> 
</div> 

<div id="authtrue" style="display: none;"> 
<div id="result"></div> 
</div> 

Любая помощь будет оценена.

Answer 1

Это одна из тех вещей, которые вы должны устранить самостоятельно, потому что у нас нет доступа к вашему fns/logic.html и, следовательно, он не может полностью протестировать.

Однако некоторые мысли:

(1) Основная логика вашей функции успеха .load() кажется правильным. Here is a jsFiddle, который аппроксимирует логику функции успеха AJAX. Я заменил .html() на .load(), потому что jsFiddle не может делать ajax. В любом случае, считая, что .load() делает все, что должно, эта часть должна работать.

(2) Вы уже знаете, но обратите внимание, что .load() представляет собой сокращенную $.ajax() - как и .post() и .get(). Вы можете обнаружить, что $.ajax() легче устранить проблему, поскольку блок кода более структурирован. Как правило, устранение неполадок в сокращенные конструкции немного более абстрактные/сложнее, чем устранение неисправностей $.ajax()

(3) Используйте средства разработчика в Chrome (нажмите клавишу F12), чтобы убедиться в том, что содержимое logic.html были вставлены в #result дела. Вы могли бы найти, как я играл с моим jsFiddle, что содержимое было введено, но div #authtrue остался скрытым. По крайней мере, вы узнаете, что документ logic.html найден и содержимое вставлено. Зная, где именно проблема, поиск/фиксация остального теперь может быть тривиальным.

(4) Включает ли ваш файл logic.html ненужную информацию заголовка? Если это так, вы можете отключить его, только вставив BODY документа или верхний уровень, содержащий div.See this section из документации JQuery:

jQuery("#result").load("fns/logic.html #container", function() {//CALLBACK IN HERE}); 

(5) Было бы очень умная идея, чтобы создать тестовый документ, который как раз и только загружает logic.html документ, используя различные методы:

Метод A: Использование PHP (или любой другой на стороне сервера язык вы используете)

<div id="authlogin"> 
    <!-- HTML form --> 
    <input type="button" id="mybutt" value="Click Me to Start" /> 
</div> 
<div id="authtrue" style="display:none;"> 
    <div id="result"><?php include 'logic.html'; ?></div> 
</div> 

Метод B: Использование load()

HTML:

<div id="authlogin"> 
    <!-- HTML form --> 
    <input type="button" id="mybutt" value="Click Me to Start" /> 
</div> 
<div id="authtrue" style="display:none;"> 
    <div id="result"></div> 
</div> 

JQuery:

jQuery('#authtrue').show(); 
jQuery("#result").load("fns/logic.html"); 

(6) Убедитесь, что вы не опечатка в селекторе назначения элемента Jquery: If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent. (from the docs)

Answer 2

мне удалось исправьте это сам, благодаря помощи всех здесь. В результате он стал проблемой кэширования браузера. Как только я очистил кеш, все магически сработало.