Posting data with Ajax to php

Ajax does not post data

Page 1 of 1

7 Replies - 7028 Views - Last Post: 12 January 2011 - 07:25 PM Rate Topic: -----

#1 andre1011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 87
  • Joined: 12-January 11

Posting data with Ajax to php

Posted 12 January 2011 - 01:47 AM

Hello my name is Andre and I have a coding issue. I want my Ajax script to post the id of the menu item the user clicks to the php script. Firebug reports the correct id via the console / post tab but this fact does not get reflected in the web page itself. It will show all HTML except the proper id.

Here is the php/HTML code
<?php
/*
filename:   home.php
author:     Andre Long
date:       September 11, 2010
purpose:    To serve as the starting page for the user and where he can login into the website.
*/
session_start();
header('Content-Type: text/html; charset=utf-8');
include("php/PHPbank/PHPLibrary2.php");
include("php/PHPbank/browser_detection_php.php");
include("php/PHPbank/PHPFiles_Images.php");
include("php/PHPbank/PHPPostFunctions.php");
$host = "localusers.db.xxx.com";
$user = "localusers";
$pass = "XXXX";
$db = "localusers";
$table = "admin";

$link = connectToDataBase($host, $user, $pass, $db);
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

error_reporting(E_ALL);
ini_set('display_errors', '1');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
 $browser = browser_detection('browser');
 if( $browser == 'msie')
 {
	printf("<link rel='stylesheet' type='text/css' href='css/ie8HomeStyles.css' />"); 
 }
 else
 {
	printf("<link rel='stylesheet' type='text/css' href='css/homeStyles.css' />");  
 }
?>
<title>Sevens Local</title>
<script src='javascript/userLoginForm.js' type='text/javascript'></script>
<!--<script src="javascript/globalAjaxObject.js" type="text/javascript"></script>
<script src="javascript/globalWPHomeAjaxObject.js" type="text/javascript"></script>-->
<script src="javascript/allGlobalAjaxObjects.js" type="text/javascript"></script>
<script src="javascript/menuLights.js" type="text/javascript"></script>
<script src="javascript/pullWorldPostsHome.js" type="text/javascript"></script>
<!--<script src="javascript/pullNationalPostsHome.js" type="text/javascript"></script>-->
</head>
<body id="homeBody">

<div id="mainWrapper">
 <div id="login"> 
<?php
     if($_SESSION['loggedInUser'] == "yes")
	 {
		 $screenIdentity = $_SESSION['screenName']; 
		 welcome($screenIdentity);
		 
	 }
	 else
	 {
		 echo "<script type='text/javascript'>  main();  </script>";
	 }

?>

  </div>
  <div id="mainMenu">
    <div id="menuImage"><img src="images/logo2.jpg" alt="Local7s Logo" /> </div>
      <div id="menuWrapper">
          <ul id="firstBar">&nbsp;
            <li id="home" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Home</a></li>
            <li id="profile" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Profile</a></li>
            <li id="learn" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Learn</a></li>
            <li id="classifieds" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish"  href="#">Classifieds</a></li>
            <li id="helpme" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Help Me!</a></li>
            <li id="thingstodo" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Things to do</a></li>
            <li id="interests" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Interests</a></li>
            <li id="friends" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Friends</a></li>
            <li id="discounts" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">7's Discounts</a></li>
            <li id="applications" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish" href="#">Applications</a></li>
            <li id="listContainer1" name="suckerFish" onclick="lights(id);" ><a class="sonOfSuckerFish"  href="#">Messages</a>
                
                   <ul id="ulParent">
                       <li class="subList"><?php countUserPrivatePosts(); ?></li>
                       <li class="subList"><?php countUserFriendsPosts();  ?></li>
                       <li class="subList"><?php countUserCityPosts();   ?></li>
                       <li class="subList"><?php countUserStatePosts();  ?></li>
                       <li class="subList"><?php countUserNationalPosts();  ?></li>
                       <li class="subList"><?php countUserWorldPosts();  ?></li>
                   </ul>
                
            </li>
           
          </ul>
       
      </div>
  </div>
  <div id="secondaryMenu">
     <ul id="ddd">
       <li id="pp" name="suckerFish" onclick="lights(id);"  class="bottomList"><a href="#">Private Post</a></li>
       <li id="fp" name="suckerFish" onclick="lights(id);"  class="bottomList"><a href="#">Posts to Friends</a></li>
       <li id="cp" name="suckerFish" onclick="lights(id);"  class="bottomList"><a href="#">Post to City</a></li>
       <li id="sp" name="suckerFish" onclick="lights(id);"  class="bottomList"><a href="#">Post to State</a></li>
       <li id="np" name="suckerFish" onclick="lights(id);"  class="bottomList"><a href="#">Post to USA</a></li>
       <li id="wp" name="suckerFish" onclick="lights(id);"  class="bottomList"><a href="#">Post to World</a></li>
     </ul>
  </div>
