Dynamic Content with Ajax Using a Dropdown Menu

Discussion in 'JavaScript' started by Mike Bond, Dec 3, 2013.

  1. #1
    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>
    HTML:
    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);}});
    
    returnfalse;});
    Code (markup):
    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>
    HTML:
    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.

    The page is modocom.ca/gillons

    I hope this makes sense what I am trying to achieve.

    Thanks,

    Mike
     
    Last edited: Dec 3, 2013
    Mike Bond, Dec 3, 2013 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    From what I can see (the content of your code-blocks are messed up, hence I haven't bothered looking too closely at those) from the jQuery-code, you might have a problem in calling the return data from the function html - try replacing it with data, and you're sure you're having a location-info ID on the page you want to show the info on? Because that isn't pulling the #location-info data from the page, it's trying to put it into #location-info. It's pulling the whole page from the URL you're giving it, as far as I can see.
     
    PoPSiCLe, Dec 3, 2013 IP
  3. Mike Bond

    Mike Bond Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thanks PoPSicle, what would be my steps to sorting this out. As I'm completely new at this kind of stuff, using ajax to do this I've never done it before.

    I updated the code blocks and this is the site modocom.ca/gillons and for example if you scroll down to Find an Office the dropdown menu for example if you chose Emo from the dropdown would like to load in the Office Information from modocom.ca/gillons/emo

    Thanks,

    Mike
     
    Last edited: Dec 3, 2013
    Mike Bond, Dec 3, 2013 IP