Question

In menu.html, I have my menu items(a href links), let’s call them, menu_1, menu_2, ….

In map.js displays the contents of a map, it calls an API to display some layers and maps. I have a lot of maps to show but i only want to call the api once.

Using AJAX, I was wondering if it’s possible to have an if/then or select/case in my js, so that if menu_1 is clicked, then implement map_1 etc. without having the page to reload. The only way I thought I could do this is using Post/get .. so when you click on menu_1 it takes you to page.php?page_id=1 . JS will read that and display the map.

I’m new to JS and AJAX so please feel free to butcher me

Answer 1

Yes, in fact if you are using jQuery you can just add click event handlers to each of these links:

jQuery(“#my_menu_item”).click( function(){
// Do something when the menu item is clicked…
} );

You might then use jQuery.post or jQuery.get to retrieve the URL and update your page.