Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question jQuery Sortable List Update Problem

    Hi guys,

    I have an issue that I hope you can help me with...

    I have created a jQuery ".sortable" list that works great but for some reason the "update" function wont work

    Here is the code I am using:

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#test-list").sortable({handle : '.handle', update : function () {var homepageorder = $('#test-list').sortable('serialize');$("#testinfo").load("process-sortable.php?"+homepageorder);}
       });
    });
    Does anyone have any idea why the update function isn't running as I just cant figure it out!

    Thanks in advance for your support.

    Cheers
    Reedy

  • #2
    New Coder
    Join Date
    Dec 2011
    Location
    San Francisco, CA
    Posts
    24
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Code:
    <html>
    <head>
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#testlist").sortable(
        {
            //handle : '.handle',
            update : function ()
            {
                alert('update ok');
                //var homepageorder = $('#test-list').sortable('serialize');
                //$("#testinfo").load("process-sortable.php?"+homepageorder);
            }
        });
    });
    </script>
    </head>
    <body>
    <ul id = "testlist" class = "sortable ui-sortable">
    <div>abc</div>
    <div>abc2</div>
    <div>abc3</div>
    <div>abc4</div>
    </ul>
    </body>
    </html>
    Remove lines in red,

    and go from there

    Here is a live demo that shows it works: http://www.authenticsociety.com/demo.html
    Last edited by html-tutorials; 12-17-2011 at 01:34 AM.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well in your code you have referenced #test-list and #testinfo, both of which do nt exist on your page.

    oh and your using div's instead of li's in your list. and they don't have id's which is apparently needed for the serialize function. your homepageorder string is probabaly not coming out the way you expect it to.


    from the api:

    Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

    It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number".

    You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp).

    If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.
    Last edited by DanInMa; 12-17-2011 at 02:43 AM.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again,

    I don't think I explained my problem well enough and I didnt include enough of my code...

    When I use the code as a standalone script it works fine but when I add it to my WordPress website it stops saving to the database.

    I have since realised that where the problem is but I don't know what the problem is

    I have highlighted in "red" where the problem is:

    Main Code:
    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript">
    var $j = jQuery.noConflict();
    
    $j(document).ready(function() {
      $j("#test-list").sortable({
        handle : '.handle',
        update : function () {
         var homepageorder = $j('#test-list').sortable('serialize');
          alert('variable is: ' + homepageorder + '');
           $j("#test-info").load("process-sortable.php?"+homepageorder);
        }
      });
    });
    </script>
    
    <pre>
    <div id="test-info">Waiting for update</div>
    </pre>
    <ul id="test-list">
      <li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1 </strong></li>
      <li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 2</strong></li>
      <li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 3</strong></li>
      <li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 4</strong></li>
    </ul>
    process-sortable.php
    Code:
    <?php
    $dbhost							= "*********";
    $dbuser							= "*********";
    $dbpass							= "*********";
    $dbname							= "*********";
    
    $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to mysql");
    mysql_select_db($dbname);
    
    foreach ($_GET['listItem'] as $position => $item) :
    	$query = "UPDATE `homepageorder` SET `position` = $position WHERE `id` = $item";
    	mysql_query($query) or die('Error, insert query failed');
    	$sql[] = "UPDATE `homepageorder` SET `position` = $position WHERE `id` = $item";
    endforeach;
    
    print_r ($sql);
    ?>
    I know that this code wont reorder the list as I am not retrieving the order from the database but it should update the database fields and it isnt.

    All I can figure out is that there is a problem somewhere between the "update" function and the "process-sortable.php" file as everything else works and I even get the alert showing the new variable order so I know the update function is running.

    Thanks again for any help you can give me.
    Last edited by Reedy; 12-17-2011 at 12:52 PM. Reason: Updating Code

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have managed to sort this problem on my own, thanks anyway.
    Last edited by Reedy; 12-19-2011 at 07:25 PM. Reason: Problem is sorted


  •  

    Tags for this Thread

    Posting Permissions

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