script.aculo.us Drag & Drop and Fire Fox Question - dropping checkboxes

[empiresolutions]

Hello Fellow Developers,

I am using the awesome drag and drop script found at http://script.aculo.us/. I have also added a modification that interacts to a db for reordering upon release of a dragable item. Within each dragable is a input checkbox. This checkbox holds a DB id value that is sent on submit. This process works fine in IE, but in FF the checkbox values dont get sent via GET, or POST. How do i get FF to react as i think it should, and IE does. Heres a little bit of code from the project beyond the standard script.aculo.us library. Thanks,

Interface Script

<?php /*   needed for IE   */ ?>
<div id="page">
    <div id="sale_row" class="section">
        <div id="item_1" class="lineitem" style="cursor: move;">example 1 <input type="checkbox" name="check_value[]" value="example1"></div>
        <div id="item_2" class="lineitem" style="cursor: move;">example 2 <input type="checkbox" name="check_value[]" value="example2"></div>
    </div>
</div>
 
<?php /*   set JS outside *page* div   */ ?>
<script type="text/javascript">
    // <![CDATA[
    sections = ['sale_row'];
 
    <?php /*   this watches for event changes like drag and drop action   */ ?>
    Event.observe(window,'load',init,false);
    function init() {
 
        <?php /*   add a sortable.create for each group level div   */ ?>
        Sortable.create('sale_row',{tag:'div', dropOnEmpty:true, containment:sections, only:'lineitem', onUpdate:updateData});
    }
 
    Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
    // ]]>
</script>
 

*Javasript* that formats and sends url to ajax db update page. When chekbox vars "params" are sent this works perfectly.

function updateData() {
    var params = '';
    var sections = document.getElementsByClassName('section');
    sections.each(function(section) {
        params = Sortable.serialize(section.id);
        var ajax = new Ajax.Request(page_url,{
            method: 'post',
            parameters: params
        });
    });
}
 

[iam_clint]

I'm not sure why firefox isn't taking this... I haven't seen any problems with checkboxes in forms on firefox before.

[acoder]

Try giving the checkboxes ids and accessing them using getElementById.

[empiresolutions]

I am using the drag and drop script found here, http://script.aculo.us/. Yes i know its a hog. Anyways, i am using the script pretty much out the box with link in the sortable div. My issue is that when clicking on a link, if you at all move the mouse, its sorts to the direction you ever so slightly moved. This is driving me nuts. I have tried to add pausing functions here and there trying to create a couple millisecond pause before dragging so the click can take effect, but i have had no luck.

Can anyone suggest a way to alter the script, so that if i click on the link in the div, it wont drag before the href is called. Thanks. Here's my example code.

<div id="page">
 
    <?php /*   div sits in a TD cell. div ID can be anything alphanumeric. HTML inside DIV is ok.  */ ?>
    <div id="group" class="section">
        <h3 class="handle">Group 1</h3>
 
        <?php /*   div ID can be anything alphanumeric, after *item_*. HTML inside DIV is ok.  */ ?>
        <div id="item_1" class="lineitem"><a href="index.php">Item 1</a></div>
        <div id="item_2" class="lineitem"><a href="index.php">Item 2</a></div>
        <div id="item_3" class="lineitem"><a href="index.php">Item 3</a></div>
        <div id="item_4" class="lineitem"><a href="index.php">Item 4</a></div>
        <div id="item_5" class="lineitem"><a href="index.php">Item 5</a></div>
    </div>
</div>
 
<script type="text/javascript">
    // <![CDATA[
 
    /*   add each ID from group level div.   */
    sections = ['group'];
 
    /*   this watches for event changes like drag and drop action   */
    Event.observe(window,'load',init,false);
    function init() {
 
        /*   add a sortable.create for each group level div   */
        Sortable.create('group',{tag:'div', dropOnEmpty: true, containment: sections, only:'lineitem'});
    }
 
    /*   add sortable.create for *page* div   */
    Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
    // ]]>
</script>
 

[empiresolutions]

I am using the awesome drag and drop script found at http://script.aculo.us/. Its a hog, but has lots of features. I have also added a modification that interacts to a db for reordering upon release of a dragable item. Within each dragable is a input checkbox. This checkbox holds a DB id value that is sent on submit. This process works fine in IE, but in FF the checkbox values dont get sent via GET, or POST. How do i get FF to react as i think it should, as IE does.

Just to clarify, If a row is dragged, that row's checkbox will not be sent in the POST vars. It reacts as if not checked. I need all checked boxes to POST. I have has some help on this here, http://www.webdeveloper.com/forum/showthread.php?p=745951#post745951.
I think the quy has a good idea of the direction but its not correct.

Heres a little bit of code from the project beyond the standard script.aculo.us library. Thanks,

Interface Script

<?php /*   needed for IE   */ ?>
<div id="page">
    <div id="sale_row" class="section">
        <div id="item_1" class="lineitem" style="cursor: move;">example 1 <input type="checkbox" name="check_value[]" value="example1"></div>
        <div id="item_2" class="lineitem" style="cursor: move;">example 2 <input type="checkbox" name="check_value[]" value="example2"></div>
    </div>
</div>
 
<?php /*   set JS outside *page* div   */ ?>
<script type="text/javascript">
    // <![CDATA[
    sections = ['sale_row'];
 
    <?php /*   this watches for event changes like drag and drop action   */ ?>
    Event.observe(window,'load',init,false);
    function init() {
 
        <?php /*   add a sortable.create for each group level div   */ ?>
        Sortable.create('sale_row',{tag:'div', dropOnEmpty:true, containment:sections, only:'lineitem', onUpdate:updateData});
    }
 
    Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
    // ]]>
</script>
 

*Javasript* that formats and sends url to ajax db update page. When chekbox vars "params" are sent this works perfectly.

function updateData() {
    var params = '';
    var sections = document.getElementsByClassName('section');
    sections.each(function(section) {
        params = Sortable.serialize(section.id);
        var ajax = new Ajax.Request(page_url,{
            method: 'post',
            parameters: params
        });
    });
}
 

[pbmods]

Just a thought, but I'm thinking once you change the position of a checkbox, it is no longer considered a child of the parent form.

To test this, I would create a bunch of hidden inputs in the form and make those the values that get submitted. Then set up an onclick handler for each of the checkboxes that changes the value of its paired hidden input.