CODEWITHSUNDEEP
javascriptphpjquery
CharlieArlo
CharlieArlo

Reputation: 1

An issue with a variable sent from a PHP page incrementing each time a button is clicked

Problem Summary

I have a Web App that displays a summary of data (date, subject, description etc) returned from an API. The user logs in, the PHP script pulls in the data and outputs each item as a table row. There is a link on each row that allows the user to click which will make another call to the API and pull in detailed information for that one entry. It uses an item ID number that is dropped into the link ID attribute when the rows are generated.

For testing purposes, I have a JQuery code block that just renders the ID number of each link when clicked as a P element. This way, I know that the JQuery function is definitely passing the ID to the PHP script and the script is definitely returning something back to the page.

Here is PHP returning the data:

    echo "<tr>
            <td>$dateChange</td>
            <td>$itemSubject</td>
            <td id='myDiv'>$itemSummary<br />
               <a class='test'  href='#' id=$itemID onclick='testing();'> 
               View Details
               </a>
            </td>
            <td>$itemState</td>
          </tr>";

And here is the JQuery function that is called when the user clicks the appropriate link:


    function testing() {
        $.post("itemDetails.php", { id: $(this).attr('id') }, function(response) {
         var details = document.createElement("P");
         details.innerText = response;
         document.getElementById('myDiv').appendChild(ticket);
         });
};

What I though would happen:

Each time a link is clicked, the function will post the ID attribute for that link to the PHP script. The PHP script will echo that back and the function will take the response and render it as a new element appended to the td element.

What actually happens:

The first time a link is clicked the ID for that link is rendered on the page twice, the next link renders three times, the next four and so on. Each time a link is clicked, the ID for that link is output++

I can't figure out why it's incrementing the output each time and not just printing once.

I hope I've explained things clearly. If not, please let me know. Or, if I'm going about this whole thing the wrong way then tell me.

Kind Regards

EDIT

Finally figured out what I was doing wrong. Removed the onclick function call and used a .ready. Updated JavaScript/JQuery is:

    $(document).ready(function() {
      $("a").click(function(event) {
        $.post("includes/modal.php", { id: event.target.id }, function(response) {
          var ticket = document.createElement("P");
          ticket.innerText = response;
          document.getElementById('myDiv').appendChild(ticket);
        });
      });
   });

Thanks for the assistance! Much appreciated.

Upvotes: 0

Views: 56

Answers (1)

Sebastian Kaczmarek
Sebastian Kaczmarek

Reputation: 8515

The problem here is that in your testing() function you are listening to the click event and then in your PHP response HTML code you are attaching this function to the click event:

<a class='test'  href='#' id=$itemID onclick='testing();'>

Which, when clicked, will listen to another click event which will do another request which will render HTML with testing() attached to the click event and when clicked... and so on.

Solution

Do not add click event listener in the testing() function so you can avoid the loop.

Make use of jQuery.on() method which will allow you to bind event listeners to the elements which are not present in the DOM at the moment of the event binding. Try doing it like this:

In your JS file:

$('#myDiv').on('click', 'a.test', function(e){

    testing($(this).attr('id));
});

and change the testing() to be similar to this:

function testing(id) {
    $.post("itemDetails.php", { id: id }, function(response) {
        var details = document.createElement("P");
        details.innerText = response;
        document.getElementById('myDiv').appendChild(ticket);
    });
};

Last but not least, remove the onclick from PHP response:

echo "<tr>
        <td>$dateChange</td>
        <td>$itemSubject</td>
        <td id='myDiv'>$itemSummary<br />
           <a class='test'  href='#' id=$itemID> 
           View Details
           </a>
        </td>
        <td>$itemState</td>
      </tr>";

Hope it helps, feel free to modify this example to your needs.

Upvotes: 1

Related Questions