Question

So I noticed on jQuery when they are replace .html() not even their examples are working correctly. I was trying to help a user with a AJAX question and suddenly AJAX is not behaving on my test pages nor his example. In fact it doesn't add the response to #feedback whether set through $('#feedback').load() or using a function to append the data! However if you alert the data, sure enough, you have the entire page (also another issue as we should be grabbing only the body!)

What is going on with jQuery??

Trigger Page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(function () {
                $('#button').click(function () {
                    $('#feedback').load('test.htm #body', function(data){
                        alert(data);
                        $('#feedback').html(data); // Append again... y u no work!?

                    });
                });
            });
        </script>
    </head>

    <body>
        <input id="button" type="submit" value="Go" />
        <div id="feedback">Welcome</div>
    </body>

</html>

Test Page test.htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
  <body id="body">
        Welcome again <label id="var_name" name="callBack_data" />
  </body>
</html>

The result for this action will alert() the entire page rather then just the body. It also will not append the data to the div.

By changing the buttons type to type="button" we are able to load some data to the div, however no the right selection.

Updated Code that Works n' Stuff

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(function () {
                $('#button').click(function () {
                    $('#feedback').load('test.htm #body');
                });
            });
        </script>
    </head>

    <body>
        <input id="button" type="button" value="Go" />
        <div id="feedback">Welcome</div>
    </body>

</html>

Test Page Update

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
  <body>
        <div id="body">
            Welcome again <label id="var_name" name="callBack_data" />
        </div>
  </body>
</html>
Était-ce utile?

La solution

.load already does the .html portion, you don't need to do that yourself.

$('#feedback').load('test.htm #body');

Additionally, <body> is removed when you do $("<div>").html("<body></body>"), therefore targeting it by id isn't going to work. Wrap your text in a div with the id="body"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
  <body>
    <div id="body">
        Welcome again <label id="var_name" name="callBack_data" />
    </div>
  </body>
</html>

This will result in 

<div id="feedback">
    Welcome again <label id="var_name" name="callBack_data" />
</div>

which will display as:

Welcome again

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top