Jump to content

cross browser compatibility and AJAX GET POST

FARGORE

By FARGORE
in General

 Share

Recommended Posts

FARGORE Newbie

FARGORE

Posted
Posted

So I'm having trouble with cross browser compatibility. It involves primarily AJAX and since there is not a forum section for that I could see I'm posting here. But I figure it should work anyway since it involves browser, php, JavaScript and AJAX. I have included all the code except the .nav and css. I don't think they are really necessary. This code works perfectly in IE. The problem is Firefox and Crome. I can see that the core of the issue is my AJAX call. When the variable arrives and is placed in the $minlist variable in IE it contains all the compiled information that it is supposed to. It would look something like this 1#20-2#10-3#20. As you can see in the code that string is then broken up using the explode function and processed. When the variable $minlist is gotten ($minlist = $_GET["var3"]) it would only contain "1" in Chrome. The same issue is occurring in Firefox so I think it is just having the same problem Chrome is. Everything from the # sign and past is gone. I assume this is the problem. I know that GET has issues with special characters and POST can fix this. But I have not gotten POST to work yet. I just don't know how to get it to work right. I saw an example in the AJAX section on Send a request to a server that showed this xmlhttp.send("fname=Henry&lname=Ford"); as a way of sending post data. I tried this but I could not get it to work. I could not find an example of how to receive the information at the .php file. I tried xmlhttp.send("varpost=" senddata);in the original file and ($minlist = $_POST["varpost "]in the .php file but that did not work at all. I don't understand everything about AJAX so I know I'm missing something important here. I have read everything I can find and tried everything I can think of and have yet to find a solution. Any help would be greatly appreciated. I hope everyone is doing well. 

<html><head><title>Creationism</title><link rel="stylesheet" type="text/css" href="/creationism/style.css" /></head><script type="text/javascript">var xmlhttp, playerid, checkstatus, senddata, holdingvar, coutingvar, namecheck, minidnum;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}function ajaxcall(x){if (x  == 1)//runs when the page fist loads{  //get player id from cookie  xmlhttp.open("POST", "checkcookie.php?", false);  xmlhttp.send();  playerid = xmlhttp.responseText;  if (playerid)//if you could get the player id desplay some info  {   xmlhttp.open("POST", "armydesplay.php?var=" +playerid + "&var2=" +x + "&var3=" +0, false);   xmlhttp.send();    document.getElementById("content").innerHTML= xmlhttp.responseText;  }  else//else send them to the log in page.   location.replace("http://www.erothproductions.com/creationism/creationism.php?");}else if (x == 2){  senddata = ""; //zero out send data variable   for (coutingvar = 0; coutingvar <= ((document.getElementById('miniontable').rows.length)-1); coutingvar++)//run once for each row in the table, so once for each minion type  {   //collect data from inputs and compile all that have somthing in them   minidnum = document.getElementById('miniontable').rows[coutingvar].id;     namecheck = minidnum + "m";     holdingvar = document.getElementById(namecheck).value;     if (holdingvar > 0)//if there was somthing in the transfer monster box   {    if (senddata)//if there was already somthing in senddata	 senddata += "-" + minidnum + "#" + holdingvar;	    else //if there was not somnthing in senddata alrady, it just does not add the & before because this is the first entry	 senddata = minidnum + "#" + holdingvar;   }    }   if (senddata)//they had selected minions  {   //send data to armydesplay   xmlhttp.open("POST", "armydesplay.php?var=" +playerid + "&var2=" +x + "&var3=" +senddata, false);   xmlhttp.send();     //reciave return from armydesplay   checkstatus = xmlhttp.responseText;     if (checkstatus == "error")//check to see if it reciaved error message    document.getElementById("error").innerHTML= "There was an error processing your request, please check your numbers and try again<br/>";//if so then set error div with error message     else//elese just reload page    document.getElementById("content").innerHTML= xmlhttp.responseText;  }   else//if they did not select any mininions   document.getElementById("error").innerHTML= "please select minions you wish to transfer<br/>";//send error message telling the player to select minions to transfer}else if (x == 3){  senddata = ""; //zero out send data variable   for (coutingvar = 0; coutingvar <= ((document.getElementById('armytable').rows.length)-1); coutingvar++)//run once for each row in the table, so once for each minion type  {   //collect data from inputs and compile all that have somthing in them   minidnum = document.getElementById('armytable').rows[coutingvar].id;     namecheck = minidnum + "a";     holdingvar = document.getElementById(namecheck).value;     if (holdingvar > 0)//if there was somthing in the transfer monster box   {    if (senddata)//if there was already somthing in senddata	 senddata += "-" + minidnum + "#" + holdingvar;	    else //if there was not somnthing in senddata alrady, it just does not add the & before because this is the first entry	 senddata = minidnum + "#" + holdingvar;   }    }   if (senddata)//they had selected minions  {   //send data to armydesplay   xmlhttp.open("POST", "armydesplay.php?var=" +playerid + "&var2=" +x + "&var3=" +senddata, false);   xmlhttp.send();     //reciave return from armydesplay   checkstatus = xmlhttp.responseText;     if (checkstatus == "error")//check to see if it reciaved error message    document.getElementById("error").innerHTML= "There was an error processing your request, please check your numbers and try again<br/>";//if so then set error div with error message     else//elese just reload page    document.getElementById("content").innerHTML= xmlhttp.responseText;  }   else//if they did not select any mininions   document.getElementById("error").innerHTML= "please select minions you wish to transfer<br/>";//send error message telling the player to select minions to transfer}if (document.getElementById("noarmy").value == "yes")  document.getElementById("movefrom").disabled=true; if (document.getElementById("nominion").value == "yes")  document.getElementById("moveto").disabled=true;}</script><body onload="ajaxcall(1)"><table width= 960px; align="center"><tr align="center" ><td> <div class="header"></div> </td></tr><tr align="center"> <td><div id ="nav"> <?php include("navbar.php");?> </div></td></tr><tr><td align="center" Height= 500px;><div id="content">  <p>loading please wait</p></div></td></tr><tr align="center"><td><div class="footer"><p><a href="mailto:fargore@erothproductions.com">Contact us!</a></p><p>© 2011 Eroth Productions all rights enforced by a severe allergic reaction to peanuts.</p></div></td></tr></table></body></html>

<?phpfunction miniontable($mins, $minorar) // creates formatted table data for minions{$tempids_array = explode("&", $mins);  $arraynums = count($tempids_array);  $arraynums -=1;  for ($arraynums; $arraynums>=0; $arraynums--)  {   $minion = explode("#", $tempids_array[$arraynums]);    switch ($minion[0])   {    case 1:    $outstuff .= "<tr  id=\"1\" align=\"center\" > <td> Homunculi </td> <td> " .$minion[1]. " </td> <td> <input type=\"text\" id=\"1" . $minorar . "\" value =\"0\" size=\"10\" style=\"text-align:center\" /> </td> </tr>";    break;      case 2:    $outstuff .= "<tr id=\"2\" align=\"center\" > <td> Creature </td> <td> " .$minion[1]. " </td> <td> <input type=\"text\" id=\"2" . $minorar . "\" value =\"0\" size=\"10\" style=\"text-align:center\" /> </td> </tr>";    break;      case 3:    $outstuff .= "<tr id=\"3\" align=\"center\" > <td> Brain </td> <td> " .$minion[1]. " </td> <td> <input type=\"text\" id=\"3" . $minorar . "\" value =\"0\" size=\"10\" style=\"text-align:center\" /> </td> </tr>";    break;      case 4:    $outstuff .= "<tr id=\"4\" align=\"center\" > <td> Familiar </td> <td> " .$minion[1]. " </td> <td> <input type=\"text\" id=\"4" . $minorar . "\" value =\"0\" size=\"10\" style=\"text-align:center\" /> </td> </tr>";    break;      case 5:    $outstuff .= "<tr id=\"5\" align=\"center\" > <td> Talisman </td> <td> " .$minion[1]. " </td> <td> <input type=\"text\" id=\"5" . $minorar . "\" value =\"0\" size=\"10\" style=\"text-align:center\" /> </td> </tr>";    break;   }  }  return $outstuff;}$v = $_GET["var"];$x = $_GET["var2"];$minlist = $_GET["var3"];//connectiong to database$mysqlcreatdata = new mysqli("[color="#000000"]Omitted[/color]", "[color="#000000"]Omitted[/color]", "[color="#000000"]Omitted[/color](", "[color="#000000"]Omitted[/color]");//if it did not work return errorif (mysqli_connect_errno()){printf("Connect failed: %\n", mysqli_connect_error());exit();}//get game account information from the creation player data table$sql = "SELECT [color="#000000"]Omitted[/color], [color="#000000"]Omitted [/color]FROM [color="#000000"]Omitted [/color]WHERE playid = '".$v."'";$res = mysqli_query($mysqlcreatdata, $sql);  If ($res)  {   while ($newArray = mysqli_fetch_array($res, MYSQLI_ASSOC))   {    $curminions = $newArray['curminions'];    $army = $newArray['army'];   }  }//place add and remove data here, after they run set x to 1 so they can also reload the page, also give warning if change was unsuccsusfulif ($x == 2)// if they are adding to thier amry, perform calculations{$errorvar = 1; //set error variavble to 1 so it is currently not in error//split requested add data$listminions_array = explode("-", $minlist);$arraynums = count($listminions_array);$arraynums -=1;for ($arraynums; $arraynums>=0; $arraynums--)//run loop for each minion selected{  $minion = explode("#", $listminions_array[$arraynums]);//split minion vareable   $search = $minion[0] . "#";//create search variable   $split = strstr($curminions,$search); //get that minion number and everything after it  $temparary_array = explode("&", $split);//explode the split up array, position one should be the desired minion  $item_array = explode("#", $temparary_array[0]);//split the disired minion into minion and number possesed   if (($errorvar) && $item_array[1] >= $minion[1])//if there is enough of the selected minion and the error variable is still 1  {   //reduce from minion amount from current minnions   $item_array[1] -= $minion[1];//the second possition should be the number of that minion you have, decrement it     if ($item_array[1] == 0)//if you are out of that minion now    $replace = "";     else//if you are not out yet    $replace = implode ("#", $item_array);//reconstruct the minion with the new total     $curminions = str_replace($temparary_array[0],$replace,$curminions);//find the minions old info in the string and replace it with the new info     $curminions = str_replace("&&","&",$curminions);//find any occericnes of two & symbols because of running out of a minion and remove them     if (strcspn($curminions,"&") == 0)//checks to see if the first character is a &	 $curminions = substr($curminions,1); //if so then it removes it	   //to check if there is one one the end we reverse the string, check the beggining again and then reverse it back, yha I know just dont ask it was the best I could come up with     $curminions = strrev($curminions);     if (strcspn($curminions,"&") == 0)//checks to see if the first character is a &	 $curminions = substr($curminions,1); //if so then it removes it	   $curminions = strrev($curminions);     //move the minion to army   if (strstr($army,$search))//if the minion id is in the minion string   {    $split = strstr($army,$search); //get that minion number and everything after it    $temparary_array = explode("&", $split);//explode the split up array, position one should be the desired minion    $item_array = explode("#", $temparary_array[0]);//split the disired minion into minion and number possesed    $item_array[1] += $minion[1];//the second possition should be the number of that minion you have, increment it    $replace = implode ("#", $item_array);//reconstruct the minion with the new total    $army = str_replace($temparary_array[0],$replace,$army);//find the minions old info in the string and replace it with the new info   }   else//if the minion is new   {    if ($army)//if you did already have other minions	 $army .= "&";     $army .= $minion[0] . "#" . $minion[1];   }  }   else//else set error variable to 0   $errorvar = 0;}$x = 4; //set x to 4 where it will perform database updates and or set the return}if ($x == 3)// if they are removing from thier amry, perform calculations{$errorvar = 1; //set error variavble to 1 so it is currently not in error//split requested add data$listminions_array = explode("-", $minlist);$arraynums = count($listminions_array);$arraynums -=1;for ($arraynums; $arraynums>=0; $arraynums--)//run loop for each minion selected{  $minion = explode("#", $listminions_array[$arraynums]);//split minion vareable   $search = $minion[0] . "#";//create search variable   $split = strstr($army,$search); //get that minion number and everything after it  $temparary_array = explode("&", $split);//explode the split up array, position one should be the desired minion  $item_array = explode("#", $temparary_array[0]);//split the disired minion into minion and number possesed   if (($errorvar) && $item_array[1] >= $minion[1])//if there is enough of the selected minion and the error variable is still 1  {   //reduce from minion amount from current army   $item_array[1] -= $minion[1];//the second possition should be the number of that minion you have, decrement it     if ($item_array[1] == 0)//if you are out of that minion now    $replace = "";     else//if you are not out yet    $replace = implode ("#", $item_array);//reconstruct the minion with the new total     $army = str_replace($temparary_array[0],$replace,$army);//find the minions old info in the string and replace it with the new info     $army = str_replace("&&","&",$army);//find any occericnes of two & symbols because of running out of a minion and remove them     if (strcspn($army,"&") == 0)//checks to see if the first character is a &	 $army = substr($army,1); //if so then it removes it	   //to check if there is one one the end we reverse the string, check the beggining again and then reverse it back, yha I know just dont ask it was the best I could come up with     $army = strrev($army);     if (strcspn($army,"&") == 0)//checks to see if the first character is a &	 $army = substr($army,1); //if so then it removes it	   $army = strrev($army);     //move the minion to minion   if (strstr($curminions,$search))//if the minion id is in the minion string   {    $split = strstr($curminions,$search); //get that minion number and everything after it    $temparary_array = explode("&", $split);//explode the split up array, position one should be the desired minion    $item_array = explode("#", $temparary_array[0]);//split the disired minion into minion and number possesed    $item_array[1] += $minion[1];//the second possition should be the number of that minion you have, increment it    $replace = implode ("#", $item_array);//reconstruct the minion with the new total    $curminions = str_replace($temparary_array[0],$replace,$curminions);//find the minions old info in the string and replace it with the new info   }   else//if the minion is new   {    if ($curminions)//if you did already have other minions	 $curminions .= "&";     $curminions .= $minion[0] . "#" . $minion[1];   }  }   else//else set error variable to 0   $errorvar = 0;}$x = 4; //set x to 4 where it will perform database updates and or set the return}if ($x == 4)//eather sends back an error message or runs x1 to recreate screen with new data{if ($errorvar == 0)//if error variable is 0  $outstuff = "error";//set error message and end runelse{   //update both minions and army in database then set x to 1 to resened desplay info  $sql = "UPDATE [color="#000000"]Omitted[/color] ET  [color="#000000"]Omitted[/color] '". $army ."',  [color="#000000"]Omitted[/color]= '". $curminions ."'  WHERE [color="#000000"]Omitted[/color]= '". $v ."'";  $res = mysqli_query($mysqlcreatdata, $sql);  $x = 1; //set x to 1 so it will reload the page info}}if ($x == 1){$outstuff = "<div id=\"error\"></div><table width= 100%;> <tr> <td align=\"center\" style=\"font-size: 20px;\"> <p>Minions</p><br/> </td> <td align=\"center\" style=\"font-size: 20px;\"> <p>Army</p><br/> </td> </tr> <tr> <td align=\"center\" width= 50%;>";if (!($curminions))// if the player has no minions  $outstuff .= "You currently have no minions! <input type=\"hidden\" id=\"nominion\" value =\"yes\"> </td>"; else//if they have minions prepare the table so they can transfer them{  //produce table with current minions  $outstuff .= " <input type=\"hidden\" id=\"nominion\" value =\"no\"> <table id=\"miniontable\" width= 80%; border=\"1\">";   $outstuff .= miniontable($curminions, "m");   $outstuff .= "</table></td>";}$outstuff .= "<td align=\"center\" width= 50%;>";if (!($army))// if the player has no army  $outstuff .= "You currently have no army! <input type=\"hidden\" id=\"noarmy\" value =\"yes\"> </td>"; else//if they have an army prepare the table so they can transfer them{  //produce table with current army   $outstuff .= "<input type=\"hidden\" id=\"noarmy\" value =\"no\"> <table id=\"armytable\" width= 80%; border=\"1\">";   $outstuff .= miniontable($army, "a");   $outstuff .= "</table></td>";}$outstuff .= "</tr> <tr> <td align=\"center\"> <input type=\"submit\" id=\"moveto\" value=\"Move -->\" onclick=\"ajaxcall(2)\"> </td> <td align=\"center\"> <input type=\"submit\" id=\"movefrom\" value=\"<-- Move\" onclick=\"ajaxcall(3)\"> </td> </tr> </table>";$armystr = 0; //variable for calculating total army streangh$minstr_array = explode("&", $army);  $arraynums = count($minstr_array);  $arraynums -=1;  for ($arraynums; $arraynums>=0; $arraynums--)  {   $minion = explode("#", $minstr_array[$arraynums]);     if ($minion[0] == 1)// for minions with points: 16    $armystr += $minion[1] * 16;      else if ($minion[0] > 1 && $minion[0] < 6)// for minions with points: 5    $armystr += $minion[1] * 5;  } $outstuff .= "<br/><br/>Total Army Strength: " . number_format($armystr);}echo $outstuff;?>

  • Like 1
Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted (edited)

Have you ever written a successful ajax call? If not, I suggest you need to understand the ajax call in this script and how it works http://www.w3schools...hp_ajax_php.asp You need to understand how the php interact and everything else about it. In that way all your questions will be answered in the most useful way. As the tutorial says, it's easy. EDIT: Feel free to ask as many questions about that tutorial as you need to. You'll get all the help you need to understand it.

Edited by niche
Link to comment
Share on other sites
FARGORE Newbie

FARGORE

Posted
  • Author
Posted (edited)

Thank you for your response. I have completed several AJAX calls. There are many within the code I posted and they all work. The problem is that the information is not arriving at the PHP in Firefox and Chrome whole. Only up to the first special character. After that its gone. It works perfectly in IE. I have looked through the whole AJAX section. I have seen where it tells you how to send data with POST. The problem is that there is not an example anywhere of how to receive and use that POST data anywhere. At least not that I have seen. //get the q parameter from URL$q=$_GET["q"];is what I'm currently doing. The problem is this will not send special characters over Firefox or Chrome. Or at least I cannot get it to. this it would seem, has special characters and I think might fix the problem. What I dont really understand is the middle line and how to use it. The example does not really explain what the stuff means, just that it is header: specifies the header namevalue: specifies the header value xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford"); Could someone maybe explain in more simple terms how one would use this? especially the middle line? Edit:I suppose the easiest way I can ask my question is this How can I send data like this1#20-2#10-3#20with an AJAX call one Firefox or Chrome since $_GET does not appear to work. thank you again and sorry I'm having trouble articulating my question.

Edited by FARGORE
Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted (edited)

In the tutorial in post #2 This sends the data to php:

xmlhttp.open("GET","gethint.php?q="+str,true);xmlhttp.send();

This receives the data from the ajax call in php:

$q=$_GET["q"];

This sends the data back to the javascript function:

echo $response;

and this receives and translates the data into something you can use in your script:

if (xmlhttp.readyState==4 && xmlhttp.status==200)	{	document.getElementById("txtHint").innerHTML=xmlhttp.responseText;	}  }

