Динамический контент с помощью Ajax с помощью раскрывающегося меню

Question

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

Вот мой код выпадающего меню, а div #location-info - это то место, где я хочу получить информацию.

<div class="nav-location"> 
    <ul> 
     <li class="locationhead"><a href="#">Select Locations</a> 
      <ul id="location-options"> 
       <li><a href="http://modocom.ca/gillons/atikokan/">Atikokan</a></li> 
       <li><a href="http://modocom.ca/gillons/dryden/">Dryden</a></li> 
       <li><a href="http://modocom.ca/gillons/emo/">Emo</a></li> 
       <li><a href="http://modocom.ca/gillons/fort-frances/">Fort Frances</a></li> 
       <li><a href="http://modocom.ca/gillons/rainy-river/">Rainy River</a></li> 
       <li><a href="http://modocom.ca/gillons/red-lake/">Red Lake</a></li> 
       <li><a href="http://modocom.ca/gillons/sioux-lookout/">Sioux Lookout</a></li> 
       <li><a href="http://modocom.ca/gillons/thunder-bay/">Thunder Bay</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
<div id="location-info"></div> 

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

$('#location-options').on('click', 'a', function (event) { 
    $el = $(event.target); 
    $.ajax({ 
     type: 'GET', 
     url: $el.attr('href'), 
     success: function (html) { 
      $('#location-info').html(html); 
     } 
    }); 

    return false; 
}); 

I подумал бы, что это потянет информацию из div-info-информации с каждой из других страниц в раскрывающемся списке, когда вы нажмете, чтобы информация изменилась, и вы получите информацию о местоположении, например, это страница на modocom.ca/gillons/emo, который я хочу получить в информации от location-div

<div id="location-info"> 
    <div class="sevencol"> 
     <h4>Gillons | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p> 
     <p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p> 
    </div> 
    <div class="fivecol last"> 
     <h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p> 
    </div> 
</div> 

Так, чтобы HTML выше был тем, что я пытался бы извлечь в div location-info, когда кто-то нажимает на Emo, а затем он будет меняться при выборе другого места из раскрывающегося списка.

Я использую Wordpress, но этот материал все зашит в.

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

Answer 1

Я думаю, что ваша проблема в том, что в строке $('#location-info').html(html); вы извлекаете весь контент сайта из выбранной ссылки и набиваете его в свой <div>. Вместо этого вы должны принять только <div id="location-info"> от html переменной. Также не мешает нормальное поведение клика - оно просто следует за ссылкой. Также $el.attr('href') не вернет строку со ссылкой, а пустой объект, проверьте сами.

EDIT: Мне удалось привязать событие 'click' к каждой ссылке, поэтому вместо того, чтобы следовать ссылке, она просто отображает href в вашем div и затем делает запрос ajax.

Это мой JSFiddle пример:

http://jsfiddle.net/mUThR/51/

запрос Ajax выходит из строя, но в консоли я могу видеть, что это связано с Proxy 407 error, access denied; но он должен работать с вашей машины. Если это так, вам все равно нужно извлечь правильный div из возвращенного html.

Cheers.