Question

I’m implementing a virtual tour application, and want to add ajax functionality to the tour build process.

I have a number of mini-forms on the page, the number of which is determined by the count of images in a specified directory.

So the page currently looks like

---------------------------------------------------
|             |           Location   
|             |           Latitude
|  Thumb      |           Longitude       --------
|             |                           | Save |
|--------------                           --------
|
---------------------------------------------------
---------------------------------------------------
|             |           Location   
|             |           Latitude
|  Thumb      |           Longitude       --------
|             |                           | Save |
|--------------                           --------
|
---------------------------------------------------
---------------------------------------------------
|             |           Location   
|             |           Latitude
|  Thumb      |           Longitude       --------
|             |                           | Save |
|--------------                           --------
|
---------------------------------------------------

and goes on for n number of images.

What I’d like to do is have the save button execute an ajax function to save the information
without refreshing the page. My issue has to do with the button IDs. As the form is rendered via PHP echo statements in a loop, I can add the loop number to the button ID, but how can I use said ID in a jquery function?

Specifically,

$("#save").click(function(){
  //ajax POST code goes here
});

won’t work when the #save has a number added to the end.

What other options do I have to implement ajax functionality to these forms?

Answer 1

I would add a class to each button then attach the click event to that class and then find the ID that way. Then you can run your AJAX.

Like this:

$('.buttonClass').click(function (){
    var id = this.id;
    var $thisButton = $('#' + id);
    //Can do jQuery stuff with $thisButton now
    //Run AJAX
});

Just make sure you add the class to every save button.