Introduction to AJAX: Conditional Statements

Question

Introduction to AJAX: Conditional Statements

Within the menu.html file, there are various menu items (a href links) called menu_1, menu_2, and so on.

The map.js file is responsible for displaying map content by utilizing an API to showcase different layers and maps. Even though there are many maps to display, the goal is to only call the API once.

I'm curious if it's feasible to use AJAX in my JavaScript code to create a scenario where when a specific menu item like menu_1 is clicked, then map_1 is implemented without requiring the page to reload. One potential approach I considered involves using post/get methods, such that when menu_1 is selected, it redirects to page.php?page_id=1. JavaScript can then interpret this information and showcase the corresponding map.

As someone who is new to JS and AJAX, I am open to constructive criticism and guidance.

javascript ajax

Answer 1

Answer №1

A great way to enhance your website is by utilizing jQuery. By simply adding a click event handler to each link, you can easily customize the behavior of your elements:

For example, jQuery("#my_menu_item").click( function(){ // Add your custom action here... } );

Additionally, consider using jQuery.post or jQuery.get methods for fetching data and updating your webpage seamlessly.

Answer 2

A great way to enhance your website is by utilizing jQuery. By simply adding a click event handler to each link, you can easily customize the behavior of your elements:

For example, jQuery("#my_menu_item").click( function(){ // Add your custom action here... } );

Additionally, consider using jQuery.post or jQuery.get methods for fetching data and updating your webpage seamlessly.

Answer 3

Answer №2

DEMO: http://jsbin.com/ohaxa/4/edit

$(function() {
  $('#menu li > a').click(function(e) {
  e.preventDefault();

  var my_id = $(this).attr('id'); // grab id from link

$.ajax({
   type: "POST",
   url: "ajax_call.php",
   data: "action=do_something&my_id=" + my_id,
   success: function(data){

     my_function(my_id); //execute outside function...

    //OR use the returned "data" value and add it to DOM 
    // $(#ajax_call_back).append(data); 

   },
  complete: function(data){
     //execute something when request is complete..
   },
  error: function(data){
     //handle errors in this demo pseudo ajax call instead!
     my_function(my_id);

   },
 }); 

});
});

function my_function(id) {
  alert(id);
  var map = '';

  switch(id)
{
case 1:
map = id;  //map_1
  break;
case 2:
map = id;  //map_2
  break;
case 3:
map = id;  //map_3
  break;
default:
map = id;  //map_0
}

 $('#application').text('map_' + map);  

};

     <ul id="menu">
           <li><a href="#" id="1">menu_1</a></li>
           <li><a href="#" id="2">menu_2</a></li>
           <li><a href="#" id="3">menu_3</a></li>
           <li><a href="#" id="4">menu_4</a></li>
           <li><a href="#" id="5">menu_5</a></li>
        </ul>

     <div id="application"></div>
  <div id="ajax_call_back"></div>

Answer 4

DEMO: http://jsbin.com/ohaxa/4/edit

$(function() {
  $('#menu li > a').click(function(e) {
  e.preventDefault();

  var my_id = $(this).attr('id'); // grab id from link

$.ajax({
   type: "POST",
   url: "ajax_call.php",
   data: "action=do_something&my_id=" + my_id,
   success: function(data){

     my_function(my_id); //execute outside function...

    //OR use the returned "data" value and add it to DOM 
    // $(#ajax_call_back).append(data); 

   },
  complete: function(data){
     //execute something when request is complete..
   },
  error: function(data){
     //handle errors in this demo pseudo ajax call instead!
     my_function(my_id);

   },
 }); 

});
});

function my_function(id) {
  alert(id);
  var map = '';

  switch(id)
{
case 1:
map = id;  //map_1
  break;
case 2:
map = id;  //map_2
  break;
case 3:
map = id;  //map_3
  break;
default:
map = id;  //map_0
}

 $('#application').text('map_' + map);  

};

     <ul id="menu">
           <li><a href="#" id="1">menu_1</a></li>
           <li><a href="#" id="2">menu_2</a></li>
           <li><a href="#" id="3">menu_3</a></li>
           <li><a href="#" id="4">menu_4</a></li>
           <li><a href="#" id="5">menu_5</a></li>
        </ul>

     <div id="application"></div>
  <div id="ajax_call_back"></div>

Introduction to AJAX: Conditional Statements

Answer №1

Answer №2

Similar questions

The error message "No native build was found for M2 MacBook" appeared while using npm with Node

Authentication Failure: Passport azure-ad Verify Callback Is Not Triggered

Style the div element with CSS

What is the purpose of using Array.prototype.slice.call(nodeList) for handling DOM elements?

What is the best way to modify the styling of my CSS attributes?

Why is my Ajax post request to the CodeIgniter controller resulted in a 404 error, even though it successfully reached the

Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Storing form data in a file using React

Is it possible to dynamically create input fields in AngularJS by clicking a button?

Encountering an issue while attempting to utilize the .find() method in Mongoose

Issue with dynamically generated modal popup not registering jQuery 'on' event handler

Trouble with executing Mongoose find within an asynchronous function

Navigating to the present child state with modified parameters can be achieved using the following steps

The name field in the request body is currently undefined

How to effortlessly convert a JSON string into a JavaScript object

What steps can I take to avoid Vue.js overriding jQuery bindings within components?

Retrieving the class ID when clicked

Best Practices for Closing MySQL Connections in Node.js

The Vue/Vuetify wrapper component does not automatically pass on the `hide-details` parameter to the input component

Receive immediate updates of the text input in real-time using the onkeydown event handler in Javascript