get request with Jquery

Question

I want to perform a simple get request using Jquery and replace the current display HTML with the result. If I use $.get('some static page'), I get the HTML content as a parameter to the callback function, but then how can I replace the whole HTML with the result, in a way that the browser will keep asking the server for the css and js files that are include in the HTML?

$.get('list.html',function(data) {
    //what should be here?
});

Or maybe is there a simpler way for doing it?

Answer 1

You can do it using .load() instead like this

$('html').load('list.html')

FIDDLE

Doing this won't change the url though - if you want to change the url you can redirect them instead

window.location = "list.html";

Answer 2

When you need to replace all HTML, why not use classic a href link?

Simpler ways:

1. Create global minified css file - its better with page loads
2. Leave in list.html only content with javascript files at the end of file
3. ajax load the list.html and change only content

Like this:

$.get('list.html',function(data) {
    $('#content').html(data);
});

I your main file has to be <div id="content">...some content...</div> Javascripts in list.html will be loaded and executed, but Its good practice to execute them after DOM is ready.

There are many simpler and "best practices" ways how to use AJAX calls, then change whole HTML page.

Answer 3

You can "put" HTML callback in your HTML page with

$.get('list.html',function(data) {

   YOUR_OBJECT_ELEMENT.html(data);
});

See official documentation: enter link description here. If you want to get JavaScript and CSS loaded from HTML file you need parse it.