SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drag and drop reorganizing works! But how can I save the item order to my DB?

    I'm using a script I found that allows me to create lists that can be reorganized by dragging and dropping the list items (http://tool-man.org/examples/sorting.html)

    After the items are reorganized I can click a button underneath wich pops up an alert box showing the current order of the list items (5|3|4|1|2).

    I need some help altering the javascript code so that when this button is pressed it instead calls a php function which saves the order of the items to a MYSQL database.

    The button's code is:
    <input class="inspector" type="button" value="Inspect" onclick="junkdrawer.inspectListOrder('phoneticlong')"/>

    And I believe these are the relavent javascript functions that would need to be altered:

    ToolMan._junkdrawer = {
    serializeList : function(list) {
    var items = list.getElementsByTagName("li")
    var array = new Array()
    for (var i = 0, n = items.length; i < n; i++) {
    var item = items[i]

    array.push(ToolMan.junkdrawer()._identifier(item))
    }
    return array.join('|')
    },


    inspectListOrder : function(id) {
    alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
    },


    _identifier : function(item) {
    var trim = ToolMan.junkdrawer().trim
    var identifier

    identifier = trim(item.getAttribute("id"))
    if (identifier != null && identifier.length > 0) return identifier;

    identifier = trim(item.getAttribute("itemID"))
    if (identifier != null && identifier.length > 0) return identifier;

    // FIXME: strip out special chars or make this an MD5 hash or something
    return trim(item.innerHTML)
    },


    Any help would be greatly appreciated!

  2. #2
    SitePoint Zealot glowdot's Avatar
    Join Date
    Jun 2007
    Location
    Santa Monica, CA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So now you need to do some AJAX. Look at Prototype: http://www.prototypejs.org/ which will allow you to make the call to your PHP script.
    Advertise on Glowfoto
    banners as low as $25/month, text ads $10/month
    Share 10 million impressions per month!

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could anyone provide a bit more help with passing info from the javascript functions I posted above to a php function that saves the order to my database. It doesn't need to be ajax, it could just redirect to a php page and pass the order variables over to it if that's easier. I just don't completely understand the javascript code im using... Thanks!

  4. #4
    SitePoint Zealot glowdot's Avatar
    Join Date
    Jun 2007
    Location
    Santa Monica, CA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to post the info to another script, you will need to have a form with a bunch of hidden elements. Use the output from your sorting function to populate the hidden field(s) and then post that to the script.

    Just use JavaScript to update the value of the hidden field or fields once you get the order string.
    Advertise on Glowfoto
    banners as low as $25/month, text ads $10/month
    Share 10 million impressions per month!

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    453
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1.) Use a session variable to hold the array. Use session.setAttribute(name, value) to store the array.
    2.) Go to a form handler page, you can use a javascript function that opens a Url which contains a form handler script.
    3 Reorder the array with php.
    PHP Code:
    $reordered_r = array();
    $tmp $_SESSION['Order_array'];
    $i 0;

    foreach( 
    $tmp as $K => $V ) {
        
    $reordered_r[$i] = $V;
        
    $i++;
    }

    $_SESSION['Order_array'] =& $reordered_r;
    header("Location:Where_ever_I_came_from.php"); 
    Computers and Fire ...
    In the hands of the inexperienced or uneducated,
    the results can be disastrous.
    While the professional can tame, master even conquer.

  6. #6
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how would i be able to do that with this script

    http://www.dhtmlgoodies.com/index.ht...rrange-nodes-2

    sorry for stealing the thread

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by franco714 View Post
    how would i be able to do that with this script

    http://www.dhtmlgoodies.com/index.ht...rrange-nodes-2

    sorry for stealing the thread
    Yeah, that looks like a good script. If anyone can help us use that script to save the order to a MYSQL database that would be great. I don't understand the last part of the instructions, the part about putting the string into a hidden field. And then also how would I pass the hidden field value to a php function that would insert them into the DB?

    Thanks,
    Gabe

  8. #8
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?

  9. #9
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi guys,
    in the script there are some instructions on saving to a database:
    /* The saveData function creates a string containing the ids of your dragable elements.

    The format of this string is as follow

    id of item 1;id of item 2;id of item 3

    i.e. a semi colon separated list. The id is something you put in as "id" attribute of your dragable elements.

    */

    function saveData()
    {
    var saveString = "";
    for(var no=0;no<dragableObjectArray.length;no++){
    if(saveString.length>0)saveString = saveString + ';';
    ref = dragableObjectArray[no];
    saveString = saveString + ref['obj'].id;
    }

    alert(saveString); // For demo only

    /* Put this item into a hidden form field and then submit the form

    example:

    document.forms[0].itemOrder.value = saveString;
    document.forms[0].submit;

    On the server explode the values by use of server side script. Then update your database with the new item order

    */
    What this basically suggests is that you have a hidden field, so you would have something like
    PHP Code:
        <!-- END DRAGABLE CONTENT -->
        <
    form name="myForm" action="" method="post">
        <
    input type="hidden" name="listhere" />
        <
    input type="submit" value="Save" onclick="saveData();">
        </
    form
    at the bottom.
    and change the javascript saveData function to:
    Code:
    function saveData()
    	{
    		var saveString = "";
    		for(var no=0;no<dragableObjectArray.length;no++){
    			if(saveString.length>0)saveString = saveString + ';';
    			ref = dragableObjectArray[no];
    			saveString = saveString + ref['obj'].id;
    		}	
    		
    		// alert(saveString);	// For demo only
    		document.forms[0].listhere.value = saveString;
    		document.forms[0].submit;
    		/* 	Put this item into a hidden form field and then submit the form 
    		On the server explode the values by use of server side script. Then update your database with the new item order
    		*/
    		
    		
    		
    	}
    This collects the script output and sends it through the post array in a comma delimited format.

    Then on the server side, explode the data using explode(";", $_POST['listhere']); to get the values you can then use to update your database.

    Hope that made sense, if you want me to post the full script I will.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  10. #10
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i got it, thank bro


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •