Update Ajax on Document.ready function

Question

On document ready, I have the page calling ajax and displaying a table of results.

The rows can be updated by clicking a button, the button then calls a function which posts the update to the server.

I have this working without enclosing the click function in the document ready function but once I combine them it doesn't work.

html

<div id="newreqs"></div>

Javascript

$(document).ready(function(){

    $('.approveCredit').on('click', function(e) {
        e.preventDefault();

        var creditid = $(this).attr('creditid');
        var allocatedcreds = $(this).attr('allocatedcreds');

        $.ajax({
            url: "assets/ajax/addcustomer.php",
            type: "POST",
            data: {creditid: creditid,allocatedcreds: allocatedcreds},
            success: function(result){
                alert('Credit Applied!');               
            },
            error: function(exception){
                alert('Exception:' +exception);
            }
        });

    });

    $.post('assets/ajax/calldata/newreqs.php', function(data) {
        $('#newreqs').html(data)
    });

});

Data Called

<table class="table table-hover">
<thead>
<tr>
<th class="text-center" style="width: 50px;">#</th>
<th class="hidden-xs" style="width: 15%;">Name</th>
<th class="hidden-xs" style="width: 15%;">Requested Credits</th>
<th class="hidden-xs" style="width: 15%;">Notes from User</th>
<th class="hidden-xs" style="width: 15%;">PO</th>
<th class="hidden-xs" style="width: 15%;">Date Requested</th>
<th class="hidden-xs" style="width: 15%;">Status</th>
<th class="text-center" style="width: 15px;">Actions</th>
</tr>
</thead>
<tbody>
<?php 
  $count = 1;
    while ($row = mysql_fetch_array($test))  
    {?>
   <tr>
       <td class="text-center"><?php echo $count++;?></td>
       <td><?php echo $row['user_id'];?></td>
       <td><?php echo $row['credits'];?></td>
       <td><?php echo $row['notes'];?></td>
       <td><?php echo $row['po'];?></td>
       <td><?php echo $row['date_received'];?></td>
       <td><?php echo $status;?></td>
       <td class="text-center">
           <div class="btn-group">
               <a class="btn btn-xs btn-default approveCredit" type="button" allocatedcreds="<?php echo $row['credits'];?>" creditid="<?php echo $row['id'];?>" data-toggle="tooltip" data-original-title="Approve Credit Request"><i class="fa fa-check"></i></a>
           </div>
       </td>
    </tr> 
<?php } ?>  
</tbody>
</table>

As mentioned, this works when I don't encase the click function in the document ready function, however, when encasing nothing works.

The reason why I encased the click function is because I wanted to create a onpage refresh after the data had been updated on the server.

jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use [event delegation](http://learn.jquery.com/events/event-delegation/), bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally [you should delegate to the nearest parent that exists at the time of page load.](http://stackoverflow.com/a/12824698/1011527) — Jay Blanchard, Sep 29 '15 at 12:46
use this notation $('#newreqs').on('click', '.approveCredit', function(e) {}) — tetta, Sep 29 '15 at 12:48

Jai · Answer 1 · 2015-09-29T13:16:36.507

This is a use case of event delegation, change to this:

$(document).on('click', '.approveCredit', function(e) {

$(document) can be replaced with the static parent:

$('#newreqs').on('click', '.approveCredit', function(e) {

When page was loaded the button was not there and the event for that element could not get registered. So what can be done, is to delegate the event to the static parent or document itself.

Update Ajax on Document.ready function

1 Answers1