I have a problem where when a user presses a submit button on the top of the page, another jsp is loaded in the frame/iframe below. I'm using the Spring MVC architecture and the jsp is decided by the controller. How should I make the controller map the jsp to the iframe? For all previous mappings I used #RequestMapping annotations.
I would do this using Javascript, for example with JQuery you can do an ajax call when the onSubmit even is called on your form to load the response (html content) in your iframe:
$('form').submit(function() {
jQuery.ajax({
type : 'POST',
data : jQuery(this).serialize(),
url : '/post_action',
success : function(data, textStatus) {
jQuery('#iframeId').contents().find('body').append('data');
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
});
just use this thing --
$("#iFrameId").attr("src", "controller.mth");
this way the jsp returned from controller will be loaded in the iframe.
With Spring MVC, the ajax url worked after I used request.getContextPath in scriptlet.
My controller receives the request after this change and returns the jsp page. The jsp then display in an iframe after changing the append('data') to append(data) in example. Notice, removed quotes in data to make it work.
function openPage() {
jQuery.ajax({
type : 'POST',
data : jQuery(this).serialize(),
url : '<%=request.getContextPath()%>/post_action',
success : function(data, textStatus) {
jQuery('#iframeId').contents().find('body').append(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
Related
I tried to submit form through Ajax but its not worked but
when i removed spring tag library than its worked fine..
so i want to know why Rest Api is not supports spring tag library
here is the ajax code for submit form
$("#change-password-by-otp").submit(function(event) {
console.log("submitting user reset password form");
event.preventDefault();
var email="${emailFromUser}";
console.log("hey hi--->"+email)
$('.error-message').empty();
$.ajax({
type : $(this).attr('method'),
url : $(this).attr('action'),
data : $(this).serialize(),
success :function(response, headers, HttpStatus) {
if(response.validated){
$('.center-content').html('<h5 class="text-success">password is changed</h5>')
}else{
$.each(response.errorsMap,function(key,value){
$('.error-messages').append('<span class="passworderror">'+value+'</span>'+
'<span class="glyphicon glyphicon-remove-sign" id= "remove-password"></span>');
});
}
},
error : function(error){
console.log("error===>"+error)
}
});
});
});
I need a simple AJAX code to stay in same jsp page after i click submit button.It should not refresh the page. I have researched a lot. But didnt get a simple one.Please help
you can find a simple form submit example in this link
you can add a button <button id='submit-btn'>Submit</button> and make ajax call on click of that as in below code.
$('#submit-btn').on('click', function (e) {
var postData = $('#ajaxform').serializeArray();
var formURL = $('#ajaxform').attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
});
I'm unsure if I'm just thinking of this the wrong way of thinking or I'm just missing something.
I have a search box that does some wildcard searches in a database. I have made this an ajax request so I don't need to reload the page and I can have a little please wait icon while the data loads.
Now as there is pagination so I could do with the url parameters being added to the url, can you do this on a ajax request, ad if so how?
here is a sample code (param1) :
data : $('#form-contactSupplementaire').serialize() + "¶m1=value",
Request full ajax :
$.ajax({
method : "POST",
url : "...",
data : $("...").serialize() + "¶m1=value",
dataType: "",
success : function (json) {
// ...
console.log(json);
}, error: function () {
console.log("Error");
}
});
I'm pushing an ajax post with jquery to e method in the controller which should return a json response but I'm not getting anything, no errors but no response either. Then end goal is broader as you will see from my ajax but for now getting that response back from the controller would be stellar
The jquery ajax method:
$.ajax({
url : "/menu/sort",
type : 'POST',
data : { menu: menu, order: order },
success: function (data) {
holder.html(data);
}
});
The controller action:
return Response::json('ok');
my route:
Route::post('menu/sort', 'MenuController#sort');
I have a Kendo TabStrip with multiple tabs loaded with different partial views.
How do I reload a partial view(Refresh the tab) using jquery.
I am generating the tabs using Html wrapper
You can do this by making an ajax call back to the server/controller and returning the updated view.
Then in the response of your ajax call simply find the Tab's content div by Id using JQuery:
$('#myTabContent).html(view)
So your ajax call will look something like this:
$.ajax(
{
url: "Customer/GetCustomerTabDetails",
data:
{
customer: id, // If you need to pass any data
},
success: function(view)
{
$('#IdOfYourContentTab').html(view);
},
error: function(jqXHR, textStatus, errorThrown)
{
// handle error
}
});