</div>
<!-- add table here if there is a logged in user -->
<div id="updateArea">

<?php
     $id = "";
     #$id = $_POST['data'];
	 #$homePram = $_POST['homeParam'];
     if($_SESSION['loggedInUser'] == "yes")
     {
      	   
		if(isset($_POST['data']))
		{ 
		  switch($id)
		  {
		    case "wp":
			      #worldPostTable(wp);
				  printf("<h1 id='bluebird'>World post would go here </h1>");
				  break;
				  
			case "np":
			      #nationalPostTable();
				  printf("<h1>National posta would go here</h1>");
				  break;
				  
			case "sp":
			      #statePostTable();
				  printf("<h1>State post would go here</h1>");
				  break;
				  
				  
			default:
			      #worldPostTable();
				  printf("<h1>Default stuff Andre</h1>");
				  break;
		  }#end of switch
		  		  
		}#end of if(isset($id))
		else
		{
			 worldPostTable(NULL,NULL);
			 printf("<h1 id='red'>No post data set for  allGlobal %s </h1>", $id);
			# printf("<h2 id='goodNplenty'>Looking for post data id is %s and homeID is %s </h2>", $id, $homePram );
		}
		
     }
	 else
	 {
		frontPage(); 
	 }
?>
</div>

</body>
<?php

mysql_close($link); 
?>

</html>




The only printf statement that displays is printf("<h1 id='red'>No post data set for allGlobal %s </h1>", $id); ($id is never set)

Here is the Ajax code, the actual xmlHTTPRequest objects are in another file but they are global objects
function lights(id)
{
	var liTagsArray = document.getElementsByName("suckerFish");
	var i;
	var listItemID;
	var lastPictures;
    
	for (i = 0; i < liTagsArray.length;  i++) 
	{
		listItemID = liTagsArray[i].id;
		//alert("i = " + i + " Tagname = " + listItemID );
		
		if(id == listItemID)
		{
			//alert("match");
			document.getElementById(listItemID).style.backgroundColor = "#daa520";
			document.getElementById(listItemID).firstChild.style.color = "#b22222";
			sendVarible(id, lastPictures);
			
		}
		else
		{
			//alert("no Match");
			document.getElementById(listItemID).style.backgroundColor = "#40E0D0";
			document.getElementById(listItemID).firstChild.style.color = "#000000";
			
		}
			
				
	} 
	
	
}

