loading php page only when the div containing him becomes visible

Question

i make some sort of a shopping cart that when i press on a table line it suppose to open some details about the item, for this purpose i used a div which is at height 0 and hidden at first which contains the details, the problem is that i think that the browser will load the the info pages regardless of if the line was pressed or not. is there any way to make the browser load the page only when his DIV is visible?

    $int = 0;
            echo "<table class=\"result_table\" id=\"result_table\">";
    foreach($types as $data){
        echo "<tr onClick=\"present(".$int.");\" >";
        echo "<td align=\"right\">";
        echo $data['number'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['item_name'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['amount'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo "17";
        echo "</td></tr>";
        echo "<tr class=\"info_row\"><td colspan=\"4\"><div      id=\"div_num_".$int."\" style=\"height:0px\">
            <object type=\"text/html\" data=\"page.php\"            style=\"width:100%; height:100%; margin:0%;\">
            </div></td></tr>";
        $int++;
    }
    echo "</form></table>";

the css for the row

.info_row{
    visibility:hidden;
}

the JS:

function present(item_id){  
    var div = document.getElementById("div_num_"+item_id);

    if(div.style.visibility=="visible"){
        div.style.visibility = 'hidden';
        div.style.height= '0';
    } else {
        div.style.visibility = 'visible';
        div.style.height= "200px";      
    }
}

as you can see all the info loads with the page but are invisible. other good ways of tackling this problem will be appritiated especially if it does not include jquery because i am not really strong in it.

thanks in advance.

Answer 1

Firstly, if there isn't much info to load, preloading the data is probably more sensible anyway. Users want a responsive UI, even if it means a few extra milliseconds of initial download time for data they'll never see.

But, if you insist on loading the data separately, you could use an xmlhttprequest to load a representation of the data (such as in JSON), and use a templating solution to output the result into the info div.

The page that might generate the JSON representation of the data might look something like this:

<?php
    $result = array();


    // ... Code that defines type ... //



    $int = 0;
    foreach($types as $data){

        $result[] = array(
            "int"       => $int,
            "number"    => $data["number"],
            "item_name" => $data["item_name"],
            "amount"    => $data["amount"]
        );

        $int++;
    }

    echo json_encode($result);
?>

So, when a user clicks a link, the above page would load in an xmlhttprequest . You could then parse the result with JSON.parse(req.responseText) , and apply an HTML template to the result (check out the above link, plus this one , for more info on how to do that).

Again, you're probably fine just loading all the data in one go. Extra HTTP headers actually make pages take longer to completely load.

Answer 2

You can use an ajax call:

with javascript

<script type="text/javascript">
function loadInfoRow()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     var responseText = xmlhttp.responseText;
     //Use the response text to add the extra row
   }
}
xmlhttp.open("GET","info.txt",true);
xmlhttp.send();
}
</script>

with jquery

$.ajax({
  url: "info.txt",
  context: document.body,
  success: function(text){
    //where text will be the text returned by the ajax call
    $(".result_table).append(text);
  }
});