content gets hidden while using ajax

I am using ajax for fetching records using following code.

<html>
<head>
<script>
$(function() {
    $('.go-btn').on('click', function() {
        var selected = $('#my-dropdown option:selected');
            $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "boxplot.html",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
            //alert(response);
        }

    });
        //alert(selected.val()); 
    });
});
</script>
</head>
<body>

some text
<button class="go-btn" type="submit">Go</button> 
<div id="responsecontainer">
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</body>
</html>

In the above code, content page gets loaded on clicking button (at ) but anything after this gets disappeared. How can i fix this issue?

Answers 1

  • You just have to close that #responsecontainer div.

    var response = "my Response";
    $("#goButton").on("click", function(){
      $("#responsecontainer").html(response);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>
    <body>
    
    some text
    <button class="go-btn" type="submit" id="goButton">Go</button> 
    <div id="responsecontainer"></div>
    <br><hr><br>
    <h2>PCA Plot Distribution:</h2><br>
    </body>
    </html>


Related Articles