2015-10-26 2 views
0
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Tabs - Collapse content</title> 
<link rel="stylesheet" 
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script> 
$(function() { 
$("#tabs").tabs({ 
    collapsible: true 
}); 
    $("#tabs-2").load("something.html");** 
}); 
$(function() { 
$("#datepicker").datepicker({maxDate: new Date(1997,11,31)}); 
}); 

</script> 
</head> 
<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Alienware and Alpha</a></li> 
<li><a href="#tabs-2">More About</a></li> 
<li><a href="#tabs-3">Contact Us</a></li> 
</ul> 
<div id="tabs-1"> 
<p>blah blah</p> 
</div> 
<div id="tabs-2"> 

</div> 
<div id="tabs-3"> 

</div> 
</div> <br> 
<div id="mini"> 
<p><span class="italics">Please complete the form</span></p> 
<fieldset> 
<form id="appForm" action="submit.php" method="post"> 
**Some form details here (avoided to make the post more readable) 
</form> 

</div> 
</body> 
</html> 

вот мой something.html код:Jquery Ajax .load() не funtional

<html> 
<head> 
<title>Ajax tab 2 </title> 
<meta charset="utf-8"> 
</head> 

<body> 
    <p>This is p2!!</p> 
</body> 
</html> 

Я уже нить об этом, но ни один из предложенных методов не были полезными. Так что я делаю еще один. .load не дает никаких результатов. Внутри я думал, что это какая-то проблема с браузером, поэтому я попробовал все возможные браузеры и даже попробовал это на разных ОС, чтобы быть уверенным. Но это все еще не работает. Не отображается ошибка. На самом деле ничего нет из «something.html», отображаемого на tab2 (например, «Больше о»). Вкратце, метод .load действительно не загружает ничего из «something.html»

ОБНОВЛЕНИЕ: РЕШЕНИЕ: это не работает локально, оно отлично работает, когда и индексный файл, и «something.html» загружаются на сервер

+3

OK. Вы заявляете, что ваш код не работает. Однако вам нужно рассказать нам, что происходит, какие состояния консоли, ошибки, сетевую активность и т. Д. –

+0

Он не отображает содержимое из файла «something.html». его просто пустой tab2 (например, «Больше о») – ceeks

+0

Где находится что-то.html, указать, какая папка находится на вашем веб-сайте или находится в корне вашего сайта? –

ответ

1

Если «something.html» - это файл, который вы создали сами, возможно, попробуйте включить этот файл в качестве ссылки <link href="something.html"> в заголовок. Не уверен, что это сработает, но попробуй. При работе с jQuery Ajax обычно URL-адрес, где сервер получает доступ к данным. Возьми? У вас, вероятно, есть внешний файл, поэтому вы пытаетесь, как упоминалось выше.

+0

Да, это была проблема, им действительно удивило, сколько разработчиков сказали мне просто изменить код, но никогда не заметили, что это может быть актуальной проблемой. Спасибо! – ceeks

0

Несомненно, кто-то упомянул об этом в другом посте ... но вы, вероятно, должны вложить его в $(document).ready(. В противном случае javascript может выполнить до загрузки элемента #tabs-2.

$(document).ready(function(){ 
    $("#tabs-2").load("something.html"); 
}); 

Оформить заявку documentation для получения дополнительной информации.

0

У меня есть некоторые замечания по поводу вашего вопроса:

  1. Если вы тестируете, бегая файлы с протокола файл (открытие файлов с помощью браузера) AJAX (XMLHttpRequest) не будет работать в некоторых браузеров, таких как Chrome. Но если вы запустите свой локальный сервер на localhost например, ваши AJAX запросы будут работать исправно.
  2. При загрузке частичного содержания, вы не должны включать в себя как полный HTML документа, поэтому избавиться от <HTML> и < тела > оберток для частичного содержания. something.html только должен содержать: <p>This is p2!!</p>
  3. Если вы в то числе скриптов, которые зависят элементы DOM в < РУКОВОДИТЕЛЯ >, то вы должны добавить атрибут defer к вашему < скрипту > тегов ИЛИ переместить тег < скрипта > в конце < ТЕЛА > ИЛИ вы должны обернуть код для запуска, когда DOM готов:

$(document).on("ready", function() { /* CODE HERE */ }); 
// Shorthand for $(document).ready() 
$(function() { /* CODE HERE */ });