How do I open a “get” php window from jquery without a parent page refresh?

Question

I know the question itself may seem a little vague. Let me elaborate.

I am trying to post data to a php file from a page controlled by jquery.

Here is what I have on the jquery end:

var openURL = "http://derp.com/restr/js/addfood.php?fname=" + encodeURI(food_n) + "&fcals=" + encodeURI(food_c);
window.open(openURL);

The Problem is not that it wont go to the page, the problem is that the parent page reloads once the code is executed. Is there any way to keep this from happening?

Answer 1

You need to look into using jQuery's ajax() methods . They have special functions that will run when data from your PHP script is loaded, without refreshing the page.

The basic idea is to use something like...

$.ajax({
  url: "file_to_load.php",
  data: {},
  success: function(data){
    //it worked!
    alert(data);
  }
});

...using the data object to hold your get or post params.

Answer 2

I believe your only options is to reload the content into the current page. In other words, the entire second page has to replace the original via ajax. Depending on where you want the performance, you could either load the entire second page with "display:none;" off the bat, minus the new content, Then add that in after the ajax. Or pass the "new page," of course minus anything that doesn't change, with ajax and replace accordingly.

I haven't mastered ajax inside and out, so there possibly be another method, but I've sure never heard of one.