Solution to jQuery.get() returning null on Localhost?

Question

I'm having issues getting jQuery to work correctly while testing on Localhost.

The function that's giving me trouble:

function poll() {
        $.get(location.href, function(data) {
            var x = $('#datadump', data);
            alert(x.html());
        });
    }

Where location.href = http://localhost/polltest.php

The alert merely returns null instead of a random number produced by PHP's rand function. The source of localhost/polltest.php is:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function poll() {
            $.get(location.href, function(data) {
                var x = $('#datadump', data);
                alert(x.html());
            });
        }
    </script>
</head>
<body onload="poll();">
    <div id="datadump">
        <?php
            $val = rand(0, 100);
            echo $val;
        ?>
    </div>
</body>
</html>

Any help regarding a way for this to work would be wonderful and appreciated.

are you trying to add the result of $.get() to <div id="datadump"> </div> ? — mehul9595
– mehul9595, Commented Dec 29, 2011 at 7:09
At this point I'm only trying to get the innerHTML of #datadump (the output of rand(0, 100); in php). — Alex L
– Alex L, Commented Dec 29, 2011 at 7:13

Community · Accepted Answer · 2017-05-23 12:03:39Z

1

There could be multiple ways to achieve the value of the div with id datadump.

One of the ways being

   function poll() {
        $.get(location.href, function(data) {
            x = $(data).filter('#datadump');
            console.log(x);
        });
    }

The reason it is failing for you:

When you have an HTML string which contains <html>, <head>, <body> tags, and you try to do

$(string)

those elements will be ignored. Only those elements which can be put inside a div are valid. Read it in the jQuery documentation.

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.

This issue has been discussed in detail on this link: https://stackoverflow.com/a/5642602/410367

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Dec 29, 2011 at 8:16

Jai Pandya

2,34919 silver badges29 bronze badges

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

2 Comments

Alex L Over a year ago

Thanks! This worked. However, I don't believe your reason for failure is correct, as the method I originally tried does work on sites other than localhost.

Jai Pandya Over a year ago

@AlexL I would like to see it happening elsewhere in that case. I've also added a link to related SO discussion in my reply.

mehul9595 · Accepted Answer · 2011-12-29 08:23:21Z

0

Can you try this way,

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var x = $('#ads');
        alert(x.html());

         $.get(location.href, function (data) {
            var x = $('#ads', data);
            alert(data);
            alert(x.html());
        });
    });
</script>
</head>
<body>
  <div id="datadump">
    <?php
        $val = rand(0, 100);
        echo $val;
    ?>
  </div>
</body>

Update: I have changed the script little bit similar to your original post. It works fine for me.

edited Dec 29, 2011 at 8:23

answered Dec 29, 2011 at 8:00

mehul9595

1,9657 gold badges32 silver badges56 bronze badges

1 Comment

Alex L Over a year ago

That would defeat the purpose of using $.get(), since that only grabs the innerHTML of #datadump that was originally loaded.

Collectives™ on Stack Overflow

Solution to jQuery.get() returning null on Localhost?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related