On Ajax Load Btn Click Set Javascript Variable

Question

I load an ajax query via two dates on my page which displays a list of calls.

Within the data returned there is CallID, Name, Date, Button to Complete.

I can't seem to get my javascript to fire on the button click after the AJAX call.

First my HTML:

    <input type="text" class="form-control date-picker" id="startdate" value="<?php echo date("m/d/Y");?>">

    <input type="text" class="form-control date-picker" id="enddate" value="<?php echo date("m/d/Y");?>">

<input type"text" id="rep" value="WOLRAB">

    <div id="calls"></div>

Second my AJAX to call data:

$('input#daterange').on('click', function() {

        var start = $('input#startdate').val();
        var end = $('input#enddate').val();
        var rep = $('input#rep').val();

        $.post('assets/ajax/repscalls.php', {startdate: start,enddate: end, rep:rep}, function(data) {
            $('#calls').html(data)
        });

});

Thirdly my php file performing results (note I've only copied in the button that displays on html page after ajax fire.

echo "<td><input type='hidden' id='callid' value='" . $row['callid'] . " '><input type='submit' id='completecall' value='Complete'></td>";

Now once this has been outputted to HTML page, I then want to click the COMPLETE button which updates that call with the status complete.

I was doing this a similar way, but for some reason I can't get my javascript to fire on button click.

$('input#completecall').on('click', function() {
        var completeid = $('input#callid').val();
        alert(completeid);  
});

shanehoban · Accepted Answer · 2015-08-18 10:22:45Z

1

The thing about AJAX is that JavaScript will not wait until the AJAX call is complete before executing code preceding it. E.g:

#some ajax call takes 10 seconds here`
var x = 2 + 2;
#ajax call complete

x will be evaluated instantly, not waiting for the AJAX call.

You will need to utilise the complete function of the AJAX call to ensure the button is clicked as you wish. E.g:

$.ajax({
  method: "GET",
  url: "test.php",
  data: "whatever",
  success: function(data){
     // do whatever 
  },
  complete: function(){ 
    // do your click
  }
});

complete always gets called, regardless of if an error/success occurs

Info on jQuery AJAX call here: http://api.jquery.com/jquery.ajax/

answered Aug 18, 2015 at 10:22

shanehoban

8701 gold badge9 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fuyushimoya · Accepted Answer · 2015-08-18 10:29:07Z

You have to use event delegate to listen to events which target is added after the register action.

$('input#completecall') probably has nothing when you call it, as it's not returned from server and not added to page yet, so your $('input#completecall').on('click', registered to nothing.

What you should do is find the container for that newly added element, and use the delegate form of .on to register the event.

So you can write your code like:

$('#calls').on('click', 'input#completecall', function() {
        var completeid = $('input#callid').val();
        alert(completeid);  
})

Below is a demo:

$('#add').click(function() {
  if ($('#new').length === 0) {
    var div = $('<div>').text('New one').attr('id', 'new').appendTo('#calls');
  }
});

$('#new').on('click', function() {
  alert("I won't be triggered!");
});

$(document).on('click', '#new', function() {
  alert("I will be triggered!");
});

div {
  width: 70px;
  text-align: center;
  background-color: lightgray;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add">Add</div>
<div id="calls"></div>

Collectives™ on Stack Overflow

On Ajax Load Btn Click Set Javascript Variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related