CODEWITHSUNDEEP
javascriptjqueryajax
man data
man data

Reputation: 43

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?

Upvotes: 1

Views: 60

Answers (3)

Marcin Restel
Marcin Restel

Reputation: 280

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>

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

Because you are setting your response to whole div. Fix your html such that 

<div id="responsecontainer"></div> 
<div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</div>

So you are settings your response to responsecontainer and rest remains same.

Upvotes: 1

Vincent Teyssier
Vincent Teyssier

Reputation: 2217

You haven't closed your div in the HTML in the bottom

Upvotes: 0

Related Questions