Drag n Drop.... dropping checkbox

Discussion in 'JavaScript' started by cesarcesar, May 20, 2007.

  1. #1
    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>
    
    Code (markup):
    *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
    		});
    	});
    }
    
    Code (markup):

     
    cesarcesar, May 20, 2007 IP