Javascript Function

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

Code:

---

<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

Code:

---

<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

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.

OK I've figured that, I made the function

Code:

---

<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

Code:

---

<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 :@

Code:

---

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

---

PHP Code:

---

<?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.

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

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

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

Quote:

---

Originally Posted by 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

---

Like this then?

PHP Code:

---

<?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

Doesnt work if i put it in a function

Quote:

---

Originally Posted by PureG

Like this then?

PHP Code:

---

<?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 Code:

---

<?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>' );
?>

---

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

PHP Code:

---

$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

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

Code:

---

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.

Code:

---

<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 :)

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.

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

Code:

---

$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

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 =

PHP Code:

---

<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.targetobj.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.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-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

Code:

---

<img id="id-7" src="jamesisgreat.jpg" class="drag">

---

Save.php, this should be updated tbh.

PHP Code:

---

<?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

PHP Code:

---

$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.