Second JSP page is not getting loaded after a AJAX POST request - javascript

I have the below code in page1.jsp.
$.ajax({
type: "post",
url: "page2.jsp",
data: newdata,
success:function(msg){
return msg;
}
})
Even after POST request, the page remains in page1.jsp and doesn't navigate to page2.jsp. I am seeing statusCode as "200 OK" when I did inspect element. How should I pass the control to page2.jsp if the AJAX call is success. If I am missing some code please correct me.

If you want to navigate to the page you made the post to if the post success, you need to navigate in the success function
$.ajax({
type: "post",
url: "page2.jsp",
data: newdata,
success:function(msg) {
window.location = "page2.jsp";
}
})

Related

How do I modify the response url of an ajax function?

I have an ajax function, which on success redirects to the response returned from the url:
document.getElementById("button1").addEventListener("click", function (e) {
e.preventDefault();
$.ajax({
url: 'http://localhost:8080/someLoginUrl',
method: 'GET',
crossDomain : true,
xhrFields: {
withCredentials: false
},
success: function(response){
window.location.href = response;
}
});
});
The response, which is returned by http://localhost:8080/someLoginUrl is just a webpage, containing a url:
This is the html of the response page:
<html><head></head><body>https://localhost:8080/anotherLogin</body></html>
So, once I click my button button1, instead of redirecting to http://localhost:8080/someLoginUrl, it redirects to https://localhost:8080/anotherLogin, which is the desired behavior for me.
However, I want to do a small manipulation on the response inside the success function - I want to change the protocol from https to http. How do I do that?
I tried response = response.replace('https', 'http'); but this did not change anything.
May Be I understand your Question ! You want your success Response data to your Same page where this action took place
First You have to create a dive with id <div id=res_data> </div> and place this div where you want to show your response data .
Then Your Final code is
document.getElementById("button1").addEventListener("click", function (e) {
e.preventDefault();
$.ajax({
url: 'http://localhost:8080/someLoginUrl',
method: 'GET',
crossDomain : true,
xhrFields: {
withCredentials: false
},
success: function(response){
$('#res_data').val(response);
}
});
});
Tuned me if you not find this helpful .

tinymce.init({selector:'textarea'}); not working on POST AJAX

Before POST
Here is my code.
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "insert_comment.php",
data: {p_id:p_id,full_name:full_name,email:email,content:content,img:img},
dataType: "JSON",
success: function(response) {
$("#load_comment").load(" #load_comment");
//put the initial init function here instead
tinymce.init({selector:'textarea'});
}
});
After Post
I actually removed text-area from div refresh, and cleared the content of tinymce
using tinyMCE.activeEditor.setContent('');
success: function(response) {
$("#load_comment").load(" #load_comment");
tinyMCE.activeEditor.setContent('');
}
This is my actual requirement, however the issue is yet not solved on refresh POST.

Submitting a form using jQuery and Ajax changing the action

I have a form, which I am trying to submit using jQuery and AJAX. I am triggering the submit by clicking on a link, which I've added an onclick method. Below are two code samples to submit the same form - the first works, but isn't AJAX, while the second method gives me a 404 error.
function submitmyform(formid) {
$(formid).submit();
}
The second example attempts to use AJAX, given the same parameters:
function submitmyformajax(formid) {
$.post({
type: "POST",
url: $(formid).attr('action'),
data: $(formid).serialize(),
success: function(data) { alert(data); }
});
}
An alternate way I tried with the submitmyformajax is:
function submitmyformajax(formid) {
$.post({
type: "POST",
url: 'somehardcoded/url',
data: $(formid).serialize(),
success: function(data) { alert(data); }
});
}
For some reason, this continues to give me a 404 error, though the action on the form is correct (the URL it shows me is not the same as the action on the form).
I checked the error console, and it shows the 404 error as pointing to somehardcoded/[object%20Object] instead of what I specified in the method.
What am I doing wrong?
I think you are getting $.post and $.ajax mixed up. $.post is short hand for $.ajax, as such takes a string url as first parameter, an object as the data, and a function as the callback. $.ajax on the otherhand takes an object as configuration, as you are doing
i.e. Post signature is
$.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
which is shorthand for
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
You seem to be using a mixture of both, and hence getting strange behavior, as it is calling toString on the first parameter you are passing in to the $.post which is [object Object] and then that is url encoded to [object%20Object]
Either use
$.post($(formid).attr('action'),
$(formid).serialize(),
function(data) { alert(data); })
or
$.ajax({
type: "POST",
url: $(formid).attr('action'),
data: $(formid).serialize(),
success: function(data) { alert(data); }
});
use this instead..
$.post(
'somehardcoded/url',
{data:$(formid).serialize()},
function(data) {
alert(data);
}
);

AJAX is not sending request

I have the following code:
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert(JSON.stringify($(this).serializeArray()));
var url='http://127.0.0.1:1337/receive';
$.ajax({
url: url,
type: 'POST',
contentType:'application/json',
data: JSON.stringify($(this).serializeArray()),
dataType:'json'
});
});
And after I submit the form, I get a JavaScript alert with the json string, so that is made correct (on my server I only log it so it does not matter what it is in it). If I try to send a request to the same link from postman it works, it logs it.
I think I'm doing something wrong in the ajax call, but I am not able to figure out.
Try below piece of code. Add success and error handler for more details
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert(JSON.stringify($(this).serializeArray()));
var url='http://127.0.0.1:1337/receive';
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify($(this).serializeArray()),
dataType:'json',
success : function(response) {
alert("success");
},
error: function (xhr, status, error) {
alert(error);
}
});
});
data:{ list : JSON.stringify($(this).serializeArray())}
From the Jquery docs:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
crossDomain attribute simply force the request to be cross-domain. dataType is jsonp and there is a parameter added to the url.
$.ajax({
url:'http://127.0.0.1:1337/receive',
data:{ apikey: 'secret-key-or-any-other-parameter-in-json-format' },
dataType:'jsonp',
crossDomain: 'true',
success:function (data) {alert(data.first_name);}
});

express.js - dynamic pageloads via ajax

ok i'm that far:
app.get('/mypartial', function (req. res) {
res.render('mypartial', {layout: false, data: data});
});
this renders out my jade with the data and sends it as html to the client
now i need to fetch this via js and to render it out using
$('#idofparentelementofyourpartial').html(responseHTML);
so i would need something like:
//// Pseudocode
var locat = window.location.pathname;
on locat change{
prevent default // because i want to use the ajax call (not standart browser call)
ajax({
url: locat,
type: "GET",
dataType: "json",
success: $('#idofparentelementofyourpartial').html(data);
});
}
the strange thing is that "layout: false" still trys to render something: i would expect that it just puts stuff into the dom
You may have a look at jQuery load() to load partial html into a defined container.
ajax({
url: locat,
type: "GET",
dataType: "json",
success: $('#idofparentelementofyourpartial').html(data);
});
Datatype JSON is not what you want.

Categories