Question

I don’t know why I am having a hard time with this, but it’s about time I came up for air and asked the question.

What is the best way to call a php file with jquery ajax, have it process some inputs via $_GET, return those results and again use ajax to replace the content of a div?

So far, I can call the php file, and in the success of the jquery ajax call I get an alert of the text.

$.ajax({
        url: "xxx/xxx.php", 
        type: "GET",
        data: data,     
        cache: false,
        success: function (html) {
            alert("HTLM = " + html);
            $('#product-list').html(html);
            }
 });

I set the php function to echo the result, the alert spits out the html from the php file. But I get a side effect. I get the code that the php generated echoed at the top of the page. So php is doing it’s job (by echoing the content). Next jquery is doing it’s job by replacing the div’s content with the values from the php file.

How do I stop the php file from echoing the stuff at the top of the page?

Sample code being echoed from php and alerted in the success of jquery ajax

HTML =

<div class="quarter">
  <div class="thumb">
    <a href="productinfo.php?prod-code=Y-32Z&cat=bw&sub=">
      <img src="products/thumbs/no_thumb.gif" alt="No Image" border="0" />
    </a>
  </div>
  <div class="labels"><span class="new-label">New</span></div>
  <p><span class="prod-name">32OZ YARD</span></p>
  <p><span class="prod-code">Y-32Z</span></p>
</div>

Thanks!!!

-Kris

Answer 1

Are you including your php file that you use for your ajax call at the top of the page? If so you dont need to. That would cause the data to dump at the top.

Ask your question 🙂

EDIT TO ANSWER QUESTION

<div id="product-list">
<?php include 'products.php' ?>
</div>

Your ajax function will now overwrite the php content when it runs and outputs to #product-list