If the problem is special characters, you could send them as ascii equivalents, but I'd check for the critical parts I outlined first (ie I don't see a proper send in your script).

Edited by niche
Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
Posted

when you use form it's data automaticaly encoded by browser. if you look into attribute "enctype" where it is describe the encoding proccess. we dont use it when we use usualy because it is by default application/x-www-form-urlencoded. you may notice we change this enctype when we upload a file which encoding is different than that, when you use ajax it does not encode anything implicitly. # is reserevd for url and has special meaning so you need to encode it to tell that it is the value not the special character . you have to encode explicitly if you use ajax.

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
it s setting the header how the data will be handled. http://en.wikipedia.org/wiki/Percent-encoding <=reference of encoding
  • Like 2
Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted

Very cool birbal. Way better than my suggestion. One more for the scrapbook. Thanks.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Since the "#" character has a special meaning in a URL, if you want to transmit data that contains that character in a querystring then you need to use encodeURIComponent to escape the data. In this case Chrome and Firefox are working correctly, it is IE that is not handling the URL correctly.

  • Like 2
Link to comment
Share on other sites
FARGORE Newbie

FARGORE

Posted
  • Author
Posted
when you use form it's data automaticaly encoded by browser. if you look into attribute "enctype" where it is describe the encoding proccess. we dont use it when we use usualy because it is by default application/x-www-form-urlencoded. you may notice we change this enctype when we upload a file which encoding is different than that, when you use ajax it does not encode anything implicitly. # is reserevd for url and has special meaning so you need to encode it to tell that it is the value not the special character . you have to encode explicitly if you use ajax. it s setting the header how the data will be handled. http://en.wikipedia....ercent-encoding <=reference of encoding
Thank you very much! After reading your resources I figured out that all I had to do is replace the "#" a reserved symbol with "_" a non reserved symbol and had the problem fixed in 10 minutes. Now it works perfectly. Thank you for the explanation. I will continue to read through the resources so I can get a better understanding. Thank you justsomeguy for your explanation as well. I have the problem under control now. I will continue to try and learn as much as I can.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...