CodingForums.com - JQuery drag & drop issue

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - JQuery drag & drop issue (http://www.codingforums.com/showthread.php?t=284413)

angst

12-19-2012 05:12 PM

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?

xelawho

12-19-2012 05:47 PM

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

angst

12-19-2012 05:50 PM

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

12-19-2012 05:55 PM

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

12-19-2012 06:47 PM

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.

angst

12-20-2012 02:46 AM

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

12-20-2012 07:43 AM

Quote:

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

12-20-2012 12:10 PM

Quote:

Originally Posted by angst (Post 1301170)

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

12-20-2012 02:14 PM

Quote:

Originally Posted by AndrewGSW (Post 1301284)

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.

All times are GMT +1. The time now is 10:23 AM.