The following piece of js code is not working only in firefox but works fine in chrome and IE. Can anyone please help.
I am trying to submit two forms with a single click of a button
function abc(url){
var form = document.getElementById("sample");
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("actionCode=2");
var form1 = document.getElementById("sample1");
form1.submit();
}
What's strange is that on placing place a debugger using firebug at line xhr.send() it works, as soon as I remove the debugger from firebug, xhr.send does not execute.
Any suggestions are really appreciated.
Thanks
It is async request, you need to check status of the request
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var form1 = document.getElementById("sample1");
form1.submit();
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("actionCode=2");
or this may help
xhr.open("POST", url, false); - it will make the request synchronous.
Then you will not required to move submit or listen to events
And additional way to submit form data
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
Related
In salesforce, on hitting a button I need to call a web service url through an ajax call.
Please check my code below :
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var response = xmlhttp.responseText;
}
}
var requrl ='my webservice url';
alert(requrl);
xmlhttp.open("POST",requrl);
xmlhttp.send();
When I hit this 'requrl' manually on browser, it works fine.
Can anyone tell me what I am doing wrong above or provide me a sample code against this?
From You Might Not Need jQuery:
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
Have you set the requrl as a remote site (https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_remotesitesetting.htm) ?
I don't know what I'm doing wrong. The following snippet works fine in Chrome but not in Firefox. The odd thing is, if I test in Firefox and add a breakpoint, e.g. at "request.send(params)" and do a "Step Over" everything works fine. But if I perform a "Continue" it also wont work.
Does anybody know, what I'm doing wrong? Thanks
$(document).ready(function(){
var form =$("form#my_form");
var id = form.id;
form.submit(function(event){
event.preventDefault();
myVar.myMethod(document.getElementById('my_input_1').value, document.getElementById('my_input_2').value);
this.submit();
});
});
var myVar = {};
myVar.myMethod = function(par1, par2) {
params = "par1=" + par1 + "&par2=" + par2;
request = new XMLHttpRequest();
request.open("POST", "Destination", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);
};
I'm not sure why it's working in Chrome - could just be a speed thing.
Sounds like your ajax request (being asynchronous) isn't getting sent before this.submit(); You need to write some kind of callback in myVar.myMethod that only processes once the XHR is finished.
A better method might be (since you're using jQuery, but not really utilizing it):
$(document).ready(function(){
var form =$("form#my_form");
var id = form.id;
form.submit(function(event){
event.preventDefault();
$.post({
url: '??', // from form - the url you submitted to
data: {par1: $('#my_input_1').val(), par2: $('#my_input_2').val() }
success: function( data ) {
//handle the returned data
}
})
});
});
Or, if you're trying to submit those two fields in the POST data to your form's url attribute, you should just process the POST data when you get it on the next page - in other words, as long as your inputs are in the form they should be sent to the url with POST.
I removed the this.submit()-Line and now everything works fine. Thanks to David Votrubec's and charlietfl comments, which brings me on the track.
$(document).ready(function(){
var form =$("form#my_form");
var id = form.id;
form.submit(function(event){
event.preventDefault();
myVar.myMethod(document.getElementById('my_input_1').value, document.getElementById('my_input_2').value);
});
});
var myVar = {};
myVar.myMethod = function(par1, par2) {
params = "par1=" + par1 + "&par2=" + par2;
request = new XMLHttpRequest();
request.open("POST", "Destination", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);
};
In order to conserve server resources I'm looking for a way to retrieve the content type of a given url using javascript. It should not download the complete content from the url only the headers. Is this possible with the restrictions javascript has.
Make an Ajax call with a head request.
var url = window.location.href;
var xhttp = new XMLHttpRequest();
xhttp.open('HEAD', url);
xhttp.onreadystatechange = function () {
if (this.readyState == this.DONE) {
console.log(this.status);
console.log(this.getResponseHeader("Content-Type"));
}
};
xhttp.send();
FYI if your server doesn't allow HEAD requests but does allow GET requests, you can do this by limiting the range of the GET request.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("Range", "bytes=0");
xmlhttp.onreadystatechange = function () {
if (this.readyState == this.DONE) {
console.log(this.getResponseHeader("Content-Type"));
}
};
xmlhttp.send();
I have a problem with my javascript function, I notice that the Http Post Request was not arriving at my server.. So I inserted a few alert boxes on my javascript code to see where was the problem..
Here is my javascript function:
function callService(id) {
id.innerHTML = "Clicked!";
alert("Before do XMLHttpRequest!");
var xmlhttp = new XMLHttpRequest();
alert("Before do url!");
var url = "http://this_is_an_address_valid_but_i_wont_show_you/";
alert("Before do open!");
xmlhttp.open("POST", url, true);
alert("Before do setRequestHeader!");
xmlhttp.setRequestHeader("Content-type", "application/json");
alert("Before do onreadystatechange!");
xmlhttp.onreadystatechange = function () { //Call a function when the state changes.
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
alert("Before do parameters!");
var parameters = JSON.stringify({"Values": {"Value": 2500,"ItemNumber": "1"},"PartnerID": "S","ProdCode": "C","TC": "111","OpCode": "10"});
alert("Before do send!");
xmlhttp.send(parameters);
alert("After do send!!");
}
I notice that I don't see the alert box "Before do setRequestHeader!" , so I guess the open method of the XMLHttpRequest is not working?
Thanks alot in advance, can someone help me?
You have a cross domain issue: check this answer: How to make cross domain request.
In a few words, you can't make an AJAX call to a server if the JS file has been obtained from another one (security reasons).
Here is my JavaScript:
var xhr = new XMLHttpRequest();
xhr.open("POST", "pants.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var slot = document.getElementsByTagName("section")[0].innerHTML = xhr.responseText;
}
}
xhr.send("name=Sarah");
I am sending "name=Sarah" to testpage.php via POST, and when I get a response, I'm doing to display it on my page.
And here's pants.php:
echo $_POST['name'];
So I should just be displaying "Sarah" on the page. But instead, I get the error ": Undefined index: name". I can't seem to understand why this is...
You should add the following:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
This header is mandatory for POST requests