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?
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.
You haven't closed your div in the HTML in the bottom
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>