Javascript Function

[Robbie]

Hey,

I have a JS code for loading pages via AJAX, and I want it so when a button is clicked it calls my function for saving (I need it to save multiple times, so i put it in a while() statement in PHP


<script type="text/javascript">
function save() {
ajaxpage('savepage.php?user=<? echo $_SESSION[username]; ?>&id=<? echo $row[id]; ?>&name=<? echo $row[name]; ?>, 'savediv');
}
</script>and NOT in the while() statement I have


<form>
<input type="button" name="save" onClick="javascript:save();" value="Save"></form>but it doesn't save, and in Firebug I get an error saying "save is not a function" when clicking the button :S, any help? Thanks

[Protege]

Make it alert your username etc to see if thats working. 1min too..

<script type="text/javascript">
var username = '';
var id = '';
var name = '';
function savePage()
{
ajaxpage('savepage.php?user=' + username + '&id=' + id + '&name=' + name, 'savediv');
}
</script>
Set the vars in javascript. Call your function something else, might help.

Let me code something up.

[Robbie]

OK I've figured that, I made the function



<script language="text/javascript">
function save () {
<?
$abcd = mysql_query("SELECT * FROM texts WHERE user = '$page'");
while($abc = mysql_fetch_array($abcd)) {
echo("ajaxpage('save.php?id=$abc[id]', 'savediv)\n"); }
?>
}
</script>and in the source code i get


<script language="text/javascript">
function save() {
ajaxpage('save.php?id=1', 'savediv')
ajaxpage('save.php?id=2', 'savediv')
}
</script>but I still get save is not a function :@


<form>
<input type="button" name="save" onClick="javascript:save();" value="Save"></form>

[Protege]

<?php
$username = 'God';
$id = '1';
$name = 'God';
echo( '<script type="text/javascript">
var username = "' . $username . '";
var id = "' . $id . '";
var name = "' . $name . '";
function savePage()
{
alert( "Username = " + username + " ID = " + id + " Name = " + name );
// Use that to test if the vars are set.

}
</script>' );
?>
<input type="submit" value="Press" onClick="javascript:savePage();">
Live = http://www.jamesrozee.com/robbie.php

Its not the best way to set the vars, but thats how Id do it.

<script type="text/javascript"> you have
<script language="text/javascript"> <-- is deprecated.

You know if your using AJAX to load pages, you need a backup if they don't have JAVASCRIPT enabled.

[Robbie]

Yeah it works but I need it to save multiple things with multiple ids

[Protege]

Give me an example of what you mean (Or what you want it to do)

[Robbie]

Each item has an ID number and I'm tryna send the id of each one to a page with this function but as u can see above it doesnt like it

[Protege]

Each item has an ID number and I'm tryna send the id of each one to a page with this function but as u can see above it doesnt like it

Like this then?



<?php
$numbers = array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 );
// Im using an array as i cba to make a db.
echo( '<script type="text/javascript">' ); // Start the javascript.
for( $i = 0; $i < sizeof($numbers); $i++ )
{
// you can use a while i guess.
echo( 'ajaxpage("save.php?id=' . $numbers[ $i ] . '", savediv);' );
}
echo( '</script>' );
?>
Dont worry if it isnt all on different lines, it will still work.

LIVE = http://www.jamesrozee.com/robbie.php?id=1

[Robbie]

Doesnt work if i put it in a function

[Protege]

Like this then?



<?php
$numbers = array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 );
// Im using an array as i cba to make a db.
echo( '<script type="text/javascript">' ); // Start the javascript.
for( $i = 0; $i < sizeof($numbers); $i++ )
{
// you can use a while i guess.
echo( 'ajaxpage("save.php?id=' . $numbers[ $i ] . '", savediv);' );
}
echo( '</script>' );
?>
Dont worry if it isnt all on different lines, it will still work.

LIVE = http://www.jamesrozee.com/robbie.php?id=1

You tried this?


<?php
$numbers = array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 );
// Im using an array as i cba to make a db.
echo( '<script type="text/javascript">
function sendPage()
{' ); // Start the javascript.
for( $i = 0; $i < sizeof($numbers); $i++ )
{
// you can use a while i guess.
echo( 'ajaxpage("save.php?id=' . $numbers[ $i ] . '", savediv);' );
}
echo( '
}
</script>' );
?>

[Protege]

As I can't edit I did try that with an alert instead of your func to load pages;


$numbers = array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 );
echo( '<script type="text/javascript">
function someFunc() {
' );
for( $i = 0; $i < sizeof($numbers); $i++ )
{
// you can use a while i guess.
echo( 'alert( "' . $numbers[ $i ] . '" );' );
}
echo( '}
</script>
' );
?>
<input type="submit" value="Press" onClick="javascript:someFunc();">


It does work and a Live example is http://www.jamesrozee.com/robbie.php?id=2

[Robbie]

That works fine. But What it is is:

SQL Table called 'items'. Fields are

'id'
'name'
url'
'x'
'y'.

They can drag items around using this:
http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Each item has a name like itemname_IDNUMBER_USERNAME, and to get the x and y co-ordinates you use


dd.elements.itemname.x
dd.elements.itemname.y

And when the user presses save, I want to location of every item on that page to save, I know the PHP for updating it, and I do this

save.php?id=2&name=itemname&owner=username&x=200&y=500

and it will update in the database, but if I use any PHP in my function (in <? tags obv.) it never works.


<script type="text/javascript">
function save() {
ajaxpage('save.php?user=<? echo $_SESSION[username]; ?>&id=<? echo $row[id]; ?>&name=<? echo $row[name]; ?>, 'savediv');
}
</script>

something like that doesnt work, Firebug says "save() is not a function" when I've set it as one :(. Any more help? Thanks for help btw :)

[Protege]

Well use what ive said and put it into practice. I can't help you do that as I don't know that much information about it ( and im too lazy to learn ) but what I've shown you is good.

[Robbie]

OK, figured everything out apart from getting the x and y co-ords into the ajaxpage


$one = mysql_query("SELECT * FROM `items` WHERE owner = '$page'");
while($two = mysql_fetch_array($one)) {
echo("ajaxpage('save.php?stname=$two[name]&id=$two[id]&name=$page&x=dd.elements.$two[name].x', 'savediv')\n");
}Thats in script tags. But it doesn't post the actual x co-ords, it posts dd.elements.ITEM NAME.x, how do I fix this so it posts the actual co-ords?

Thanks

[Protege]

I'm not working off MySQL database but it can always be converted.

There are A LOT of errors you will need to fix...

Example = http://www.jamesrozee.com/dndsave/index.php

Index.php =

<html>
<head>
<title>Drag/Drop Save Location - by James Rozee</title>
<link rel="stylesheet" type="text/css" href="locations.css" />
<style type="text/css">
.drag {
position: relative;
cursor:hand;
z-index:100;
}
</style>
<script type="text/javascript">

/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
// disgusting coding tbh ...
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this. targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.t argetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clie ntX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"
return false
}
}
}

dragobject.initialize()
</script>
<!-- My script starts ;) -->
<?php
/*
* @ James Rozee
*/

$numbers = array( 1, 2, 3, 4, 5, 6, 7 );
echo( '<script type="text/javascript">
function saveLocations()
{
var urlSend = "save.php?locations=";
var num = ' . sizeof($numbers) . ';
for( i = 1; i < num; i++ )
{
xPos = document.getElementById( "id-" + i ).style.top;
yPos = document.getElementById( "id-" + i ).style.left;
urlSend = urlSend + i + "," + xPos + "," + yPos + "~";
}
if( window.XMLHttpRequest )
{
aJax = new XMLHttpRequest();
}
else if( window.ActiveXObject )
{
aJax = new ActiveXObject( "Microsoft.XMLHTTP" );
}
aJax.open( "POST", urlSend, true );
aJax.onreadystatechange = goCheck;
aJax.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
aJax.send( "null" );
}
function goCheck()
{
if( aJax.readyState == 4 )
{
if( aJax.status == 200 )
{
if( aJax.responseText == "Done" )
{
alert( "Locations have been saved" ); // change this lool
} else {
alert( "Error saving locations..." ); // and this...
}
}
}
}
</script>
' );
?>
</head>
<body background="http://img4.cdn1.habbo.com/c_images/backgrounds2/bg_rain.gif">

<img id="id-1" src="http://img1.cdn1.habbo.com/c_images/stickers/newyear_2007_anim.gif" class="drag">

<img id="id-2" src="http://img1.cdn1.habbo.com/c_images/stickers/newyear_2007_anim.gif" class="drag">

<img id="id-3" src="http://img1.cdn1.habbo.com/c_images/stickers/newyear_2007_anim.gif" class="drag">

<img id="id-4" src="http://img1.cdn1.habbo.com/c_images/stickers/newyear_2007_anim.gif" class="drag">

<img id="id-5" src="http://www.habbo.co.uk/habbo-imaging/avatar/hd-190-1.ch-215-62.lg-280-110.sh-290-110.hr-165-61,s-0.g-0.d-4.h-4.a-0,6d1db6cbc9df2e1415d3bf0d9e094c52.gif" class="drag" alt="The GOD">

<img id="id-6" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" class="drag">

<input type="submit" value="Press" onClick="javascript:saveLocations();">

</body>
</html>Different images can be added by the ID being incremented. eg: Id-7 would be the next ID for the next image


<img id="id-7" src="jamesisgreat.jpg" class="drag">Save.php, this should be updated tbh.


<?php
$fh = fopen( 'locations.css', 'w+' ) or die( 'Can\'t open file' );
$split = explode( '~', $_GET[ 'locations' ] );
for( $i = 0; $i < sizeof( $split ) - 1; $i++ )
{
$ix = $i + 1;
$_split = explode( ',', $split[ $i ] );
fwrite( $fh, '#id-' . $ix . ' {
position: relative;
top: ' . $_split[1] . ';
left: ' . $_split[2] . ';
}
' );
}
fclose( $fh );
echo( 'Done' );
?>
This above script is very exploitable, people can finish off a CSS code and continue the next say...
5px; <-- add the semi colon, and continue with more CSS (not that they can do a lot with it.)
On the array

$numbers = array( 1, 2, 3, 4, 5, 6, 7 );Always add an extra number than the actual IDS (these are the IDs of the arrays) ID-1 etc. 6 Images = 7 IDs.

You need to make a file called "locations.css" - Add a few images etc.

I don't recommend you using this for your system, just give you an idea on how to could do it.