Dynamic Content with Ajax Using a Dropdown Menu

Dynamic Content with Ajax Using a Dropdown Menu

what I am trying to do is have a specific div from another page being loaded into a div when you click on a dropdown menu.

Here is my dropdown menu code and the div #location-info is where I want the info pulled into.

<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>

Now here is the script I have in the footer of my site to try to pull in the content from the a href of each of the items in that dropdown...

$('#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 would think that this would pull in the info from the div location-info from each of the other pages in the dropdown when you click so the info changes and you get the location info for example, this is the page at http://modocom.ca/gillons/emo which I want to pull in the info from the 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>

So that HTML above is what I would be trying to pull into the location-info div when someone clicks on Emo and then so on it would change when you select different location from the Dropdown.

I am using Wordpress but this stuff is all hardcoded in.

Struggling with this one hopefully someone can lend a helping hand, can seem to wrap my head around it.

Here is link to the site... http://www.modocom.ca/gillons