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 9 of 9
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question JQuery drag & drop issue

    Hello,

    I've setup a drag and drop script ( http://jqueryui.com/sortable/#portlets ) to set the order of images displayed on a page.

    the issue is that after I finish moving the items to the order I want them in, any items that were moved loose they're input values when I submit the changes.

    for example;
    PHP Code:
    <div id='ImageBlock_1' class='ImageBox'>
    <
    label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='http://www.allaxess.com/wp-content/uploads/2011/09/gibson-pic1.jpg' />
    Use 
    Image<br /><img src='http://www.allaxess.com/wp-content/uploads/2011/09/gibson-pic1.jpg' width='150' id='1' />
    </
    label
    each checkbox has an image url set in the value. if I don't rearrange the boxes then the URL stay intact, however if they are moved, only the first URL appears in the submitted array.

    any ideas?
    Last edited by angst; 12-19-2012 at 05:15 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,899
    Thanks
    56
    Thanked 541 Times in 538 Posts
    we might need to see you entire code, or at least the relevant bits

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    this is the drag & drop script;

    PHP Code:
            $(function() {
                $( 
    ".column" ).sortable({
                    
    connectWith".column"
                
    });
         
                $( 
    ".portlet" ).addClass"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                    .
    find".portlet-header" )
                        .
    addClass"ui-widget-header ui-corner-all" )
                        .
    prepend"<span class='ui-icon ui-icon-minusthick'></span>")
                        .
    end()
                    .
    find".portlet-content" );
         
                $( 
    ".portlet-header .ui-icon" ).click(function() {
                    $( 
    this ).toggleClass"ui-icon-minusthick" ).toggleClass"ui-icon-plusthick" );
                    $( 
    this ).parents".portlet:first" ).find".portlet-content" ).toggle();
                });
         
                $( 
    ".column" ).disableSelection();
            }); 
    and this is what i'm using to check the array;

    PHP Code:
    echo "<pre>";print_r($SelectedImageArray);echo "</pre>"; exit; 
    this is the movable boxes, there would be aleast 3-4 of them;

    PHP Code:
    <div id='ImageBlock_1' class='ImageBox'>
    <
    label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='http://www.allaxess.com/wp-content/uploads/2011/09/gibson-pic1.jpg' />
    Use 
    Image<br /><img src='http://www.allaxess.com/wp-content/uploads/2011/09/gibson-pic1.jpg' width='150' id='1' />
    </
    label
    and they are wrapped in a form tag.

  • #4
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    this is all of the javascript;

    PHP Code:
    function HideDivs(){
        if(
    CountSelectedImages() > 1){

            
    // hide all divs not selected.
            
    var divs=document.getElementsByTagName("div")
            for (var 
    3divs.lengthi++) { // skip first 3
                
    divs[i].style.display=divs[i].children[0].children[0].checked?"block":"none";
            }

            $(
    ".DragDropNotice").text("Drag and Drop images to set display order."); // display notice
            
    $('input:checkbox').hide(); // hide all checkboxes after selection

            
    $(function() {
                $( 
    ".column" ).sortable({
                    
    connectWith".column"
                
    });
         
                $( 
    ".portlet" ).addClass"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                    .
    find".portlet-header" )
                        .
    addClass"ui-widget-header ui-corner-all" )
                        .
    prepend"<span class='ui-icon ui-icon-minusthick'></span>")
                        .
    end()
                    .
    find".portlet-content" );
         
                $( 
    ".portlet-header .ui-icon" ).click(function() {
                    $( 
    this ).toggleClass"ui-icon-minusthick" ).toggleClass"ui-icon-plusthick" );
                    $( 
    this ).parents".portlet:first" ).find".portlet-content" ).toggle();
                });
         
                $( 
    ".column" ).disableSelection();
            });

        } else {

            
    alert("You must select atleast one image to continue.");

        }


  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    $(function() {
    identifies code that should be run once the page is loaded. It should not be nested within a function (HideDivs) as it will not be executed after page-load.

    All ids must be unique on the page - you appear to be giving the 3-4 elements the same id.

    And your code indicates you have an unclosed div.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    thats not correct. firstly I don't need "$(function()", nested in a javascript function is fine, I don't need it to load on page load. I could use ".click()" if I wanted, but the current function will do fine. second duplicate ids are fine for my purposes and do not effect the PHP form collection. lastly, the closing div tag is just not in the snippet.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    firstly I don't need "$(function()", nested in a javascript function is fine, I don't need it to load on page load. I could use ".click()" if I wanted, but the current function will do fine.
    Yes I agree, the "$(function()" part of your code will execute fine, but it's totally useless inside of a function that should itself only be run after page load. You could just omit the "$(function()" wrapper.

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by angst View Post
    thats not correct. firstly I don't need "$(function()", nested in a javascript function is fine, I don't need it to load on page load. I could use ".click()" if I wanted, but the current function will do fine. second duplicate ids are fine for my purposes and do not effect the PHP form collection. lastly, the closing div tag is just not in the snippet.
    Re the div, this is why I stated "your code indicates..", just in case you hadn't included it. But you obviously don't need my help.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    Quote Originally Posted by AndrewGSW View Post
    Re the div, this is why I stated "your code indicates..", just in case you hadn't included it. But you obviously don't need my help.
    well you haven't actually offered any help in regards to my posted issue. so obviously I'm not missing out on anything from you. maybe if you focused a little more on the issue at hand instead of trying to bring up your post count it might be a little more helpfully.


  •  

    Posting Permissions

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