CODEWITHSUNDEEP
phpjavascripthtml
joedborg
joedborg

Reputation: 18353

Render DIV using javascript

I have a page with a load of tables on that are created using SQL lookups. Obviously, all of these together take time to load, each table (<div>) is "minimised" as default (I use javascript to hide it until a button is clicked). But these tables are still rendered in the background. What I really want is a way to block all of the div's content until called. I tried using a php if loop, which worked, but the page needed refreshing, so gave that one up.

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

Upvotes: 3

Views: 2714

Answers (4)

joedborg
joedborg

Reputation: 18353

I did it 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>

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66388

I would go with the jQuery load method.

Basic example:

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

This comes with such HTML:

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

Live test case: http://jsfiddle.net/4H8Fa/

Upvotes: 1

AJ.
AJ.

Reputation: 28184

As the comment above says, it sounds like what you're looking for requires AJAX. Have a look at this Jquery library:

http://www.datatables.net/

UPDATE (based on comment from OP):

Since you have a custom solution, there isn't going to be a "recipe" that will work exactly with what you wrote. Generally, you should be looking at making a call back to your server using AJAX with a library like getJSON. Then populate your table by building TR/TD DOM objects and attaching them to your table object.

Upvotes: 0

Limey
Limey

Reputation: 2772

I agree with Andre. If your page is always loading these tables, it will always take forever to build your whole page, there is no way that hiding the tables will increase your processing time. What you need to do is use an AJAX request that returns your table when needed, and then populate your div on the return.

Upvotes: 1

Related Questions