Updating Info on The Fly w Dropdown?

JavaScript
1

Hey Guys,

Not sure if this is the spot to put this what I want to do is I got a Select Location spot on website I’m working on and from Dropdown Menu you can select location and I want the information to show when you select the location below it without loading a new page.

Here is the page, scroll down to the bottom, currently when you go over the dropdown menu and then select a Location it loads anew page and this just doesnt work for me. Is there a way to have it so when you select a location that location information fades in or something then if you want to see another location information it goes away and shows another one.

http://modocom.ca/gillons/

Thanks,

Mike

2

Hi Mike,

A partial page update with Ajax will do what you’re wanting.
Wrap the content that you want to swap out in a div#location-info and give your list of locations an id so we can select it easily.

<div class="fourcol last testimonials">
  <h4 class="black testimonialtitle">Find an office</h4>
  <div class="nav-location">
    <div class="ssf-green-wrap">
      <ul class="ssf-green sf-js-enabled sf-shadow">
        <li class="locationhead transition selected">
          <a class="sf-with-ul">Select Location<span class="sf-sub-indicator"></span></a>
          <ul style="display: none; visibility: hidden;" id="location-options">
          </ul>
        </li>
      </ul>
    </div>
    <div class="ssf-green-after"></div>
  </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>
</div>

This code will listen to clicks on that list and update the content of the info div with whatever is sent back from those requests.

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

Then you just need to make your current location routes like ‘/gillons/emo/’ return just that office HTML, not the entire page.

Hope it helps :slight_smile:

3

Thanks markbrown,

I’ve never used Ajax before so this is something totally new to me.

Also one thing I noticed my dropdown for Select Locations can I make it so the dropdown locations show once you click on Select Locations as oppose to just hover that may cause some confusion with visitors.

Now sorry I’m not familar with Ajax at all so if you could walk me through just one I can do rest. Would really appreciate that if possible. Got no idea how to just return certain information into that spot lol.

4

No problemo.

Ajax is just firing off a request in Javascript and handling a response without reloading the page, that’s it.

When you request http://modocom.ca/gillons/atikokan/ in a browser it’s making a GET request to that location on your server and returning the full HTML of the page. I’m not sure how your site is built and how you are rendering the office details but you’ll need to be able to make a page that returns just that HTML
/gillons/atikokan/ or something like /getOfficeDetails.php?office=atikokan needs to return the following.

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

Once that’s working the javascript I provided will capture clicks on the drop down menu, make a request, and then put the HTML returned into <div id=“location-info”></div>

Oh, I missed a return false in the event handler to prevent the click from following the links.

$('#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;
});

Hovering triggering the menu is just how superfish handles it, you would need to modify the plugin to make it respond to clicks instead.
http://stackoverflow.com/questions/7312414/superfish-jquery-menu-open-on-click-rather-than-hover/7489778#7489778

5

Hi markbrown,

I’ve changed me Select Locations all to CSS but now can’t even get it to work.

I’m still not fully understanding what you mean by making a page to just pull in that specific HTML sorry beginner to AJAX and doing this kind of stuff.

Thanks,

Mike

6

I’ve changed me Select Locations all to CSS but now can’t even get it to work.

You could have left the js as it were and changed the hover events to clicks in the plugin itself.

I’m still not fully understanding what you mean by making a page to just pull in that specific HTML

Not sure how else to explain it I’m afraid. What technology are you using to power your site? How did you get the office data into your site?

In the end you need to be able to hit a URL on your website to return the HTML you need.


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

If you’re using a cms maybe you can make a special template with just this content.

7

Hi markbrown,

I’m using Wordpress but this stuff is hardcoded into each.

I also need to have individual pages for this for SEO reasons. So if someone searches Gillons Emo it would go to… http://modocom.ca/gillons/emo/

But then once on that page they can change the office location information down at the footer just to change information to see different office locations throughout the site.

And when you just go to http://modocom.ca/gillons/ there is no info until you change it.

I’m not sure if I followed your information correctly but I got all the script you provided but when choosing a location it goes all wonky.

8

Also, have that throughout the site so on the interior pages such as…

http://modocom.ca/gillons/resources/frequently-asked-questions/

Need it so it can pull in the information for offices there too.

Thanks

9

I’m using Wordpress but this stuff is hardcoded into each.

Oh. I’m not sure I can help you further on this. You may need to ask in the Wordpress forum.
Maybe you can create a new test page in wordpress with just on of the office details sections.
Create a new empty template and make the page use it.
That should give you a page with just that content.

I’m not sure if I followed your information correctly but I got all the script you provided but when choosing a location it goes all wonky.

That sounds right to me.
It will be loading the entire HTML of the page inside that div.
You need it to load just the office details into the div.

10

Hi markbrown,

I don’t think that it being in Wordpress should really effect it.

Have you taken a look at the code so far? To see why its not just pulling in the one div. When you click on a location it just goes all weird.

Any ideas why?

11

Hi markbrown,

Finally got that to work I was just misunderstanding in the beginning it works perfect now.

One last thing so how do I go about changing that dropdown for Select Locations to where you need to click on Select Locations to see the dropdown and when you roll off the dropdown it will disappear?

Also, forgot to add if this is possible it would make it work perfectly if say you select your location for example Emo and the Emo information shows. Say if you navigate to a different page that information would remain there and not go blank for example on this page…

http://modocom.ca/gillons/us/our-story/

It would show in the footer still the Emo information until you select a new location rather then going blank and for the page below same thing except below it would be in the sidebar as I have that div in the sidebar rather then the footer section…

http://modocom.ca/gillons/contact-us/staff-directory/

Is this do-able or am I pushing my luck lol.

Thanks,

Mike