Javascript Function

Protege · 11-05-2008, 05:53 PM

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

Robbie · 11-05-2008, 06:25 PM

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

Protege · 11-05-2008, 06:45 PM

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 · 12-05-2008, 04:39 PM

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

Protege · 14-05-2008, 07:43 AM

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.

Thread: Javascript Function

Thread Tools

Hmmms

Posting Permissions