Geek asks and answers

Render div using javascript

I have a page with loading tables that are created using SQL queries. Obviously, all of them together take time to load, each table ( <div>)"minimized" by default (I use javascript to hide it until the button is clicked). But these tables are still displayed in the background. is a way to block the entire contents of a div until it is called in. I tried using the php if loop that worked, but the page needed to be updated, so he gave it.

Any ideas please? I've been looking for ages.

+3
source share
4 answers

I did this using $ .ajax and load ()

<html>
<body>

<div id="load-div" class="functions">
<span>Load</span>
<input type="submit" value="Go" id="load_basic" />
</div>

<div id="result"  class="functions">

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";

//  load() functions
    var loadUrl = "page1.html";
    $("#load_basic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });


</script>
</body>
</html>
0
source

. , , . , AJAX, , div .

+1

jQuery load.

:

$(document).ready(function() {
    $(".data").each(function(index) {
        var tableName = this.id;
        window.setTimeout(function() {
            LoadData(tableName);
        }, index * 1500);
    });
});

function LoadData(tableName) {
    var url = "load.php?table=" + tableName;
    var oDiv = $("#" + tableName);
    oDiv.html(url + " - To load real data, have here such code: <b>oDiv.load(url);</b><br />Good luck! :)");
}

HTML:

<div class="data" id="cats_table"></div>
<div class="data" id="dogs_table"></div>
<div class="data" id="flowers_table"></div>

: http://jsfiddle.net/4H8Fa/

+1

, , AJAX. JQuery:

http://www.datatables.net/

UPDATE ( OP):

Since you have your own solution, there will be no β€œrecipe” that will work exactly as you wrote. Generally, you should look at the callback to your server using AJAX with a library like getJSON . Then populate the table by creating DOM DOM objects and binding them to your table object.

0
source

More articles:


All Articles