user2789240 user2789240 - 6 months ago 11
Javascript Question

jQuery, Ajax: Unable to replace HTML

There's a button on a webpage. When clicked, it will replace paragraph (

<p>
) with header (
<h1>
).

However, I can't seem to make it worked:

index.html

<head>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jqueryui/jquery-ui.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<section>
<p id="replaceableP1">This text will be replaced </p>
<button id="myButton">Get External Data</button>
</section>
</body>


main.js

$(document).ready(function(){

$("#myButton").click(function(){
$.get("someInfo.html", function (data, status){
if (status === "success"){
$('#replaceableP1').html(data);
} else {
$("#replaceableP1").html("Problem reading data");
}

});
});
});


someInfo.html

<h1>This is external data!</h1>


The error generates on:
$('#replaceableP1').html(data);
in the main.js

If I replace
data
with
"displayText"
, it will replace element index.html and displayText.

If I remove someInfo.html from the directory, the webpage won't even generate error message: Problem reading data.

What's wrong with the code?

EDIT: My bad, I forgot there is
$("#myButton").click(function(){

Answer

There are two things that I see. The first is that you have an extra "});" in your main.js file. The second is that .html will replace the inner HTML of the selected element. If you want to replace the <p> with the <h1>, you would use .replaceWith.

For example,

$(document).ready(function() {

    $.get("someInfo.html", function(data, status) {
        if (status === "success") {
            $('#replaceableP1').replaceWith(data);
        } else {
            $("#replaceableP1").html("Problem reading data");
         }

        });
    });