CODEWITHSUNDEEP
javascriptjqueryajax
TheJason
TheJason

Reputation: 504

Loading a page via Ajax into Div Best Practice?

I'm using the method below to load a remote page into a div I have on the page.

$('#result').load('www.myurl.com/results.html');

I'm curious, is it a bad practice to load an entirely formatted HTML page within another page? My concern is more towards loading css or additional javascript includes that might overwrite other elements on the primary page.

I haven't experienced any issues during my initial tests, I'm just not sure if this is the best practice.

To Clarify: If I have a primary page like so

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="mycss.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <div id="remoteContainer"></div>
       <script>
          $('#remoteContainer').load('www.myurl.com/results.html');
       </script>
    </body>

And results.html code that looks like this:

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="myResults.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <header>        
           <h1>My Results Page</h1>
       </header>
       ...
    </body>

Will the CSS and JS overwrite each other,or will the pages function as 2-separate entities?

Upvotes: 9

Views: 4828

Answers (3)

undefined
undefined

Reputation: 6453

I agree that it 'should' work 'fine'. But consider the extra overhead you are creating that could be eliminated by returning only the content that you need from the server. You might be hitting the database to retrieve data that is rendered in the parts of the page that you are discarding. For example, you might have information about the user displayed at the top of every page. Or you might be looking up other information that goes into your page meta tags in the head. You probably have some type of server side templating going on to create these excess parts of the page. Then you are putting this excess content in a response, sending it over a wire, then asking the browser to parse it, create html elements out of it, then remove the parts that are not wanted for you.

This may not be a big deal. It depends on how much traffic you get, how much extra work the server is doing to render the full page, how much of a load the server is under, and how much time/money/man power you have versus how much it would take to be able to send a trimmed down response instead. If it's a small project, with light traffic, it might not be worth changing. But it's also probably an easy change to make. And since the question is about a best practice, I would say no, loading a full page to render just a portion of the page not a best practice. The best practice is to return just what you need from the server, and to use all of it to update the page. This could be pre-rendered HTML or it could be JSON, but that is another discussion altogether.

A trivial solution in PHP could be as simple as the following, using ?format=ajax in your query string:

<?php
$ajax = $_GET['format'] == 'ajax';

if (!$ajax) {
    render_head_and_stuff();
}

render_results();

if (!$ajax) {
    render_footer_and_stuff();
}

Upvotes: 0

TheJason
TheJason

Reputation: 504

Ok, so maybe I should have just taken a look at DevTools before I asked the question.

After reviewing the Element Inspector, I now see that (at least in Chrome) that the browser strips out the HTML, HEAD, and Body tags. It also removes the additional jquery include. However it does leave the

<script>my js functions here</script>

Although I understand that I can't trust that all browsers will be as efficient, at least now I have seen the light.

Upvotes: 0

Jivings
Jivings

Reputation: 23250

This will work fine and the browser will handle it properly. From the jQuery docs:

... browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

However, it's probably better practice to specify the element in the returned HTML that you want to insert:

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');

Upvotes: 9

Related Questions