Question

I’m learning how to apply ajax to my jquery/php/mysql script for the purpose of callback firing. This question is probably from my ignorance when it come to the name of this term.

The Question: Is there a way to reset ajax callback without reloading the page script.

The Goal: I have a mysql query displaying on jQuery Accordian 1, 2, and 3. The goal is to click a query result href from Accordian and display the results in jQuery UI Tab 3 without a page reload…So far the script fires on my first callback but it doesn’t fire a second time. Is there a term or jquery command that will reset jquery/ajax?

index.php

<?php 
...script... include'right.content.php';
?> 

<script type="text/javascript" >
$(function() {
$("#submit").click(function(){   // when submitted 
  var name = $('#string2').val();
  var lname = $('#string3').val(); //  // POST name to php
  $('#stage').load('test.arena/test.php', {'string2':name, 'string3':lname,} ); 
});
$( "#tabs" ).tabs().find( ".ui-tabs-nav" ); 
$( "#accordion" ).accordion();
});
</script>

index.php – html section

   <div id="stage">
        <?php include'test.arena/test.php';?>
   </div>

right.content.php

while ($row = mysql_fetch_array($result)){      
  if($row['stats'] == "1"){
$data .= "<tr><td colspan='2'>".$row['order_number']."</td> 
<td colspan='2'>
<input type='hidden' id='string3' value='".$row['details']."'>
<input type='hidden' id='string2' value='".$row['order_number']."'>
<input type='button' id='submit' value='View'></td>
<td>info</td></tr>";

test.arena/test.php

if(!isset($_POST['string2'])){
$_POST['string2'] = "";

}else{

$string3 = "PO Number:" .$_POST['string3']; 
$string2 = "Order:" .$_POST['string2'];
echo $string3 ."</br>";
echo $string2 ."</br>";    
}

Answer 1

The problem is probably because your submit button is inside of the ‘stage’ div. This means that when you load the new ‘stage’ content, it will delete the old button and add a new one and the new one won’t have any click thing attached.

The quick fix for this is to use a ‘live’ handler.

$(function() {
  $("#submit").live('click', function(){   // when submitted 
        var name = $('#string2').val();
        var lname = $('#string3').val(); //  // POST name to php
        $('#stage').load('test.arena/test.php', {'string2':name, 'string3':lname,} );
  });

  $( "#tabs" ).tabs().find( ".ui-tabs-nav" ); 
  $( "#accordion" ).accordion();
});

But the other solution, which might make the problem clearer, is to re-add the click handler after the load finishes.

$(function() {

  function submitClicked() {
    var name = $('#string2').val();
    var lname = $('#string3').val(); //  // POST name to php
    $('#stage').load(
      'test.arena/test.php', 
      { 'string2':name, 'string3':lname },
      function() {
        addClickHandler();
      }
    ); // display results from test.php into #stage 
  }

  function addClickHandler() {
    $('#submit').click(submitClicked);
  }

  addClickHandler();
  $( "#tabs" ).tabs().find( ".ui-tabs-nav" ); 
  $( "#accordion" ).accordion();
});