получение jQuery для загрузки информации с другой страницы

Question

(машет флагом новичка, также новичок в JS и jQuery)

Я работаю на веб-сайте моей компании, работающем на Squarespace.

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

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

Теперь ... когда я нажимаю на одну ссылку, которую я настроил, чтобы проверить это, ссылка выполняет "ожидаемый" ответ при загрузке html-страницы, но захватывает всю эту вещь и удаляет мою навигацию.

Я полностью готов сделать свою собственную работу и RTFM, но я не уверен, где искать в упомянутом руководстве. Так что я открыт для указателей на документацию.

Вот что у меня есть.

// initialise plugin
$(document).ready(function() {
$(function(){
$('ul.sf-menu').superfish();

// this bit was taken from this tutorial: http://is.gd/PuaK-
$('#nav li a').click(function(){
// function to load in the actual page data
var toLoad = $(this).attr('href')+' #content';
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$('#content').show();
}
return false;
});

Спасибо, что посмотрели.

---

6/10/09 - обновление - Я провел больше времени в RTFM. И я дошел до того, что мне кажется, что я понимаю, как работает функция «.load». Я смог успешно использовать его на тестовой странице. Так что теперь я думаю, что могу уточнить свои цели.

Уточненное заявление:
Я хочу взять <a> пункт назначения и взять содержимое <div> данных в <iframe>.

Это моя первая настоящая разработка с использованием JavaScript; и я знаю, что иногда бывает неприятно иметь дело с новичками, заранее благодарю за терпение.

---

6/15/09
Ладно ... пока я откладываю эту идею. Это далеко от моей глубины и в настоящее время задерживает производство. Если у кого-то есть хорошая идея, я все еще открыт, еще раз спасибо.

Answer 1

Я думаю, что Бенни Вонг прав.

Похоже, ваша структура:

<div id='content'>
  <div id='nav'>...</div>
  other stuff
</div>

Как предложено, попробуйте:

<div id='nav'>...</div>
<div id='content'>
  other stuff
</div>

Давайте на минутку проясним два использования #content в этом сценарии.

$('#content').load('http://whatever #content');

Первый пункт назначения. Все содержимое этого div будет заменено. Вот почему Бенни предложил вам переместить #nav за пределы этого div.

Второе использование #content (после URL) сообщает jquery, какую часть другой страницы нужно захватить.

Answer 2

Здесь есть две вещи.

1. Вы ссылаетесь на класс как Я БЫ. для идентификаторов мы префикс # как $ ( '# Содержание'). Если вы действительно хотите ссылаться на класс, а затем просто удалить # и положить. (Точка)
2. Вы можете ссылаться на другую страницу и загрузить его, но это не обязательно означает, что это будет работать должным образом. Например, если страница вы загружаете имеет теги сценария в это заголовок, не получится и нет контент будет отображаться. Работа вокруг это двигаться внутри тела теги та страница, которую вы хотите загрузить. Кроме того, вы можете сделать уверен, что у вас нет конфликта с одинаковыми именами функций или идентификаторов.

Answer 3

Вы говорите, что ваша структура страницы выглядит следующим образом:

<div class="nav">
  <ul>
   <li><a href="">nav link</a></li>
   <li></li>
  </ul>
</div
<div class="content">
  <p></p>
</div>

И тогда в вашем JavaScript у вас есть:

$('#nav li a').click(function(){ ...

Ну, #nav относится к идентификатору, но в вашем HTML есть только классы.

Это означает, что ваша функция щелчка никогда не выполняется, и, щелкнув ссылку, вы просто переходите на страницу обычным способом.

Вы должны использовать .nav для выбора классов:

$('.nav li a').click(function(){
  var toLoad = $(this).attr('href')+' #content';
  function loadContent() {
    $('#content').load(toLoad,'',showNewContent);
  }
  function showNewContent() {
    $('#content').show();
  }
  return false;
});

Но этот код также не работает, потому что функция loadContent (), которую вы определяете внутри этого события click, никогда не выполняется.

Я бы написал так:

$('.nav li a').click(function(){
  var toLoad = $(this).attr('href')+' #content';
  $('#content').load(toLoad, '', function() {
    $('#content').show();
  });
  return false;
});