php update database with ajax

[adam291086]

I have this php code

 

 

<?php
echo '<meta http-equiv=\"refresh\" content=\"0;url=http://wikipedia.org\"/>';

error_reporting(E_ALL);

include('config.php');
$left = $_GET["left"];
$top = $_GET["top"];
$height = $_GET["height"];
$width = $_GET["width"];
$Position = $_GET["Position"];
$Background = $_GET["Background"];
$Cursor = $_GET["Cursor"];
$Border = $_GET["Border"];
$div_name = $_GET["Div_Name"];

$conn;
mysql_query("UPDATE Admin_Page_Style SET Style_Left = '$left',Style_Top = '$top',Style_Height = '$height',Style_Width = '$width',Style_Position = '$Position',Style_bgcolor = '$Background',Style_Cusor = '$Cursor',Border = '$Border',div_name = '$div_name',
WHERE div_name = 'adam'") or die(mysql_error());

?>

 

which is iniated by some ajax but my database isn't getting updated. I am call my update.php script by using

 

    var http = createRequestObject();
http.open('get', 'update.php?height=' + height + '?width'+width + '?top'+top + '?left'+left + '?Div_name'+Div_name + '?Border'+Border + '?Position'+Position + '?Background'+Background + '?Cursor'+Cursor);
http.send(null);

 

what am i doing wrong?

[Darklink]

Try debugging.

 

When the script terminates, in Javascript alert the results and see if there is an error.

Or echo each individual value.

[adam291086]

i know all the javascript values are there i have alerted them all. There is a problem with running the update.php file i think. Any ideas?

[Darklink]

Did you alert the values before you sent them or did you alert them when they came back?

 

Alert the responseText value when it comes back.

[Bauer418]

Your parameters are added incorrectly.  Multiple parameters in a querystring should be separated with an ampersand (&) not a question mark.  The question mark separates the query string from the page.

 

This code:

    var http = createRequestObject();
http.open('get', 'update.php?height=' + height + '?width'+width + '?top'+top + '?left'+left + '?Div_name'+Div_name + '?Border'+Border + '?Position'+Position + '?Background'+Background + '?Cursor'+Cursor);
http.send(null);

 

Should be this:

    var http = createRequestObject();
     http.open('get', 'update.php?height=' + height + '&width='+width + '&top='+top + '?&left='+left + '&Div_name='+Div_name + '&Border='+Border + '&Position='+Position + '&Background='+Background + '&Cursor='+Cursor);
     http.send(null);

[Darklink]

Oh and on your SQL query you have a comma just before the WHERE function. You should take that away. You only use that before each SET key.

 

UPDATE Admin_Page_Style 
SET 
     Style_Left = '$left',
     Style_Top = '$top',
     Style_Height = '$height',
     Style_Width = '$width',
     Style_Position = '$Position',
     Style_bgcolor = '$Background',
     Style_Cusor = '$Cursor',
     Border = '$Border',
     div_name = '$div_name'
WHERE div_name = 'adam'

[adam291086]

I have just made those changes and still nothing. I am aware this is turning into an ajax problem. And the topic will get removed. Can either of you help me over msn??

[adam291086]

How do i alert the response text?

[Bauer418]

Made a mistake in what I posted.

 

This line:

     http.open('get', 'update.php?height=' + height + '&width='+width + '&top='+top + '?&left='+left + '&Div_name='+Div_name + '&Border='+Border + '&Position='+Position + '&Background='+Background + '&Cursor='+Cursor);

 

Should be this:

     http.open('get', 'update.php?height=' + height + '&width='+width + '&top='+top + '&left='+left + '&Div_name='+Div_name + '&Border='+Border + '&Position='+Position + '&Background='+Background + '&Cursor='+Cursor);

 

And what does this line in your PHP file do:

$conn;

 

Seems useless to me.

[adam291086]

that change still gave nothing

 

The $conn variable starts the database stuff. If you go to http://adamplowman.co.uk/Rubber_Duckie/adam.php you can see what i am doing. The objects can move around the page and if you click on the right cornor you can re size the element. On the mouse down i want the  style information to update in the database.

 

I use php to get all the style information and html div element.

[Darklink]

Let's see your full code for your Ajax calls and returns.

[adam291086]

ok

 

here is the full ajax part of my javascript

 

function createRequestObject()
{
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
	/* Create the object using MSIE's method */
	request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
	/* Create the object using other browser's method */
	request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleThoughts(){
/* Make sure that the transaction has finished. The XMLHttpRequest object 
	has a property called readyState with several states:
	0: Uninitialized
	1: Loading
	2: Loaded
	3: Interactive
	4: Finished */
try
{
	if(http.readyState == 4){ //Finished loading the response
		/* We have got the response from the server-side script,
			let's see just what it was. using the responseText property of 
			the XMLHttpRequest object. */
		var response = http.responseText;
		//alert(response);
		if(response!="ok")
		{
			alert("Please select another username!");
		}

	}
}
catch(Exception)
{
}

}


function update_database(el)

{
    var height;

    var width;

    var top; 

    var left;
    var Div_name;
    var Border;
    var Position;
    var Background;
    var Cursor;


    height = el.style.height;
    if(height == '')
    {
      height = '100px';
    }

    width = el.style.width;
    if(width == '')
    {
      width = '100px';
    }


    top = el.style.top;
    if(top == '')
    {
      top = '0px';
    }


    left = el.style.left;
    if(left == '')
    {
      left = '0px';
    }

    Div_name = el.id;
    Border = el.style.border;
    Position = el.style.position;
    Background = el.style.background-color;
    Cursor = el.style.cursor;
    
     var http = createRequestObject();
     http.open('get', 'update.php?height=' + height + '&width='+width + '&top='+top + '&left='+left + '&Div_name='+Div_name + '&Border='+Border + '&Position='+Position + '&Background='+Background + '&Cursor='+Cursor);
     http.send(null);

}

 

this is how i start the update database function

 function endchange()

  {

    document.onmouseup = null;

    document.onmousemove = null;

update_database(el);

  }

 

el is set to document.getElementById('div2') or what ever is clicked

[Bauer418]

Your JS doesn't even work in Firefox 3.  My assumption is that your JS has more than one problem in it.

[adam291086]

i know about the problem in firefox it due to me not setting an event properly. But it does work in other browsers, Here is the js script

 

// global variables

var counter;



counter=4;



//disable highlighting looks for the div tag  CONTENT 

window.onload = function() {

  var element;

  element = document.getElementById('content');  

  element.onselectstart = function () { return false; } // ie

  element.onmousedown = function () { return false; } // mozilla

}



//gets the id of the element we want to drag or resize and create a new object. 

function loading(id)

{

  var el = document.getElementById(id);

  new Draggable(el);

}



//get the css style information

function getStyle(oElm, strCssRule){

    var strValue = "";

    if(document.defaultView && document.defaultView.getComputedStyle){

        var css = document.defaultView.getComputedStyle(oElm, null);

        strValue = css ? css.getPropertyValue(strCssRule) : null;

    }

    else if(oElm.currentStyle){

        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){

            return p1.toUpperCase();

        });

        strValue = oElm.currentStyle[strCssRule];

    }

    return strValue;

}



