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.
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
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With