Help! I'm still very, very lost. After a lot of help, I was able to figure how to trigger a row add before an existing row, move a row without firing off a bound 'click' and a few other things. Here's the issue: I need this list to refresh the id's, no matter what action I take. When I remove a row, it works fine but adding a row, moving a row OR moving a row and then adding one above it are all fouled up.
Code:
<script type="text/javascript">
var mlo, item_positions, numAdded, rowNo;
$(function() {
mlo = $('#ml_organize');
mlo
.sortable({
placeholder: 'ui-state-highlight',
cursor: 'pointer',
update: function() {
$(this).sortable('refreshPostions');
item_positions = $(this).sortable('toArray');
}
})
.find('span.ui-icon-plusthick')
.click(addMlRow);
mlo
.disableSelection();
mlo
.find('span.ui-icon-minusthick')
.click(function() {
rowNo = ($(this).parent().index()) + 1;
$(this).parent().remove();
var strURL = "rePosMinus.php";
$.get(strURL, {ml_id:<?=$ml_id;?>, pos:rowNo, hText:''});
// item_positions = mlo.sortable('toArray').toString();
// $('#position_report').html(item_positions);
});
mlo
.find('input')
.focus(function() {
$(this).css('background','#DDD');
});
mlo
.find('input')
.blur(function() {
rowNo = ($(this).parent().index()) + 1;
$(this).css('background','#FFF');
var hdrText = $(this).val().toUpperCase();
var strURL = "rePosPlus.php";
$.get(strURL, {ml_id:<?=$ml_id;?>, pos:rowNo, hText:hdrText});
})
.focus();
item_positions = mlo.sortable('toArray');
$('#org_submit')
.click(function() {
item_positions = mlo.sortable('toArray');
var strURL = "rePosEnd.php";
$.get(strURL, {ml_id:<?=$ml_id;?>, positions:item_positions});
// $('#position_report').html(item_positions);
})
.button();
});
function addMlRow() {
mlo = $('#ml_organize');
var that = $(this).parent();
var rowNo = that.index() + 1;
$('<li id="' + rowNo + '" class="ui-state-default"><span class="icon ui-icon ui-icon-minusthick" title="Remove header line"></span><span class="note">HL</span><input class="header_line" maxlength="75" type="text" /></li>')
.insertBefore(that)
.find('span.ui-icon-minusthick')
.click(function() {
$(this).parent().remove();
var strURL = "rePosMinus.php";
$.get(strURL, {ml_id:<?=$ml_id;?>, pos:rowNo, hText:''});
})
.end()
.find('input')
.focus(function() {
$(this).css('background','#DDD');
})
.blur(function() {
$(this).css('background','#FFF');
var hdrText = $(this).val().toUpperCase();
var strURL = "rePosPlus.php";
$.get(strURL, {ml_id:<?=$ml_id;?>, pos:rowNo, hText:hdrText});
})
.focus();
$('#ml_organize li:gt(rowNo + 1)')
.each(function() {
var newID = ($(this).attr('id') + 1);
$(this).attr('id',newID);
item_positions = mlo.sortable('toArray').toString();
$('#postion_report').html(item_positions);
});
}
</script>
HTML of original list as it first appears in the UL:
<ul id="ml_organize">
<li id="1" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">4</span><span class="org_partno">ICS775</span><span class="org_desc">INSUL CABLE RACK 1.5"STG 7.75"</span></li>
<li id="2" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">601343874</span><span class="org_desc">UNI-STRUT KIT - ED8C509-50 G9 EQUIVALENT</span></li>
<li id="3" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">AFC2202DG</span><span class="org_desc">AUX CHANNEL, 4¿</span></li>
<li id="4" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">FBM26CB</span><span class="org_desc">FLR BASE MLDINGX26" (CB VINYL)</span></li>
<li id="5" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">RFCH702</span><span class="org_desc">HEAVY HARDWARES(PAIR) 2.0" STGR</span></li>
<li id="6" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESD1080740001</span><span class="org_desc">ESD BANANA JACK</span></li>
<li id="7" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">CJB6302C</span><span class="org_desc">CLIP J-BOLT ASSM FOR 2"CR/FC</span></li>
<li id="8" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">TR53</span><span class="org_desc">5/8-11 THREADED ROD X 24.0"</span></li>
<li id="9" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">SAF2502</span><span class="org_desc">FRAMING CLIP ASSM AUX CHNL 5/8</span></li>
<li id="10" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESDLABEL</span><span class="org_desc">GREEN .75" X 1.75" ESD LABEL</span></li>
<li id="11" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESDSTRAP</span><span class="org_desc">ADJ ELASTIC 63070</span></li>
<li id="12" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">MAS-NTWKBAYKIT</span><span class="org_desc">FLOOR MNTG HARDWARE KIT (NTWK)</span></li>
</ul>
I need to be able to submit this list when it has been organized so that it can later be queried from the database in positional order.