function  sendVarible(id, lastPictures)
{
    var url = "home.php";
	var params = "id=" + id; 
		

	if(id=="home" || id=="wp")
        {
          var $url = "php/wpRelated/relayWP2.php";
	  
	  var $data = "wp";
	  myRequestObjectA.open("POST", $url, true);
  	  myRequestObjectA.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	  myRequestObjectA.setRequestHeader("Content-length", $data.length);
	  myRequestObjectA.setRequestHeader("Connection", "close");
	  myRequestObjectA.onreadystatechange = function()
	  {
		if(myRequestObjectA.readyState==4 && myRequestObjectA.status==200)
		 {
			var Xmessage = myRequestObjectA.responseText;
			alert("FROM THE SERVER " + Xmessage); 
		 }
	  }
	  myRequestObjectA.send($data); /* THIS IS THE PROBLEM home.php does not get $data */




I will listen to all suggestions thank you all for helping me

Is This A Good Question/Topic? 0
  • +

Replies To: Posting data with Ajax to php

#2 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5314
  • View blog
  • Posts: 27,220
  • Joined: 10-May 07

Re: Posting data with Ajax to php

Posted 12 January 2011 - 02:01 AM

In your function sendVarible() :

	if(id=="home" || id=="wp")
        {
          var url = "php/wpRelated/relayWP2.php";
	  
	  var data = "wp";
	  myRequestObjectA.open("POST", url, true);
  	  myRequestObjectA.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	  myRequestObjectA.setRequestHeader("Content-length", $data.length);
	  myRequestObjectA.setRequestHeader("Connection", "close");
	  myRequestObjectA.onreadystatechange = function()
	  {
		if(myRequestObjectA.readyState==4 && myRequestObjectA.status==200)
		 {
			var Xmessage = myRequestObjectA.responseText;
			alert("FROM THE SERVER " + Xmessage); 
		 }
	  }
	  myRequestObjectA.send("data="+data.value);*/



You don't need the dollar signs for ajax variables.
Was This Post Helpful? 0
  • +
  • -

#3 andre1011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 87
  • Joined: 12-January 11

Re: Posting data with Ajax to php

Posted 12 January 2011 - 02:49 AM

Thanks for pointing that out, but I just took the "$" out and still no posted data. How can firebug report posted data via the console and it does not show up in the HTML on the PHP web page?
Was This Post Helpful? 0
  • +
  • -

#4 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5314
  • View blog
  • Posts: 27,220
  • Joined: 10-May 07

Re: Posting data with Ajax to php

Posted 12 January 2011 - 02:53 AM

More than just the dollar signs, please note the update to the (last line) send command. You need to send the Ajax variable's value.
Was This Post Helpful? 0
  • +
  • -

#5 andre1011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 87
  • Joined: 12-January 11

Re: Posting data with Ajax to php

Posted 12 January 2011 - 02:57 AM

Also of interest my url in the address bar reads http://www.XXX/home.php?params=RedDog#
I am only using the POST method via Ajax and "params=RedDog" is an idea I tried earlier and I got rid of it and it is no where in my code, why is the web page acting like it is using the GET method?

What is the significance of the "#" sign at the end of the url? This page is on a godaddy server LAMP server
Was This Post Helpful? 0
  • +
  • -

#6 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5314
  • View blog
  • Posts: 27,220
  • Joined: 10-May 07

Re: Posting data with Ajax to php

Posted 12 January 2011 - 03:14 AM

I would assume the pound sign is because your PHP code has pound signs where it looks like you wanted to comment out code. PHP code uses two slashes for a single comment line, & slash astricks C/C++ style comments for a block of text.

<?php
// This is a single line comment.

/*
These are multiple line comment block.
These are multiple line comment block.
These are multiple line comment block.
*/
?>


Was This Post Helpful? 0
  • +
  • -

#7 andre1011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 87
  • Joined: 12-January 11

Re: Posting data with Ajax to php

Posted 12 January 2011 - 04:00 AM

Here are my latest modifications, first the Ajax

function  sendVarible(id, lastPictures)
{
    	if(id=="home" || id=="wp")
	{   var url = "php/wpRelated/relayWP2.php";
	  var url2 = "home.php";
	  var data = "data="  + id;
	  myRequestObjectA.open("POST", url2, true);
  	  myRequestObjectA.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	  myRequestObjectA.setRequestHeader("Content-length", data.length);
	  myRequestObjectA.setRequestHeader("Connection", "close");
	  myRequestObjectA.onreadystatechange = function()
	  {
		if(myRequestObjectA.readyState==4 && myRequestObjectA.status==200)
		 {
			//var Xmessage = myRequestObjectA.responseText;
			//alert("FROM THE SERVER " + Xmessage); 
		 }
	  }
	  myRequestObjectA.send(data);
	}



Now the PHP
<?php
     $id = "";
     	 
     if($_SESSION['loggedInUser'] == "yes")
     {
      	   
		if(isset($_POST['data']))
		{ 
		  $id = $_POST['data'];
		  switch($id)
		  {
		    case "wp":
			      #worldPostTable(wp);
				  printf("<h1 id='bluebird'>World post would go here </h1>");
				  break;
				  
			case "np":
			      #nationalPostTable();
				  printf("<h1>National posta would go here</h1>");
				  break;
				  
			case "sp":
			      #statePostTable();
				  printf("<h1>State post would go here</h1>");
				  break;
				  
				  
			default:
			      #worldPostTable();
				  printf("<h1>Default stuff Andre </h1>");
				  break;
		  }//end of switch
		  		  
		}//end of if(isset($id))
		else
		{
			 worldPostTable(NULL,NULL);
			 printf("<h1 id='red'>No post data set for  allGlobal %s </h1>", $id);
			
		}
		
     }
	 else
	 {
		frontPage(); 
	 }
?>



Now firebug shows ">World post would go here" which is correct via the console Response tab and the html tab but still the web page itself shows the message "No post data set for allGlobal"

It looks like the server is handing back the correct response but it is not displaying in the browser window
Was This Post Helpful? 0
  • +
  • -

#8 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5314
  • View blog
  • Posts: 27,220
  • Joined: 10-May 07

Re: Posting data with Ajax to php

Posted 12 January 2011 - 07:25 PM

You must send .value

change this :

myRequestObjectA.send(data);



To this : (or as I originally suggested)

myRequestObjectA.send(data.value);


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1