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