proper use of $.load and $.Ajax

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
Who is Participating?
Slick812Connect With a Mentor Commented:
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.
Michel PlungjanConnect With a Mentor IT ExpertCommented:
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
lvmllcAuthor Commented:
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.
Michel PlungjanIT ExpertCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.