JQuery drag & drop issue

[angst]

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?

[xelawho]

we might need to see you entire code, or at least the relevant bits

[angst]

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.

[angst]

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 i = 3; i < divs.length; i++) { // 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.");

    }
} 


[AndrewGSW]

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

[angst]

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.

[devnull69]

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.

[AndrewGSW]

Originally Posted by angst

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.

[angst]

Originally Posted by AndrewGSW

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.