jQuery calling php script onload

Question

I am trying to use jQuery's ajax to call a php script onload. This script will return xml from a url web service, parse through it, and then display bits and pieces of it into a div tag when the page loads (onload). I'm okay with php when it comes to using forms, but getting php scripts to run onload is not working for me. Could someone please look through my code and give me your advice? Thanks in advance.

HTML:

<!doctype html>
<html>
  <head>

    <title>Word of the Day</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="code.js"></script>

  </head>
<body>

<h3>Word of the Day: </h3>
<div id="word_day"></div>

</body>
</html>

JavaScript:

$(document).ready(function() {

  $(window).load(function() {


    $.ajax({
      post: "GET",
      url: "word_day.php"
    }).done(function() {
      alert(this.responseText);
    }).fail(function() {
      alert(this.responseText);
    });


  });

});

I did not add my PHP code since I was pretty sure that it wasn't the cause of my frustration.

The "done" event was being triggered if I replace "this.responseText" with strings like successful or failure, but entering "this.responseText" produces undefined. — JaPerk14
– JaPerk14, Commented Feb 14, 2013 at 1:10
yes. All of these files exist & are placed within the same folder. — JaPerk14
– JaPerk14, Commented Feb 14, 2013 at 1:12
have you placed a breakpoint in your browser debugger to check what variables are accessible in both the .done and .fail? — Hugo Dozois
– Hugo Dozois, Commented Feb 14, 2013 at 1:14

Lee Taylor · Accepted Answer · 2013-03-01 12:42:26Z

2

You don't need those two handlers, just one:

$(document).ready(function() 
{
    $.ajax(
    {
        post: "GET",
        url: "word_day.php"
    }).done(function() 
    {
        alert(this.responseText);
    }).fail(function() 
    {
        alert(this.responseText);
    });

});

As you had it you were trying to create one handler when the handler fired which was never going to work.

Edit:

Your done/fail part should look like:

}).done(function(data) 
{
    alert(data);
}).fail(function(jqXHR, textStatus, errorThrown) 
{
    alert(textStatus);
});

edited Mar 1, 2013 at 12:42

answered Feb 14, 2013 at 1:11

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JaPerk14 Over a year ago

I tried this, but I'm still getting undefined. I'm guessing that I'm not supposed to be using this.responseText.

JaPerk14 Over a year ago

Awesome! it worked. Could you help me understand why I had to add these parameters to make it work?

Lee Taylor Over a year ago

That's the way jQuery works. It passes the received data to your supplied function if it succeeds (you can call the parameter anything you like). The same goes for fail. It's expecting your function parameters to receive the values it has, you didn't have those and was trying to access them via this.responseText which, as you found, is not valid. Read up on it at api.jquery.com/jQuery.ajax

Collectives™ on Stack Overflow

jQuery calling php script onload

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related