Question

I’m having an issue with php and ajax. I have built a personal workout routine website (so I can view whilst at the gym). I have built the ability to add, edit and delete routines however I am trying to build it so that the edit and delete work through ajax so that it updates on the page rather than having the need to refresh the page.

My main issue is trying to get the routine id to pass through ajax as I can’t figure out how to do it dynamically! I have manually added in the ajax that id = 15 and the top routine data changes (although need to refresh page at the moment for data to change) but as I said, can’t figure out how to dynamically pull the routine id that is been updated.

View the website here http://www.swishwebs.co.uk/workout/view_workout.php

Let me know what I need to do get that routine id.

Thanks

Answer 1

in your anchor tag have some custom attribute lik data-id

<a href="##" data-id="{dynamic id through looping results}" class="button>Edit</a>

In jquery, you can retrieve it as

$(this).data("id");

In your code, you can have it as

$(".button").click(function() {
        var id = $(this).data("id"); 
        var dy = $("#day").val();
        var bp = $("#body_part").val();
        var sw = $("#start_weight").val();
        var cw = $("#current_weight").val();
        var ex = $("#exercise").val();
        var st = $("#sets").val();
        var rp = $("#reps").val();

            //other code

});

Based on your comment, I created a sample table with two rows like below:

<table border="0" bordercolor="#000000" cellspacing="0" cellpadding="0">
            <tbody>
                <tr style="border-top: 1px solid #ffffff;">
                    <Td><a href="##" data-id="5" class="button">Edit</a></td>
                    <Td>125</td>  
                </tr>


               <tr style="border-top: 1px solid #ffffff;">
                    <Td><a href="##" data-id="6" class="button">Edit</a></td>
                    <Td>135</td>  
                </tr>
          </tbody>
</table>​

and jquery code for the edit link click is as below:

   $(".button").click(function(){
      var id = $(this).data("id");
      var startweight = $(this).parent().next().text();
      alert(id + ", " + startweight);
   });

When the anchor tag is clicked, ‘$(this)’ refers to the element that is clicked, in your case, it in anchor tag. So when I say $(this).data(“id”), it only searches in anchor tag, but when you want to get other information from adjacent columns, you will need to learn about more DOM manipulation. I just gave an example on how to get information of adjacent columns. try for your code, and post here if you have any questions

Once your data is updated via ajax, you can do the same. Post some sample html of where you want to update the data, then porbably we can fix it.