jQuery, Ajax: Unable to replace HTML

Question

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(){

Well, for starters you've got one too many closing braces/brackets. Remove the last }); and see if it works better. — AM Douglas
– AM Douglas, Commented May 9, 2016 at 15:21
Well there is no click event, so not sure how the button replaces content. — epascarello
– epascarello, Commented May 9, 2016 at 15:26
The AJAX request is executed as soon as the page is loaded i.e. $(document).ready. This works: jsbin.com/gucawus — AM Douglas
– AM Douglas, Commented May 9, 2016 at 15:27
@user2789240 could you check on network tab what returns from the call "/someInfo.html", and what error did you get on main.js? could you paste it? — cralfaro
– cralfaro, Commented May 9, 2016 at 15:29

WonderGrub · Accepted Answer · 2016-05-09 15:27:03Z

3

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");
         }

        });
    });

answered May 9, 2016 at 15:27

WonderGrub

3961 silver badge10 bronze badges

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

3 Comments

user2789240 Over a year ago

Still error: Type error: context is null Then it points to jquery.js, as well as the line with $('#replaceableP1').replaceWith(data);

WonderGrub Over a year ago

Hmmm. There may be other code causing an issue. Here is a Plunker link with the working code... plnkr.co/edit/pgdwZM4t8LnDSkAjoGa4?p=preview

user2789240 Over a year ago

I agree with you. I think something else in my code is wrong. Anyway, thanks for answering my question :) I will try to re-create the whole page again, to see if I can find out what's wrong.

Anand Chandwani · Accepted Answer · 2016-05-09 15:50:47Z

0

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

          });
     });
  });

try this and check if js files are loaded or not.

answered May 9, 2016 at 15:50

Anand Chandwani

1247 bronze badges

Collectives™ on Stack Overflow

jQuery, Ajax: Unable to replace HTML

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related