Estoy usando ajax para obtener registros usando el siguiente código.
<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>En el código anterior, la página de contenido se carga al hacer clic en el botón (en ), pero cualquier cosa después de esto desaparece. ¿Cómo puedo solucionar este problema?
Porque está configurando su respuesta a todo div. Arregla tu html de tal manera que
<div id="responsecontainer"></div> <div> <br><hr><br> <h2>PCA Plot Distribution:</h2><br> </div> Por lo tanto, está configurando su respuesta al contenedor de responsecontainer y el resto sigue siendo el mismo.
No ha cerrado su div en el HTML en la parte inferior
Solo tienes que cerrar ese div #responsecontainer.
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>