Dynamic Content with Ajax Using a Dropdown Menu

Question

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

Answer 1

I think that your problem is that in line $('#location-info').html(html); you're pulling entire site content from selected link, and stuffing it into your <div> . Instead you should take only <div id="location-info"> from html variable. Also normal behaviour of click is not being prevented here - it simply follows the link. Also $el.attr('href') will not return a string with link, but an empty object, check for yourself.

EDIT: I was able to bind the 'click' event to each link, so instead of following the link, it simply displays href in your div, and then makes ajax request.

This is my JSFiddle example:

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

Ajax request fails, but in console i can see that it's due to Proxy 407 error, access denied ; but it should work from your machine. If it does, you still need to extract proper div from returned html.

Cheers.