jquery html() function display the content in a full page rather than inside a div

Question

i am trying to get the previous html and load that again inside a div like this:

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


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

});

here first i am trying to get the search_result_cont inner html into a script variable then i make search_result_cont div empty by using empty() function and then i am trying to insert again the same html into search_result_cont. but when i do this the html starts disply in full page rather than inside the search_result_cont div

this is what the searchresult_cont have

<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-->

Answer 1

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

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

Seems the simplest way to me. I'm not 100% exactly what you mean, but in terms of loading pages within another, ajax load (or iframes, but no one uses iframes) is the way to go. If you only want a portion of the inner page, you can then truncate the page with further js. Or, even better, if the script isn't event orientated, do everything server side first.

---

Edit: Ahh okay

I got this.

Send the value to server

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

});

then your 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
     ?>

---

Edit: Nother Edit

JSON is used for data transfer. While it is possible to query raw JSON,

Is there a query language for JSON?

most time you just reference the object and data you want. So lets say your JSON file looks like

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

in javascript

you could then

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);

});

Which would write:

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

in #search_result_cont

it looks somewhat similar to what you had, which confuses me about the whole question again.

I'm not sure I can reply anymore however, I hope I did help && best of luck to you.