proper use of $.load and $.Ajax

Posted on 2014-02-03
Medium Priority
Last Modified: 2014-02-14
Looking for some feedback on how I am putting together a project.

I have 2 pages.

Page one contains the page design and a div for content. On this page users are making selections in regards to which data sets the want.


$( "#result" ).load( "page2.php", function() {

Open in new window

page2 is where I have the actual ajax call to the JSON data source
  		url: url,
  		async: false,
  		dataType: 'json',
 		success: function (json) {
    		myData = json;

Open in new window

In my tests I have been able to  display the values from the JSON. But I am wondering if there is a better approach to this than $( "#result" ).load

I am not planning to display data in the result div, but rather to pass it to another function that makes various visualizations.

I should mention that page2.php is actually replaced by a variable - the selections the user makes on page 1 determines which page to use to load the data - some items come form a local DB while others from data API's
Question by:lvmllc
  • 2
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 300 total points
ID: 39832233
I am not completely clear on what you are asking.

If you ajax in a page, it is not recommended that the new page has any javascript in it since it will have to be eval'd to execute.

the difference between .load and .ajax is that .load is used to fill a container with html result and .ajax is used to get a more fine-grained process with error handling and header management.

I would never use .load to load JSON and never bother with .ajax for plain html I needed to load into a container

Author Comment

ID: 39833404
OK, sounds like I should not use .load on page 1.
page 1 is my main page, my AJAX loader will need to load data from a second page.  This second page could be one of several that I have. They all return JSON data, but have different functionality. For example one of them makes an AJAX call to two separate services and then combines the data before passing it to page 1.  Another queries an API and retrieves data while another access data stored on my local MySQL server.  Page 1 doesn't care as long as it receives the data.

From what you are saying though I should not have AJAXs call on the second page, but it would seem I need to do this in order to access the various data of interest.
LVL 34

Accepted Solution

Slick812 earned 500 total points
ID: 39833610
hello lvmllc, , the use of user choice responsive browser-server communication in AJAX protocol can be extremely useful in making effective information services in web sites. But make no mistake, AJAX used to good effect, is NOT as simple to do as many code examples would suggest, because it is a browser javascript, ,  AND  a server Data analysis,  ,  , so there are TWO separate Code bases JS and PHP, which you have to do many trial and error testing to get correct output from DATA in a DB, going from browser to server code, and then back to browser in JS and PHP. You can HTML format and or organize your DATA, on the Server, OR after it is sent to the browser, in javascript, , OR BOTH!
You can use the jquey load( ) for fast and easy <div> load, , but it is not at all suited for any thing except simple stuff. I would advise using a richer in options jquery  $.ajax( )  but you should explore some of the options that $.ajax() has, as they can be helpful in complex browser-server data exchanges. Also if there are several many complex exchanges, be sure to set up an ajax error function, because if you try and troubleshoot a duel code operation, it is not as easy as fixing a single code mal-function.
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39834034
Yes, all your jQuery needs to be on the 1st page.
Then when you load the data using JSON you can attach event handlers to the new rendered data and use attributes of the data to call the new stuff

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 20 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question