//The starting of the dragging or resizing

function Draggable(el)

{

//variables

  var xDelta = 0, yDelta = 0;

  var xStart = 0, yStart = 0;

  var e;



//Get the mouse positions

    e = e || window.event;

    xStart = parseInt(e.clientX);

    yStart = parseInt(e.clientY);

//Getting the object top and left position 

    el.style.top = parseInt(getStyle(el,'top')) + 'px';

    el.style.left = parseInt(getStyle(el,'left')) + 'px';



//working out where the mouse position is to decide what the user wants to do.

if(yStart >=parseInt(getStyle(el,'top'))+parseInt(getStyle(el,'height'))-10&&xStart >=parseInt(getStyle(el,'left'))+parseInt(getStyle(el,'width'))-10)

{

//if the mouse is in the bottom right coror then start the resizing function

    document.onmouseup = endchange;

    document.onmousemove = bigger;

    return false;

}



//if the mouse is not in the right cornor then start the moving functions

else

{

    document.onmouseup = endchange;

    document.onmousemove = drag;

    return false;

}



if(yStart >=parseInt(getStyle(el,'top'))+5&&xStart >=parseInt(getStyle(el,'left'))+parseInt(getStyle(el,'width'))-10)

{

removeElement(el)

}



  // fire each time it's dragged changing the objects css properties

  function drag(e)

  {
    var e;

    e = e || window.event;

    xDelta = xStart - parseInt(e.clientX);

    yDelta = yStart - parseInt(e.clientY);

    xStart = parseInt(e.clientX);

    yStart = parseInt(e.clientY);

    el.style.top = (parseInt(el.style.top) - yDelta) + 'px';

    el.style.left = (parseInt(el.style.left) - xDelta) + 'px';

  }



  // initiate the size change

  function bigger()

  {

    var e;

    e = e || window.event;

    xStart = parseInt(e.clientX);

    yStart = parseInt(e.clientY);

    el.style.height = parseInt(getStyle(el,'height')) + 'px';

    el.style.width = parseInt(getStyle(el,'width')) + 'px';

    document.onmouseup = endchange;

    document.onmousemove = resize;

}



//change the objects actual css properties

  function resize(e)

  {	

    e = e || window.event;

    xDelta = xStart - parseInt(e.clientX);

    yDelta = yStart - parseInt(e.clientY);

    xStart = parseInt(e.clientX);

    yStart = parseInt(e.clientY);



//if the height is less that or eqal to 100 keep height contastant and move width until it reaches 100

if(parseInt(el.style.height) - yDelta<=100 && parseInt(el.style.width) - xDelta>100)

{

    el.style.height = '100px';

    el.style.width = (parseInt(el.style.width) - xDelta) + 'px';

}

//if the width is less that or eqal to 100 keep width contastant and move height until it reaches 100

if(parseInt(el.style.height) - yDelta>100 && parseInt(el.style.width) - xDelta<=100)

{

    el.style.height = (parseInt(el.style.height) - yDelta) + 'px';

    el.style.width = '100px';

}

//if both the height and width are at 100 stop everything 

if(parseInt(el.style.height) - yDelta<=100 && parseInt(el.style.width) - xDelta<=100)

{

    el.style.height = '100px';

    el.style.width = '100px';

    endchange();

}

//if height and width are both over 100 then move them around

if(parseInt(el.style.height) - yDelta>100 && parseInt(el.style.width) - xDelta>100)

{

    el.style.height = (parseInt(el.style.height) - yDelta) + 'px';

    el.style.width = (parseInt(el.style.width) - xDelta) + 'px';

}

}

//end the changing of an object and initate the start of updating the database

  function endchange()

  {

    document.onmouseup = null;

    document.onmousemove = null;

update_database(el);

  }

}



