Question

I had to ask this one again, sorry. So I am running this jQuery to slide toggle a span in my PHP loops output. I have some PHP that generates some calls to the db to get more detailed information back for each item.

I know so far I have got it making the call to the PHP script. I can see the packets returning with the HTML echoed from the PHP file. but I’m having difficulty getting jQuery to insert the returned data into the specified span.

This is a simplified version of what the loop items look like:

<span class="searchitem">

 <span style="visibility:hidden;" class="name">some name</span>

 <span class="btn">Details</span>

 <span class="itemdetails" style="display: none;">
   //hidden area to populate with returned ajax html from php script 
 </span>

</span>


<span class="searchitem">

 <span style="visibility:hidden;" class="name">another name</span>

 <span class="btn">Details</span>

 <span class="itemdetails">
   <div>
     <p>
     this is the area i need the html to populate
     </p>
   </div>
</span>

</span>.................

This is the jQuery that I’m trying to run. I know everything works up to success. I can’t get the data from there.

<script type="text/javascript">   
      var ajax_load = "<img src='images/loading.gif' style='width:50px;' alt='loading...' />"; 
      var loadUrl = "ajax/item_details.php";
      $(document).ready(function ()
              {
                    $('.searchitem').each(function () {

                    var itemname = $(this).find('.name').text();
                    var ename = encodeURI(itemname);
                    var requestUrl = loadUrl + ename;
                        $(this).find('.itemdetails').hide();
                        $(this).find('.btn').click(function ()
                        {
                            var returned = "";
                                $.ajax({
                                type: "GET",
                                url: loadUrl,
                                data: "name=" + ename,
                                dataType: "text",
                                error: function () { alert("error") },
                                success: function (data) { $(".ptavail").append(data); alert("successful") }
                                }); 
                    $(this).parent().find('.ptavail').html(ajax_load).slideToggle(1500).html(returned);
                        });
                    });
              });
</script>

As you can see from the code I’m trying to get the click function the set everything off. I know the PHP file is receiving the call and returning the data but I’m stuck trying to get the jQuery to fill the .itemdetails with the returned data.

What is wrong with this? Would I need to put the AJAX into a separate function for it to behave like I need, or do I need to make it synchronous for it to work? I’m trying to basically replace everything between .itemdetails spans with first a loading symbol and then the data returned with AJAX…. As it is now I get error alert so there’s something wrong with the ajax call I know it does the request properly and the PHP returns the results but getting AJAX to read them is proving problematic.

I can see that the content type in the headers is text, so how do I get the AJAX to do the call properly?

Answer 1

Put $(this).parent().find('.itemdetails').html(ajax_load).slideToggle(1500).html(data);

inside the “success” part of the Ajax request.

success: function(data) {
  $(this).parent().find('.itemdetails').html(ajax_load).slideToggle(1500).html(data);
}

The success function is there to say “when the Ajax has worked, do this”