没有页面重新加载,jquery / ajax回调不会触发两次。第1部分

时间:2011-09-08 13:23:45

标签: php jquery ajax callback

我正在学习如何将ajax应用于我的jquery / php / mysql脚本以进行回调触发。这个问题可能来自我对这个术语名称的无知。

问题:有没有办法在不重新加载页面脚本的情况下重置ajax回调。

目标:我在jQuery Accordian 1,2和3上显示一个mysql查询。目标是从Accordian单击查询结果href并在jQuery UI Tab 3中显示结果而不重新加载页面...所以该脚本在我的第一次回调中触发,但它不会再次触发。是否有一个术语或jquery命令将重置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部分

   <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>";    
}

2 个答案:

答案 0 :(得分:4)

具有ID'stage'的ID中的元素是否'提交'?如果是,请尝试将$("#submit").click(function(){更改为$("#submit").live('click', function(){

答案 1 :(得分:3)

问题可能是因为你的提交按钮位于'stage'div内。这意味着当您加载新的“舞台”内容时,它将删除旧按钮并添加一个新按钮,而新按钮将不会附加任何点击内容。

快速解决此问题的方法是使用“实时”处理程序。

$(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();
});

但另一个可能使问题更加清晰的解决方案是在加载完成后重新添加点击处理程序。

$(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();
});