jQuery/AJAX - How to load multiple divs and page title?

Question

I tried this code (it works but when we click 3-4 times, my browser frezzes, maybe due to huge variables):

var elements = [ "content", "menu" ];
$.get(
    url,
    function(data)
    {
        // Elements
        var resp = $("<div></div>").html(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v);
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

Tested on Firefox 6.0, Chrome, and Safari 5...

I think I may use the .load() function, but I can't load multiple divs with only one load...

And the following code isn't working:

var resp = $("<div></div>").load(url+" #content, #menu");
var content = resp.find("#content");
$("#content").html(content);
var menu = resp.find("#menu");
$("#menu").html(menu);

Thank you for your help!

score 0 · Answer 1 · answered Sep 13 '11 at 19:23

0

turn the cache on

$.ajaxSetup({
  cache: true,
});

rest of the code as it is

var elements = [ "content", "menu" ];
$.get(
    url,
    function(data)
    {
        // Elements
        var resp = $("<div></div>").html(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v);
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

answered Sep 13 '11 at 19:23

Rafay

30,950
5
68
101

Hello 3nigma, sorry but it doesn't change anything... It's not a cache problem, I think it's the length of the "data" variable, but I'm not sure. – Yoone Sep 13 '11 at 19:55
can you test it with `global:false` in the `ajaxSetup` maybe that will make a difference... `$.get` and `load` are roughly similar according to the docs... – Rafay Sep 13 '11 at 20:06
Erf :/ global:false doesn't change anything :/. But the problem is that my browser is getting laggy when I $.get() a page. It's not my PC's fault, I have a good one :) – Yoone Sep 13 '11 at 20:22

Yoone · Accepted Answer · 2012-05-07T00:33:18.527

I found a clue to resolve my problem...

By adding a 'time()' (PHP function) in the #menu div, I noticed that sometimes, jQuery loads the page several times without any reason : this is why my browser is laggy during loadings...

Does someone have any idea about how to fix this problem?

Thank you.

EDIT : I think I fixed my problem! I don't lock this question until I'm sure about that :)

The problem was the use of multiple IDs like :

<div id="content">
    <div id="content">
    </div>
</div>

When I loaded my content. So now, the code is :

$.get(
    url,
    function(data)
    {
        // Elements
        //var resp = $("<div></div>").html(data); <-- EDIT
            var resp = $(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v).html(); // HERE IS THE CHANGE, I ADDED .html()
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

jQuery/AJAX - How to load multiple divs and page title?

2 Answers2