scipt.aculo.us Drag & Drop and Fire Fox Question

Discussion in 'JavaScript' started by cesarcesar, Apr 16, 2007.

  1. #1
    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>
    
    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, Apr 16, 2007 IP
  2. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #2
    it's simply because gecko and IE have different methods for accessing the values of checkbox objects, use a different input type, like a normal hidden text input, or alternatively write something in to detect which browser you are being visited with and use the appropriate method.......
     
    krakjoe, Apr 17, 2007 IP
  3. cesarcesar

    cesarcesar Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for the advise. i do though, not understand, how to use a hidden input instead of a check box. How does the use select the hidden fields to send via POST?
     
    cesarcesar, Apr 17, 2007 IP
  4. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #4
    can I see the code run ??
     
    krakjoe, Apr 17, 2007 IP
  5. cesarcesar

    cesarcesar Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    cesarcesar, Apr 17, 2007 IP