I have an form and, when I submit it, I want to remain on the same page. I just want to treat the informations sent to the server and remain on the same page.
For this I have the form:
<form action='adicionaLoja' method='post'>
<input type='text' autocomplete='off' name='nome'/>
<button type='submit' id='saveStore' class='btn' value='Save'>Save</button>
<input type=hidden name='xValue'/><input type=hidden name='yValue'/></form>
And here's where I'm treating the data:
@RequestMapping("adicionaLoja")
public void adiciona(Loja loja) {
System.out.println("adicionou - " + loja.getNome() + " X: " + loja.getxValue() + " Y: " + loja.getyValue());
}
With this code, when I hit the submit button, the server tries to redirect to adicionaLoja.jsp. But I do not have this file created, I just want to hit submit button and stays on the same page. I've tried to return the name of the page where the form is created, but this way the page is reloaded, I also don't wanna to reload it, just wanna to send the request to the server.
How can I do it?
EDIT: My java script file:
var form = $('#submitLoja');
form.find('submit:first').click( function() {
$.ajax( {
type: "POST",
url: "adicionaLoja",
data: form.serialize(),
success: function( response ) {
console.log( response );
}
} );
} );
My form (Note that this form is declared in the same .js file I've declared the submit click event):
<form action='adicionaLoja' id='submitLoja' method='post'><input type='text' autocomplete='off' name='nome'/>
<button type='submit' id='saveStore' class='btn' value='Save'>Save</button>
<input type=hidden name='xValue'/><input type=hidden name='yValue'/></form>
Here's the server side:
@RequestMapping("adicionaLoja")
@ResponseBody
public void adiciona(Loja loja) {
System.out.println("adicionou - " + loja.getNome() + " X: " + loja.getxValue() + " Y: " + loja.getyValue());
}
Complete JavaScript file:
$(document).ready(function(){
$('.ImgMapa').popover({
html: true,
trigger: 'manual',
title: "<form id='submitLoja' method='post'><input type='text' autocomplete='off' data-provide='typeahead' data-items='4' name='nome' data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'/>"
+ "<button type='submit' id='saveStore' class='btn' value='Save'>Save</button><input type=hidden name='xValue'/><input type=hidden name='yValue'/></form>"
});
$("#submitLoja").submit(function(event) {
alert("oie");
return false;
});
});
// Function to show popover on the image mouse click
$(function() {
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
// Manages the page scrolling and add X and Y when the page is scrolled
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
xMousePos -= lastScrolledLeft;
lastScrolledLeft = $(document).scrollLeft();
xMousePos += lastScrolledLeft;
}
if (lastScrolledTop != $(document).scrollTop()) {
yMousePos -= lastScrolledTop;
lastScrolledTop = $(document).scrollTop();
yMousePos += lastScrolledTop;
}
});
function captureMousePosition(event) {
xMousePos = event.pageX;
yMousePos = event.pageY;
}
$('.ImgMapa').click(function(e) {
$(this).popover('show');//this is used to correct the popover location on the first time click
captureMousePosition(e);
var offset = $(this).offset();
var left = xMousePos;
var top = yMousePos;
var theHeight = $('.popover').height();
//http://jsfiddle.net/2EBGE/1/
$('.popover').css('cssText', 'left: ' + (left+10) + 'px !important; top: ' + (top-(theHeight/2)-10) + 'px !important');
$(this).popover('show');
$("input[name='xValue']").val(xMousePos);
$("input[name='yValue']").val(yMousePos);
});
// Hide popover when ESCAPE key is pressed
$(document).keydown(function(e) {
if (e.keyCode === 27)
$('.ImgMapa').popover('hide');
});
});
