Solved

proper use of $.load and $.Ajax

Posted on 2014-02-03
4
391 Views
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.

page1:      

$( "#result" ).load( "page2.php", function() {
console.log(myData[1][1]);
});

Open in new window



page2 is where I have the actual ajax call to the JSON data source
	$.ajax({
  		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
0
Comment
Question by:lvmllc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 75 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
0
 

Author Comment

by:lvmllc
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.
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 125 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.
0
 
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
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)

695 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