A little dev tip for any of our Front End developer friends
Recently I was developing an interactive site for a client and it was intended to be a single page solution more like an app than a site, in that when a user clicked on a menu item the new content would be seamlessly loaded via asynchronous calls to avoid full page reloads.
What to do?
So now you have to separate the code associated with that section of content into a separate file and load that after the new content is loaded. OK we can do this but how best to link it?
You could add script tags in the HTML in the newly loaded content and it’ll work but it’s not the neatest way.
A worse solution
You could embed the script right there in the mark up – very messy.
The neat way
jQuery has a really cool one-liner to deal with this and as I’m using jQuery already to make life easy then it’s a super cool way of getting my new interaction code loaded at the right time whilst keeping the business logic separate from the display mark up.
Simply add the following line of code immediately after the call to load,
And if you name your script file the same as the content files then you can have simple function to handle loading content and associated business logic that looks like this:
filename = "products";
filename = "services";
case "about us":
filename = "about-us";
case "contact us":
filename = "contact-us";
case "the gallery":
filename = "gallery";
filename = "home";
I hope this is helpful to you. Do have any other or neater ways of achieving the same results – if so please share in the comments below. Have a great day.