function add_item()

{

   var ni = document.getElementById('content');

   var newdiv = document.createElement('div');

   newdiv.setAttribute('id','div'+counter);

   newdiv.setAttribute('onmousedown','loading(\'d\')');

   newdiv.innerHTML = ' ';

   ni.appendChild(newdiv);

   counter = counter+1;

}



function removeElement(id) {

  var d = document.getElementById('content');

   var olddiv = id;

   d.removeChild(olddiv);

}


function createRequestObject()
{
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
	/* Create the object using MSIE's method */
	request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
	/* Create the object using other browser's method */
	request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleThoughts(){
/* Make sure that the transaction has finished. The XMLHttpRequest object 
	has a property called readyState with several states:
	0: Uninitialized
	1: Loading
	2: Loaded
	3: Interactive
	4: Finished */
try
{
	if(http.readyState == 4){ //Finished loading the response
		/* We have got the response from the server-side script,
			let's see just what it was. using the responseText property of 
			the XMLHttpRequest object. */
		var response = http.responseText;
		//alert(response);
		if(response!="ok")
		{
			alert("Please select another username!");
		}

	}
}
catch(Exception)
{
}

}


function update_database(el)

{
    var height;

    var width;

    var top; 

    var left;
    var Div_name;
    var Border;
    var Position;
    var Background;
    var Cursor;


    height = el.style.height;
    if(height == '')
    {
      height = '100px';
    }

    width = el.style.width;
    if(width == '')
    {
      width = '100px';
    }


    top = el.style.top;
    if(top == '')
    {
      top = '0px';
    }


    left = el.style.left;
    if(left == '')
    {
      left = '0px';
    }

    Div_name = el.id;
    Border = el.style.border;
    Position = el.style.position;
    Background = el.style.background-color;
    Cursor = el.style.cursor;
    
     var http = createRequestObject();
     http.open('get', 'update.php?height=' + height + '&width='+width + '&top='+top + '&left='+left + '&Div_name='+Div_name + '&Border='+Border + '&Position='+Position + '&Background='+Background + '&Cursor='+Cursor);
     http.send(null);

}

[Darklink]

You never added in an onreadystatechange value, which is what calls the handler function after PHP sends the data back.

I've cleaned up your code a little bit to help myself (tabs are your best friend).

 

I've also uncommented the alert() function. See what happens and what you get from this code.

 

function createRequestObject()
{
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name

if(browser == "Microsoft Internet Explorer")
{
	/* Create the object using MSIE's method */
	request_o = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
	/* Create the object using other browser's method */
	request_o = new XMLHttpRequest();
}

return request_o; //return the object
}



/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleThoughts()
{
/* Make sure that the transaction has finished. The XMLHttpRequest object 
	has a property called readyState with several states:
	0: Uninitialized
	1: Loading
	2: Loaded
	3: Interactive
	4: Finished */
try
{
	//Finished loading the response
	if(http.readyState == 4)
	{
		/* We have got the response from the server-side script,
			let's see just what it was. using the responseText property of 
			the XMLHttpRequest object. */
		var response = http.responseText;

		alert(response);

		if ( response!="ok" )
		{
			alert('Please select another username!');
		}

	}
}
catch(Exception)
{
}

}


function update_database(el)
{
var height;
var width;

   	var top; 
   	var left;

   	var Div_name;
  	var Border;
   	var Position;
   	var Background;
  	var Cursor;

   	height = el.style.height;
   	if(height == '')
   	{
     		height = '100px';
   	}

   	width = el.style.width;
   	if(width == '')
   	{
    		width = '100px';
   	}


   	top = el.style.top;
   	if(top == '')
   	{
    		top = '0px';
   	}

   	left = el.style.left;
   	if(left == '')
   	{
     		left = '0px';
   	}

   	Div_name = el.id;
   	Border = el.style.border;
   	Position = el.style.position;
   	Background = el.style.background-color;
   	Cursor = el.style.cursor;
   
    	var http = createRequestObject();
    	http.open('get', 'update.php?height=' + height + '&width='+width + '&top='+top + '&left='+left + '&Div_name='+Div_name + '&Border='+Border + '&Position='+Position + '&Background='+Background + '&Cursor='+Cursor, false);
    	http.onreadystatechange = handleThoughts;
http.send(null);

}

[adam291086]

still not updating, what am i missing. Is there another way to do this?