I am a total novice and i don't know how to make this.
What I want:
When I click submit on my page's form, it will go to the servlet and load the data in the database. Then as a confirmation of load, it show a success modal. I want to achieve something in which the servlet does not redirect. That is, it stays on the same page and show a "Data lodaded successfully" modal that pops up.
I am using response.sendRedirect to redirect to another page in my servlet
but I don't want to redirect, I want to stay in the same page with a pop up appearing in the form page.
I am a total novice and i don't know how to make this.
What I want:
When I click submit on my page's form, it will go to the servlet and load the data in the database. Then as a confirmation of load, it show a success modal. I want to achieve something in which the servlet does not redirect. That is, it stays on the same page and show a "Data lodaded successfully" modal that pops up.
I am using response.sendRedirect to redirect to another page in my servlet
but I don't want to redirect, I want to stay in the same page with a pop up appearing in the form page.
- why dont you redirect to SELF, and return a bit value saying that it needs to load a pop up a alert box at the ui side. on load of the page check for this bit and call the pop up window in jquery. REF:api.jqueryui./dialog – dreamweiver Commented Feb 17, 2014 at 7:36
2 Answers
Reset to default 1Use Bootstrap Modal
Basically you can use a button with data-toggle="modal" data-target="#myModal" or call directly via JS:
$('#myModal').modal('show');
Test it here.
You can achieve that very easily by using jquery-ui.
You can add jquery-ui in 2 ways:
1) Put this links inside your <head> tags
<link rel="stylesheet" href="//code.jquery./ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery./jquery-1.9.1.js"></script>
<script src="//code.jquery./ui/1.10.4/jquery-ui.js"></script>
OR
2) Download the files and add them to your website (same as above but files will be on your domain). Remended
You create an empty div anywhere inside you <body> tags:
<div id="modal_popup">
</div>
You then add the following code.
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$( "#modal_popup" ).dialog({
autoOpen: false,
height: 140,
modal: true,
title: "The title of your modal popup",
open: function(){
$( "#modal_popup" ).append("The text that you want in the modal.");
}
});
});
$( "#submit_id" ).click(function(){ $( "#modal_popup" ).dialog('open'); });
});
</script>
EDIT
<script type="text/javascript">
function pop_up_modal() {
$( "#modal_popup" ).dialog({
height: 140,
modal: true,
title: "The title of your modal popup",
open: function(){
$( "#modal_popup" ).append("The text that you want in the modal.");
}
});
};
</script>
You can then call pop_up_modal() anywhere on your servlet.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745461158a4628714.html
评论列表（0条）