2014-08-29 57 views
2

在主页上,有一个<div>与ID - "search_result"显示所有的搜索结果。搜索结果是通过ajax调用加载的。结果(子页面)直接放入div负载阿贾克斯导致主(父)页面的DIV

在子页面,我能赶上click事件,做一套ajax呼叫接受的结果。我想将结果加载回主页的div"search_result"。我不能。

这里是主要页面的部分HTML。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <title>search</title> 
    ...... 
    </head> 
    <body> 
    ...... 
    <div id="search_results"></div> 
    </body> 
</html> 

这是装入"search_results"div子页面的内容。

<script> 
$(document).ready(function() { 

    $("#update_op").click(function(event){ 
     event.preventDefault(); 
     var link = $(this).attr("href"); 
     // Ajax here 
     $.ajax({ 
      type: "POST", 
      url: link, 
      dataType: "json", 
      success:function(data) { 
       $("#search_results").html(data); 
      } 
     }); 
     return false; // for good measure 
    }); 
}); 
</script> 


<div class="div_table"> 
    <div id="item_row_4" class="div_row"> 
    <div class="div_cell"> 
     <a id="update_op" class="update_op op" href="http://abc/bk/v/show-update/id/4">update</a>&nbsp; 
    </div> 
    </div> 
</div> 

$("#search_results").html(data);此行未加载我收到的结果。

解决方法:将dataType更改为html并且它有效。

+3

也许你想改变'的dataType :“html”'或'dataType:“text”'?将一个JSON对象追加到一个div没有多大意义。 – dave 2014-08-29 22:19:54

+0

看起来像是我的错。我将其更改为html。似乎现在工作。 – 2014-08-29 22:43:46

回答

1

我有这个问题,这里是我的解决方案:

<script> 
$(document).ready(function() { 

    $("#update_op").click(function(event){ 
     event.preventDefault(); 
     var link = $(this).attr("href"); 
     // Ajax here 
     $.ajax({ 
       type: "POST", 
       url: link, 
       dataType: "json", 
       success:function(data) { 
          location.reload(); 
         } 
     }); 
     return false; //for good measure 
    }); 
}); 
</script> 

我希望这可以帮助。

0

你为什么要使用“数据类型” JSON,你不发送JSON,所以我不知道,你不应该把这些代码。

这里是一个文件名为“probando.php”的例子。它适合我。

<body> 
<div id="search_results"></div> 
<br /><br /> 
<div class="div_table"> 
    <div id="item_row_4" class="div_row"> 
     <div class="div_cell"> 
      <a id="update_op" class="update_op op" href="probando.php">update</a>&nbsp; 
     </div> 
    </div> 
    </div> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $("#update_op").click(function(event){ 
     event.preventDefault(); 
     var link = $(this).attr("href"); 
     // Ajax here 
     $.ajax({ 
      url: link, 
      type: 'POST', 
      success: function (response){ 
       $("#search_results").html(response); 
      } 
     }); 
    }); 
}); 
</script> 

和 “probando.php” 代码:运行时加载的DOM元素

<?php 
    echo "Hola Mundo!"; 
?> 
2

点击事件具有以这种方式被写入

$("#update_op").on('click',function(event){ 
    e.preventDefault(); // return false 
    $.ajax({ 
     url: "url to fetch result", 
     type: 'POST' 
    }).done(function(data){ 
     $("#search_results").html(data); // this would change the data, you could use append(), prepend() etc. you would have to process data to display with css if needed 
    }); 
});