I posting my value through ajax and using the response the details will be displayed.I am getting the problem while retreiving the data.But i dono where i have mistaked,then this is the error getiing displayed frequently
"There was a problem while using XMLHTTP:\n";
in all browsers mainly in the chrome,could any one help me...
this is my code,
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6+
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// Internet Eplorer 5
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX. Download a newer browser to view this page.");
return false;
}
}
}
// insert server response into HTML element
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
MM_check_session(xmlHttp.responseText);
var b_gc = document.getElementById(insert).value;
document.getElementById(insert).value = xmlHttp.responseText;
var shippingid = getCheckedValue('checkout_form', 'shippingid');
closeMessage();
MM_calc_shipping(shippingid);
if (b_gc == xmlHttp.responseText) {
MM_register();
} else {
error = 1;
document.getElementById('payment_error').innerHTML = xmlHttp.responseText;
document.getElementById(insert).value = '';
}
} else {
closeMessage();
alert("We can't process your request.Please refresh(reload) the page to proceed further:\n"
+ xmlHttp.statusText);
}
}
}
displayStaticMessage(
'<img src=' + config_MM_loader_image_path + ' alt=\'loading...Please wait\'>',
false);
xmlHttp.open("POST", serverScript, true);
xmlHttp.setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader('Content-length', parameters.length);
xmlHttp.setRequestHeader('Connection', 'close');
xmlHttp.send(parameters);
any help
You seem to be incorrectly tagged as php. Also have you considered jQuery for the ease of ajax whilst using it.
as for your question could you post the code on the page where the ajax request is going to as the code here looks fine..
Edit:
Where is serverScript set?
change serverScript for the ajax page you are calling?
http://msdn.microsoft.com/en-us/library/windows/desktop/ms757849%28v=vs.85%29.aspx
Related
Learning AJAX.
I have the following AJAX script, i am using it primarily for navigation (backend php):
function ajaxFunction(linked) {
var ajaxRequest;
var loading = $('#loading');
if(loading.length > 0) {
loading.css('display', 'block');
}
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function() { **//READY STATE HERE!**
if(ajaxRequest.readyState == 4) {
var ajaxDisplay = $('#wrapper');
loading.css('display', 'none');
ajaxDisplay.html(ajaxRequest.responseText);
if($('#search_field').length > 0) {
$('#search_field').focus();
}
if($('#year').length > 0) {
$('html').scrollTo('#year');
}
startValidation(); **// VALIDATION FUNCTION HERE!**
}
}
// Now get the value from user and pass it to
// server script.
if(linked == 'addNewPage' || linked == 'add') {
var queryString = "?page=add";
queryString += "&action=customer&add=new&ajax=ajaxRequest";
} else if(){} etc...
I have downloaded the h5validate plugin to take advantage of the HTML5 validation i already have in place, the problem is when i load the content through AJAX any .ready functions get unbound from the DOM and don't work. I have tried calling the function after ReadyState==4 but it still won't launch. The function works if i navigate to it directly (without AJAX) and use:
window.onload = startValidation();
Validate trigger:
function startValidation() {
$('.row').h5Validate({
errorClass:'red'
});
}
Where am i going wrong here?
I try to upload photo with Ajax, have written code that has worked without Problems in Opera (My Standard Browser). Now i have tested it in other browsers, they all shooting with errors back. My PHP script starts with
if(!empty($_FILES)) {
//todo
} else {
exit();
}
So i tried to put var_dump($_FILES); die(); at the start to see whats wrong.
They all give this back array(0) {}. I have tested it on FireFox, Chrome, Safari (All latest version), IE9 on win7 and latest Firefox on Debian. The biggest problem, i don't understand why it don't working, because in developer tools and all browsers above, i can see the file with right name in right position.
Here is my JS to upload:
var photo_input1 = document.createElement('input');
photo_input1.setAttribute('type','file');
photo_input1.setAttribute('class','photo_input');
photo_input1.setAttribute('id','photo1');
photo_input1.addEventListener('change', function() {
upload_photo(this.id,this.files[0])
});
var upload_photo = function(filename,file) {
var data_arr = Array();
data_arr['callback_name'] = 'upload_photo';
upload_file(filename,file,'add_photo.php',data_arr);
}
var upload_file = function(filename,file,url,data_arr) {
var datapack = null;
var ajaxanswer = function() {
try {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
//todo
} else {
alert('Problems:' + "\n" + ajax.statusText);
}
}
} catch(e) {
}
}
try {
var ajax = new XMLHttpRequest();
} catch(e) {
try {
var ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
var ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
if(ajax) {
if(typeof url != 'undefined') {
datapack = new FormData;
datapack.append(filename,file);
if(typeof data_arr != 'undefined') {
for(key in data_arr) {
datapack.append(key, data_arr[key]);
}
}
ajax.open('POST',url, true);
ajax.setRequestHeader('Content-type', 'multipart/form-data');
ajax.onreadystatechange = ajaxanswer;
ajax.send(datapack);
}
}
}
It is not possible to upload files using ajax. The normal way to do is to use a iframe internal and submit the form using the iframe. You can read about one of the way here.
Also you can read this answer.
With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers
FormData only works in Opera v12 and up as other relatively new browsers: http://caniuse.com/#search=FormData
You can try this for Ajax-like file uploading : https://github.com/valums/file-uploader. As Arun P Johny mentioned, there is no uploading with Ajax, but you can use some workarounds, like hidden iframe in this case.
Quick notes. I am not using jQuery so don't suggest it.
When pressing the button which has the onclick="ajaxfunction();" i get an alert saying "Error during AJAX call. Please try again " and then I get the alert saying success, twice :S ... Why is this happening?
I don't understand why this is happening, as it calls the error, and then goes to the other part of the if statement...
Thanks in advance!
<script>
function getXMLObject() //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
}
return xmlHttp; // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
var url="insertProduct.php";
function ajaxFunction() {
var getdate = new Date(); //Used to prevent caching during ajax call
if(xmlhttp) {
var name = document.getElementById("name");
var code = document.getElementById("code");
xmlhttp.open("POST",url,true); //calling insertProduct.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("name=" + encodeURIComponent(name.value) + "&code=" + encodeURIComponent(code.value)); //Posting to PHP File
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4 || xmlhttp.readyState=="complete") {
alert("Success");
document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again " + xmlhttp.status);
}
}
</script>
After finishing the task you can call return;
Likes below.
function handleServerResponse() {
if (xmlhttp.readyState == 4 || xmlhttp.readyState=="complete") {
alert("Success");
document.getElementById("message").innerHTML=xmlhttp.responseText;
return;
}
else {
alert("Error during AJAX call. Please try again " + xmlhttp.status);
return;
}
}
I hope this will help to you.
I am trying to pass to a PHP file cellnumber. My AJAX isn't even working, when I try
alert("test"); in the ajax.onreadystatefunction() it won't print.
My javascript getrow(t) function gets called every time someone clicks on a cell in a table
and the result is the cell turning into green. I want to ultimately enter this data into a postgres table using php.
Thanks for all the help!
Vlad
<script type="text/javascript">
//gets the row and column number
function getRow(t)
{
var col=t.cellIndex;
var row=t.parentNode.rowIndex;
var testTable = document.getElementById("testTable");
t.style.backgroundColor = "#33CC66";
var cellnumber = (row*15 + col);
var ajax = new XMLHttpRequest();
//use ajax to enter into visitedCells
ajax.onreadystatechange = function()
{
// Call a function when the state changes.
if(ajax.readyState == 4 && ajax.status == 200)
{
ajax.open("POST", insertCoordinates.php, true);
ajax.send(cellnumber);
}
else
{
alert("Error:" + ajax.status + "and " + ajax.statusText);
}
}
}
</script>
</body>
</html>
ajax.open("POST", insertCoordinates.php, true);
ajax.send(cellnumber);
should be outside ajax.onreadystatechange
just befor }//getRow
you actually don't have the request executed
should be like that:
var ajax = new XMLHttpRequest();
//use ajax to enter into visitedCells
ajax.onreadystatechange = function() {//Call a function when the state changes.
if(ajax.readyState == 4 && ajax.status == 200) {
alert('success');
} else {
alert("Error:" + ajax.status + "and " + ajax.statusText);
}
}//onreadyState
ajax.open("POST", insertCoordinates.php, true);
ajax.send(cellnumber);
probably won't work in IE
should use a construction like that:
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
but the best way is to use jQuery ...easy and safe
So I've got an AJAX project which uses the XmlHttpRequest object to dynamically retrieve data from the server-side (in my case, I use JSON with PHP/MySQL in case that's relevant). Pretty much all my HTML elements are created dynamically via the javascript DOM, so it's the .js files doing the work.
Here's a typical .js file I use to get server-side info from PHP and then build the html:
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
} catch(e) {}
}
}
if (!xmlHttp) alert("Error creating XmlHttpRequest object.");
else { return xmlHttp; }
}
function initialize_main() {
if (xmlHttp) {
try {
xmlHttp.open("GET", "main_php.php", true);
xmlHttp.onreadystatechange = handleMainStateChange; //call a function when the state changes
xmlHttp.send(null);
} catch(e) {
alert("Can't connect to server: " + e.toString());
}
}
}
function handleMainStateChange() {
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200) {
try {
init_main();
} catch(e) {
alert("Error reading the response: " + e.toString());
}
} else {
alert("There was a problem retrieving data: " + xmlHttp.statusText);
}
}
}
function init_main() {
var data = JSON.parse(xmlHttp.responseText);
//now do stuff with the DOM or w/e
}
So as I said everything is cool in firefox and chrome. But internet explorer tells me: "Error reading the response: TypeError: Object doesn't support this property or method". I'm a bit new to AJAX as you might guess, so thanks for any help!
I would highly recommend that you use JQuery so that you can write Javascript that doesn't care about the type of browser (JQuery does this for you): http://jquery.com/
Try using this function, for me it works for all browser
function getXMLHTTP()
{
var xmlhttp = false;
try
{
xmlhttp = new XMLHttpRequest();
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)
{
xmlhttp = false;
}
}
}
return xmlhttp;
}