I've got an form which posts a form trough an ajax script to some PHP code. Strangely enough everything is working in Safari, but once i try it in either Firefox or Chrome the ajax call handles everything as an error, though the console doesn't show any errors.
$('#newClearance').on("submit", function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
method: 'POST',
url: 'modules/avas/library/avas_functions.php?action=newClearance',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function (data, status) {
$('#formModal').modal('hide');
$.notify(data, {type: 'success'});
$.get(window.location)
.done(function (r) {
var newDom = $(r);
$('#clearanceList').replaceWith($('#clearanceList', newDom));
});
},
error: function (data,status,error) {
$.notify(error, {type: 'danger'});
}
});
});
If I post the html form directly to the PHP script, everything goes well and the PHP script returns a success. It works in all browsers.
I really can't find the clue, especially as the same script, except for another form, is working perfectly fine in all browsers. Anybody a clue?
Additional info
Good thing to note might be that the form and jquery are placed in a modal, as you might notice form the code.
What do your server logs say when it receives the request?
Part of the solution appears to be the "submit" button of the form, which was required by the PHP script to run. I've removed this condition in the PHP script, but still wondering why firefox/chrome doesn't POST the submit button and safari does.
Related
Trying to send form data to a PHP page, all parameters are sending successfully except data:imagesBase64
this imagesBase64 is an array which I am trying to send, a few hours ago everything was fine but now it is not working I really don't know why.
All values are Posting successfully only this value is not posting also I am not able to see error in console because it redirected to URL where I am posting the data
var imagesBase64 = ['abcdfd','dhydsu333ud','djhbsd'];
$(function () {
var frm = $("#saveform");
frm.submit(function (ev) {
$.ajax({
type: frm.attr("method"),
url: frm.attr("action"),
data: {
data: imagesBase64,
PubId: $("#Publications").val(),
sdate: $("#datepicker").val(),
pnumber: $("#pnumber").val()
},
cache: false,
error: function (err, data) {
console.log("There was an error. Try again please!" + data, err);
},
success: function (data) {
alert("New message received");
},
});
ev.preventDefault();
});
});
In PHP page -
print_r($_POST['data']);
it gives an error undefined data, though when I tried with postman everything is working fine.
also I am not able to see error in console because it redirected to URL where I am posting the data
That's the problem.
You are submitting data to the server using a regular form submission and not with Ajax. Since your Ajax code isn't used, the data added in from outside the form isn't included.
This is usually caused by the regular form submission interrupting the Ajax request, but since you have ev.preventDefault(); that shouldn't be the case here.
Possible reasons that might apply are:
var frm = $("#saveform") fails to find the form because the selector is wrong or the form is added after the document is loaded with other JS
You don't have jQuery loaded so the call to $ fails
You have jQuery Slim loaded which doesn't include an ajax method (moving the call to preventDefault so it is before the call to ajax would help catch this).
Your browser's developer tools should have an called something like "Persist Logs" which will prevent it from clearing the console when you navigate to a new page. Turn it on to aid your debugging. Here's what it looks like in Firefox:
I am having an issue with saving a form. The form itself has about 40 rows with around 12 inputs for each row in this style:
On save, it should POST and then close the window. However, it never truly saves it. This makes me think that it is closing the window before it saves. Here's the code in question:
$('#save-btn').click(function() {
document.form.submit();
window.close();
};
If I remove the window.close() and use the inspector than I see in the parameters field that all the values save correctly. This is again what lead me to think that the window is closing to early.
I have tried using the following in the above #save-btn function:
setTimeout('window.close()',5000)
Yet this never seemed to execute the window.close() after the 5 seconds and all around seems like bad programming to force it to wait 5 seconds and then close when it could take any amount of time.
I then attempted to use an AJAX request like:
var _url = 'submit?nameParam="+nameParam+"&com=editlist&'+$('form').serialize();
console.log(_url); //just to see what its pushing out
$.ajax({
url: _url,
error: function(){
alert('Error submitting form.');
},
success: function() {
window.close();
}
});
This resulted in 414 Request-URI Too Long. I know the case for this is it should be a POST to begin with, but I was just trying to make it work.
Just because, this is how our form is set up:
<form name="form" action="submit" method="post">
Our solution was to close the page from our action page
Remove the serialized data from your _url and instead pass it through the .ajax() request with the data setting:
var _url = 'submit?nameParam="+nameParam+"&com=editlist';
$.ajax({
url: _url,
method: "POST",
data: $('form').serialize(),
error: function() {
alert('Error submitting form.');
},
success: function() {
window.close();
}
});
Your ajax approach is correct because you can understand that form submit done correctly with code, on success post it is easy to close the window.
For sending a POST request, you have to make some small changes in your code...
Don't serialize your form and add URL, it is not safe (not working for your situation).
Post your values as "post data".
Here is documentation about it.
https://api.jquery.com/jquery.post/
Please try and update your question if you cannot understand how.
I have html/kendo ui mobile as follows:
<li><a data-action="initContactView" data-click="initContactView">Contacts</a></li>
then javascript:
function initContactView() {
alert('before');
var txtSearch = document.getElementById('searchTextField');
$.ajax({
type: "GET",
data: = "txtSearch='" + txtSearch +"'",
contentType: "application/json; charset=utf-8",
url: "http://xot-wsdl.compx.net/mobile.asmx/ContactGet",
dataType: "json",
success: successContact,
});
alert('after');
}
the function successContact is just putting it all in list view.
My problem is when I take out all the code in JavaScript function the alert works fine, as soon as I put all the other code back, nothing happens when I trigger the button.
What the JavaScript code should do is to connect to my web service and retrieve data.
Any help?
You have a syntax problem on "data: ="
I see you use jQuery, why don't use $("#searchTextField") for
find the field?
txtSearch with getElementById will return a DOM element, non the
value of the field, use this istead:
var txtSearch = $("#searchTextField").val();
EDIT: For debugging you can use FireBug with Mozilla or any other developers tools available in al major browsers.
EDIT 2: In the ajax URL i see a complete URL, please be sure that the url is in the same domain of your web server or you will get a permission denied error.
If you are using Google Chrome you can press Ctrl+Shift+I - Also firefox. Then you can debug your javascript errors by looking for the erros in debug.
I am working on an instant search thing and when I submit the form search-form it is going to make an ajax post to PHP. It sends and everything but then the PHP page says that the variable has no value but the data is clearly being posted.
$('#search-form').submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "Search.php",
cache: false,
data: $("#search-form").serialize(),
success: function(data) {
alert($("#search-form").serialize());
$("#searched").fadeIn("fast");
$("#results").empty();
$("#results").append(data);
}
});
return false;
});
Make sure you have a console opened up in your browser, Firefox: bugzilla, Chrome and IE have a built-in. It shows you what is happening in asynchronous requests.
in your php file at the top do this:
var_dump($_POST);
//OR DO THIS:
// print_r($_POST);
Then look at your browser console to see what the response is. It should spit out an array. and you can see what the name of your data is. This is the quickest way to debug any ajax request.
Also, don't forget that you serialized the data with .serialize();
I'm using a callback from an AJAX post request to navigate to a new page, but it is not working on Internet Explorer. My code is as follows:
$.ajax({
type: "POST",
url: phpUrl,
data: data,
async: false,
success: function() {
if (navigator.appName == 'Microsoft Internet Explorer'){ window.location.href("/step2.php")}
else{ window.location.href = "/step2.php"}
},
dataType:'json'
});
This works fine on FF/Safari/Chrome but when I test it on IE it does not work. Is there a better way of redirecting to a new page? I'm using async:false as my data was not loading on Chrome/Safari if I did not use a callback as the page would just change before the POST request was complete.
It's the parentheses. href is not a function, so trying to invoke it—window.location.href("/step2.php")—is a TypeError.
Assign to href like you do on the next line, or better, use location.assign():
location.assign('/step2.php');
While you can directly assign to location's properties (location.href='...';) to cause the browser to navigate, I recommend against this.
Internally, doing so is just calling location.assign() anyway, and assigning to properties does not always behave the same in all browsers.
Regarding, async:false, never do that. If you make a synchronous XHR request, you're doing it wrong. 8.4% of reported IE9 hangs were due to synchronous XHR blocking the browser.
Given that you have it in a callback, the assignment to location won't happen until the POST completes, so I'm not sure what you mean by "the page would change before the POST completes." (Did you forget to cancel a form's submit?)
window.location.href = "/step2.php" is just fine.
IE only like full url.
var fullURL = 'http://www.your_site.com/step2.php';
$.ajax({
type: "POST",
url: phpUrl,
data: data,
async: false,
success: function() {
window.location.href(fullURL);
},
dataType:'json'
});