Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reload entire page with AJAX request and changed GET parameters

I'm trying to reload an entire page with a jQuery AJAX request (supplying a simple GET parameter to the load), roughly in this fashion.

$.ajax({
    url: "site.php?param="+new_param,
    cache: false,
    success: function(content) {
        $("html").html(content);
    }
});

As you can see, this will cascade the <html> blocks and somehow the styling gets broken (background is suddenly white and so on).

Tricks like $(document).html(content); won't work either.

Unfortunately I haven't found any solution to this problem, yet.

like image 855
ruhleder Avatar asked Dec 28 '22 05:12

ruhleder


2 Answers

If you are not reloading head content (loading new javascript or css), and I see no reason why you should do such a thing, you should really try to contain your content loading to content itself, ie. <body>.

$("body").html(content);

Edit

In order to achieve, what I think you are trying to, you could check out https://github.com/defunkt/jquery-pjax

like image 121
Krule Avatar answered Jan 31 '23 10:01

Krule


The problem with loading a full HTML page is that you only get the HTML code but the JavaScript is not interpreted, and the paths to the CSS files get messed up. Imagine if you will: you are inside the index.php file and the CSS files are located in the same directory. Now if you load a different HTML file using AJAX, and output that code inside a div, maybe that file points to the "../css/random_dir/style.css" file. Now that path is not good inside your index.php file, and that's why the styling gets messed up. Your new code would expect to find the "background" inside a css file that is not loaded (and will not be loaded).

like image 39
Andrei G Avatar answered Jan 31 '23 09:01

Andrei G