I am trying to move the .draggable div up and down, bypassing the .operator div. If you try to move #tb2 up, it will switch with #tb1 and skip over the .operator select.
The script.
$('#btAdd').click(function() {
//increase count
iCnt = iCnt + 1;
//var to remove item
var rmiCnt = 'tb' + iCnt;
//html for each segment
$('#segment-container').append('<div id="' + rmiCnt + '" class="draggable"><div class="two-thirds first"><input type="text" value="" name="name" placeholder="Segment ' + iCnt + '" /></div><div class="one-third right"><a class="arrow up" href="javascript:void(0)" onclick="move_up(\'' + rmiCnt +'\', \'' + iCnt +'\')" title="Move Up One"><i class="fa fa-caret-up"></i></a><a class="arrow down" href="javascript:void(0)" title="Move Down One" onclick="move_down(\'' + rmiCnt +'\', \'' + iCnt +'\')"><i class="fa fa-caret-down"></i></a><div class="clearfix"></div></div></div>');
$('.draggable + .draggable').before($('<div class="operator"><div class="one-third first"><label for="fetch_list">Operator</label></div><div class="two-thirds"><select name="fetch_list"><option value="Merge">Merge</option><option value="Merge Dedupe">Merge Dedupe</option><option value="Supress">Supress</option></select></div></div>'));
});
//move position of segments up
window.move_up = function(outterid, count) {
var $node = $("div#" + outterid);
$node.prev().before($node);
};
This is what the rendered HTML looks like for reference.
<a href="javascript:void(0)" title="Add Item" id="btAdd">Add Item</a>
<div class="droppable" id="segment-container">
<div class="draggable" id="tb1">
<div class="two-thirds first">
<input type="text" placeholder="Segment 1" name="name" value="">
</div>
<div class="one-third right"><a title="Move Up One" onclick="move_up('tb1', '1')" href="javascript:void(0)" class="arrow up"><i class="fa fa-caret-up"></i></a><a onclick="move_down('tb1', '1')" title="Move Down One" href="javascript:void(0)" class="arrow down"><i class="fa fa-caret-down"></i></a>
<div class="clearfix"> </div>
</div>
</div>
<div class="operator">
<div class="one-third first">
<label for="show_options">Operator</label>
</div>
<div class="two-thirds">
<select name="show_options">
<option value="Opt_one">Opt_one</option>
<option value="Opt_two">Opt_two</option>
<option value="Opt_three">Opt_three</option>
</select>
</div>
</div>
<div class="draggable" id="tb2">
<div class="two-thirds first">
<input type="text" placeholder="Segment 2" name="name" value="">
</div>
<div class="one-third right"><a title="Move Up One" onclick="move_up('tb2', '2')" href="javascript:void(0)" class="arrow up"><i class="fa fa-caret-up"></i></a><a onclick="move_down('tb2', '2')" title="Move Down One" href="javascript:void(0)" class="arrow down"><i class="fa fa-caret-down"></i></a>
<div class="clearfix"> </div>
</div>
</div>
<div class="operator">
<div class="one-third first">
<label for="show_options">Operator</label>
</div>
<div class="two-thirds">
<select name="show_options">
<option value="Opt_one">Opt_one</option>
<option value="Opt_two">Opt_two</option>
<option value="Opt_three">Opt_three</option>
</select>
</div>
</div>
<div class="draggable" id="tb3">
<div class="two-thirds first">
<input type="text" placeholder="Segment 3" name="name" value="">
</div>
<div class="one-third right"><a title="Move Up One" onclick="move_up('tb3', '3')" href="javascript:void(0)" class="arrow up"><i class="fa fa-caret-up"></i></a><a onclick="move_down('tb3', '3')" title="Move Down One" href="javascript:void(0)" class="arrow down"><i class="fa fa-caret-down"></i></a>
<div class="clearfix"> </div>
</div>
</div>
</div>
I have tried setting a class of .draggable on the prev() but it doesn't do anything. Any help would be awesome! Thanks!
I worked out a solution but its not pretty.
window.move_up = function(outterid, count) {
//get the id of the current item
var $node = $("#" + outterid);
//remove the operator above the section to move up
$node.prev().remove('.operator');
//move the section above the previous one
$node.prev().before($node);
//add the operator back in
append_operator();
};
Moved the appending of the operator to a function.
function append_operator() {
$('.draggable + .draggable').before($('<div class="operator"><div class="one-third first"><label for="fetch_list">Operator</label></div><div class="two-thirds"><select name="fetch_list"><option value="Merge">Merge</option><option value="Merge Dedupe">Merge Dedupe</option><option value="Supress">Supress</option></select></div></div>'));
}
Its far from elegant but it works. Hope this helps someone. =)
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I want to call a function to show and modify content like this:
One of the select drop downs for my application has a huge number of items,to the point it's causing a slight delay on page load
I have issue with ajax responseMy test php file content looks like: