Render DIV using javascript

Question

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.

Limey · Accepted Answer · 2011-05-02 13:12:49Z

1

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.

answered May 2, 2011 at 13:12

Limey

2,7946 gold badges38 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joedborg Over a year ago

Yep, that's exactly the kind of thing I want. Could you give me an example of the code or a URL to the code as I'm still only finding hide/show AJAX scripts as well. Thanks

user447356 · Accepted Answer · 2011-05-02 15:01:46Z

1

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/

answered May 2, 2011 at 15:01

user447356

4 Comments

joedborg Over a year ago

That looks like what I want, however, where do I put the jquery code? I know the function for js goes in the header with the <script> tags, I've tried the jquery code where I want the table to appear, but it doesn't do anything, or throw any js errors.

user447356 Over a year ago

Assuming you include jQuery correctly, just put it within <script type="text/javascript"> and </script> tags anywhere in the page.

joedborg Over a year ago

I'm doing this: <script type="text/javascript" src="<?=$web_root?>includes/js/jquery.js"></script> <script type="text/javascript"> $(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! :)"); } </script>

user447356 Over a year ago

@jdborg looks OK, please post your HTML.

AJ. · Accepted Answer · 2011-05-02 13:36:22Z

0

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.

edited May 2, 2011 at 13:36

answered May 2, 2011 at 13:12

AJ.

28.3k19 gold badges89 silver badges98 bronze badges

4 Comments

joedborg Over a year ago

I am looking for AJAX, but not for AJAX to actually build the table (I've already written that in HTML/PHP). It just needs to be blocked from populating until I call it.

AJ. Over a year ago

@jdborg - how much time did you invest in your own solution? does it come with all of the features that datatables plugin comes with? check my revised answer...some general thoughts on how to integrate with your custom solution.

joedborg Over a year ago

No, my table is very basic HTML, with some more complex php that sort the results arrays into meaningful data, which is why it's more suitable than the DataTables. This table shouldn't be dynamic, it only has a few fields, but due the the nature of the data, it wouldn't be useful if manipulated buy the user.

Limey Over a year ago

the AJAX method would be to have your static tables in server side files and then just have the AJAX call return your table and populate your div. that way you don't have to build logic around reading json data and building the table.

joedborg · Accepted Answer · 2011-05-03 09:35:11Z

0

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>

answered May 3, 2011 at 9:35

joedborg

18.5k33 gold badges88 silver badges122 bronze badges

Collectives™ on Stack Overflow

Render DIV using javascript

4 Answers 4

1 Comment

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related