jquery html()函数在整页中显示内容而不是在div中

时间:2012-09-22 06:54:07

标签: jquery html css

我正在尝试获取之前的html并在div中再次加载,如下所示:

$("#start_val").change(function(){


     var script = $("#search_result_cont").html();
     $("#search_result_cont").empty();
     $("#search_result_cont").html(script);

});

这里我首先尝试将search_result_cont内部html变为脚本变量 然后我通过使用empty()函数使search_result_cont div为空 然后我试图再次将相同的html插入search_result_cont。但是当我这样做时,html在整页中显示而不是在search_result_cont div中开始

这就是searchresult_cont所拥有的

<div class="search_result_cont" id="search_result_cont">
<script language="javascript">

var offers = <?php echo $jsonencoded;?>;
var node = offers.offer;
var resultpage = parseInt(node.length) / 10;
var result_start = document.getElementById('start_val').value;
var result_limit = parseInt(result_start) + 9;



 for(var i=result_start;i<=result_limit;i++)
 {
    document.write("<div class='result_box'><div class='result_left_area'><div class='result_title'>"+node[i].name+"<div class='result_stars'></div></div><div class='result_pic'><div class='show_image'></div><img src='"+node[i].image_url+"' style='height:100%; width:100%;' /></div><div class='result_icons_cont'><div class='share_icon' title='Share'></div><div class='information_icon' title='information'></div><div class='review_icon' title='Reviews'></div><div class='miles_icon' title='View Location' ></div></div><!--result_icons_cont ends--><div class='result_links_cont'><div class='result_link'>Website 1<span>"+node[i].currency+" "+node[i].price_no_vat+"</span></div></div><div class='view_all_prices'>View all prices from 12 websites <span style='font-size:20px; color:#32ccfe;'>&raquo;</span></div></div><div class='result_best_site'><div class='best_site'><img src='images/hotels/267_mx_bg.png' /></div><div class='round_corner_btn' onclick='window.open="+node[i].offer_url+"'></div></div><!--result_best_site ends --><div class='information_cont' id='share_info'>Shares: 6</div><!--information_cont share_info ends--><div class='information_cont' id='information_info'>Hotel Address:- "+node[i].address+","+node[i].city+"<br />Website:- <a href='"+node[i].offer_url+"'>Link</a><br />About:- "+node[i].description+"</div><!--information_cont information_info ends--><div class='information_cont' id='review_info'><input type='hidden' id='review_value' value='' /></div><!--information_cont review_info ends--><input type='hidden' id='lonlat' value='20.63536,476.98787' /><div class='information_cont' id='miles_info'></div><!--information_cont miles_info ends--><input type='hidden' id='picture_count' value='' /><input type='hidden' id='picture_url' value='' /><div class='information_cont' id='images_info'></div><!--information_cont images_info ends--><div class='information_close' title='close'></div></div><!--result_box ends here-->");
   }
    document.write("<div class='pagination_btn_cont'>");

for(var page = 1;page<=resultpage;page++)
{
      document.write("<div class='pagination_btn'>"+page+"</div>");
    }
    document.write("</div><!--pagination_btn_cont ends-->");

    </script>


 </div><!--search_result_cont ends here-->

1 个答案:

答案 0 :(得分:0)

$('div').load(window.history.back());

http://api.jquery.com/load/ &安培;&安培; How to get the previous page URL using JavaScript?

对我来说似乎是最简单的方法。我不是100%完全是你的意思,但是在另一个中加载页面方面,ajax加载(或者iframe,但没有人使用iframe)是要走的路。如果您只想要内部页面的一部分,则可以使用更多js截断页面。或者,更好的是,如果脚本不是面向事件的,那么首先要做服务器端的所有事情。


编辑:好的

我明白了。

将值发送到服务器

$("#start_val").change(function(){
  startnumber = $(this).val();
  $.ajax({
     type:'Head',
     async: false,
     data:{
            startnumber: startnumber
        },
     url: queryPage,
     success: function(data){
                 $("#search_result_cont").html(data); //No need to empty and all that                                           
            }                                           
  });

});

然后你的php'queryPage'

     <?php
         $startNumber =$_POST['startnumber'];
         for ( $i = startNumber; $i < startNumber + 10; $i++){
              // generate results with query
              // add query info in string to send
         }
         // echo said string
     ?>

修改:Nother Edit

JSON用于数据传输。虽然可以查询原始JSON,

Is there a query language for JSON?

大部分时间您只需引用所需的对象和数据。因此,假设您的JSON文件类似于

{
  "item": [
      {"description": "ipod",
       "cost": "200"}
  ],
  "item": [
      {"description": "iphone",
       "cost": "500"}
  ], 
 ...

在javascript中

然后你可以

var script = "";
var offers = <?php echo $jsonencoded;?>;
$("#start_val").change(function(){
  startnumber = $(this).val();
  for ( i = startnumber; i < (startnumber + 10); i++;){
      script .= "<div class ='description'>"; 
      script .= offers.item[i].description;
      script .= "<div>";
  }
  $("#search_result_cont").html(script);

});

哪个会写:

<div class ='description'> ipod </div> <div class ='description'> iphone </div>...

在#search_result_cont

它看起来有点类似于你所拥有的东西,这让我对整个问题感到困惑。

我不确定我是否可以回复,但我希望我能帮助&amp;&amp;祝你好运。