how to swap the elements before Removing them without the use of a clone using jquery
I created the video call app for using picture in picture mode that was working properly but I have a small issue when I click to swap the video that working properly, after swapping when I want to remove some video they are not working properly.
JsFile
/* swaping the videoElement */
function initVideoSwapping() {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0 && $('.mainVideo').length > 0) {
$('.video-list .videoWrap').on('click', function () {
/* stopEvent Propogation */
var $this = $(this);
console.log($this)
$this.data('clicked', true);
initRemoveSwap()
var IsadminTrue = getDataFromQueryString()
if (IsadminTrue.isadmin) {
var $StopthisDrop = $(this).find('#DropDown')[0];
$StopthisDrop.addEventListener('click', (e) => {
e.stopImmediatePropagation()
})
var $StopthisBtn = $(this).find('button')[0];
$StopthisBtn.addEventListener('click', (e) => {
e.stopImmediatePropagation()
})
}
// name
var $thisName = $(this).find('span')[0]
var $mainName = $('.main-videoWrap').find('span')[0]
// dropdown
var $thisBtn = $(this).find('button')[0];
var $mainbtn = $('.main-videoWrap').find('button')[0];
var $thisUlElement = $(this).find('ul')[0];
var $mainUlElement = $('.main-videoWrap').find('ul')[0];
// video
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.main-videoWrap').find('video')[0];
swapNodes($thisVideo, $mainVideo, $thisName, $mainName, $thisBtn, $mainbtn, IsadminTrue, $thisUlElement, $mainUlElement);
});
}
}
function swapNodes(thisVideo, mainVideo, thisName, mainName, thisBtn, mainbtn, thisUlelement, mainUlElement) {
var thisVideoparent = thisVideo.parentNode;
var asibling = thisVideo.nextSibling === mainVideo ? thisVideo : thisVideo.nextSibling;
mainVideo.parentNode.insertBefore(thisVideo, mainVideo);
thisVideoparent.insertBefore(mainVideo, asibling);
// Name Change
var thisNameParent = thisName.parentNode;
var Namesiblings = thisName.nextSibling === mainName ? thisName : thisName.nextSibling;
mainName.parentNode.insertBefore(thisName, mainName);
thisNameParent.insertBefore(mainName, Namesiblings);
// dropdown change
var BtnParanet = thisBtn.parentNode;
var Btniblings = thisBtn.nextSibling === mainbtn ? thisBtn : thisBtn.nextSibling;
mainbtn.parentNode.insertBefore(thisBtn, mainbtn);
BtnParanet.insertBefore(mainbtn, Btniblings);
// ulElement Change
var UlParanet = thisUlelement.parentNode;
var ULSiblings = thisUlelement.nextSibling === mainUlElement ? thisUlelement : thisUlelement.nextSibling;
mainUlElement.parentNode.insertBefore(thisUlelement, mainUlElement);
UlParanet.insertBefore(mainUlElement, ULSiblings);
}
var asibling = thisVideo.nextSibling === mainVideo ? thisVideo : thisVideo.nextSibling;
mainVideo.parentNode.insertBefore(thisVideo, mainVideo);
thisVideoparent.insertBefore(mainVideo, asibling);
// Name Change
var thisNameParent = thisName.parentNode;
var Namesiblings = thisName.nextSibling === mainName ? thisName : thisName.nextSibling;
mainName.parentNode.insertBefore(thisName, mainName);
thisNameParent.insertBefore(mainName, Namesiblings);
// if (IsadminTrue.isadmin) {
var BtnParanet = thisBtn.parentNode;
var Btniblings = thisBtn.nextSibling === mainbtn ? thisBtn : thisBtn.nextSibling;
mainbtn.parentNode.insertBefore(thisBtn, mainbtn);
BtnParanet.insertBefore(mainbtn, Btniblings);
// ulElement Change
var UlParanet = thisUlelement.parentNode;
var ULSiblings = thisUlelement.nextSibling === mainUlElement ? thisUlelement : thisUlelement.nextSibling;
mainUlElement.parentNode.insertBefore(thisUlelement, mainUlElement);
UlParanet.insertBefore(mainUlElement, ULSiblings);
// }
}}
My Last Try was
function initRemoveSwap() {
var IsadminTrue = getDataFromQueryString()
if (IsadminTrue.isadmin) {
$('.video-list .videoWrap').on('remove', function () {
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.main-videoWrap').find('video')[0];
// name
var $thisName = $(this).find('span')[0]
var $mainName = $('.main-videoWrap').find('span')[0]
// dropdown
var $thisBtn = $(this).find('button')[0];
var $mainbtn = $('.main-videoWrap').find('button')[0];
var $thisUlElement = $(this).find('ul')[0];
var $mainUlElement = $('.main-videoWrap').find('ul')[0];
RemoveswapNodes($mainVideo, $thisVideo, $thisName, $mainName, $thisBtn, $mainbtn, IsadminTrue, $thisUlElement, $mainUlElement);
})
}
function RemoveswapNodes(mainVideo, thisVideo, thisName, mainName, thisBtn, mainbtn, IsadminTrue, thisUlelement, mainUlElement) {
// videoChange
var thisVideoparent = thisVideo.parentNode;
var asibling = thisVideo.nextSibling === mainVideo ? thisVideo : thisVideo.nextSibling;
mainVideo.parentNode.insertBefore(thisVideo, mainVideo);
thisVideoparent.insertBefore(mainVideo, asibling);
// Name Change
var thisNameParent = thisName.parentNode;
var Namesiblings = thisName.nextSibling === mainName ? thisName : thisName.nextSibling;
mainName.parentNode.insertBefore(thisName, mainName);
thisNameParent.insertBefore(mainName, Namesiblings);
// if (IsadminTrue.isadmin) {
var BtnParanet = thisBtn.parentNode;
var Btniblings = thisBtn.nextSibling === mainbtn ? thisBtn : thisBtn.nextSibling;
mainbtn.parentNode.insertBefore(thisBtn, mainbtn);
BtnParanet.insertBefore(mainbtn, Btniblings);
// ulElement Change
var UlParanet = thisUlelement.parentNode;
var ULSiblings = thisUlelement.nextSibling === mainUlElement ? thisUlelement : thisUlelement.nextSibling;
mainUlElement.parentNode.insertBefore(thisUlelement, mainUlElement);
UlParanet.insertBefore(mainUlElement, ULSiblings);
// }
}
}
window.addEventListener('click', initVideoSwapping, false)
I've tried a lot of different ways to change items. I've tried with replaceWith(), before(), and after() but nothing worked.
NOTE: I've already written a function which displays the correct up / down DIVs. So the first and last one can only moved in one direction. That's already solved. I also can't use any kind of existing jQuery plugins.
Kindly Help to how to solve this issue!
I am trying following it selecting from only one datatable
selectFirstRow(window.document.forms["irsf-form"]);
i have id's for each table "test_config","uma","example".
i had tried
selectFirstRowInTable(document.getElementById("irsf-form:test_config"));
selectFirstRowInTable(document.getElementById("irsf-form:uma"));
selectFirstRowInTable(document.getElementById("irsf-form:example"));
I have Script in that
function selectFirstRowInTable(tableObj) {
var tbodyObj = tableObj.getElementsByTagName("tbody")[0];
var inputObjs = tbodyObj.getElementsByTagName("input");
var tempChild = null;
var firstRow=-1;
for(var i=0;i<inputObjs.length;++i) {
tempChild = inputObjs[i];
if(tempChild.type == 'radio') {
if ( firstRow < 0 ) {
firstRow = i;
tempChild.checked = true;
} else {
tempChild.checked = false;
}
}
}
}
Not getting the value by id when i try getElementById
<h:dataTable binding="#{iRSFConfigBean.table}" border="1" rowClasses="evenRows,oddRows" id="test_config" name = "test"
rules="all" headerClass="standardTableHeader" styleClass="standardTable" value="#{iRSFConfigBean.configList}" var="config">
Hope this code will help you:
$('table').find("tr:first")
What i wanted to do is access random property for example let1, let2 with their first string in array which is ID "1" , "2" , "3" , "4" , "5".
brojleta is actually that ID i mentioned before, it is different from id down there(var id = item[0][1]). What i need is to get all other strings based on their ID. I tried it like this :
var data = {
let1:[["1","2","10.2.2019.","11.2.2019.","Beograd Aerodrom","Amsterdam Aerodrom","30","12000"]],
let2:[["2","4","15.2.2019.","16.2.2019","Amsterdam Aerodrom","Rim Aerodrom","30","8000"]],
let3:[["3","6","25.2.2019.","28.2.2019.","Rim Aerodrom","Beograd Aerodrom","30","8000"]],
let4:[["4","8","13.2.2019.","14.2.2019.","Beograd Aerodrom","Moskva Aerodrom","30","13000"]],
let5:[["5","10","1.3.2019.","4.3.2019.","Beograd Aerodrom","New York Aerodrom","30","18000"]]
};
function getParamValue(brojleta) {
var location = decodeURI(window.location.toString());
var index = location.indexOf("?") + 1;
var subs = location.substring(index, location.length);
var splitted = subs.split("&");
for (i = 0; i < splitted.length; i++) {
var s = splitted[i].split("=");
var pName = s[0];
var pValue = s[1];
if (pName == brojleta) {
return pValue;
}
}
}
var brojleta = getParamValue("id");
var item = data.find(item => item[0][0] === brojleta);
var id = item[0][1]
var datumpolaska = item[0][2]
var datumdolaska = item[0][3]
var polazniaerodrom = item[0][4]
var dolazniaerodrom = item[0][5]
var brojsedista = item[0][6]
var cenakarte = item[0][7]
var data1 = data.let1[0];
var data2 = data.let2[0];
var data3 = data.let3[0];
var data4 = data.let4[0];
var data5 = data.let5[0];
/* this is the code for adding data from array to table */
$(document).ready(function(){
var row1cells = $("#row1 td");
var row2cells = $("#row2 td");
var row3cells = $("#row3 td");
var row4cells = $("#row4 td");
var row5cells = $("#row5 td");
for (var index=0; index<8; index++) {
$(row1cells[index]).html(data1[index]);
$(row2cells[index]).html(data2[index]);
$(row3cells[index]).html(data3[index]);
$(row4cells[index]).html(data4[index]);
$(row5cells[index]).html(data5[index]);
}
});
To make your code work you should choose variable data to be an array of arrays instead of an object. Then you can run var item = data.find(item => item[0] === brojleta); and similar operations.
It would look like this:
var data = [["1","2","10.2.2019.","11.2.2019.","Beograd Aerodrom","Amsterdam Aerodrom","30","12000"],
["2","4","15.2.2019.","16.2.2019","Amsterdam Aerodrom","Rim Aerodrom","30","8000"],
["3","6","25.2.2019.","28.2.2019.","Rim Aerodrom","Beograd Aerodrom","30","8000"],
["4","8","13.2.2019.","14.2.2019.","Beograd Aerodrom","Moskva Aerodrom","30","13000"],
["5","10","1.3.2019.","4.3.2019.","Beograd Aerodrom","New York Aerodrom","30","18000"]];
I think you really want this:
Remove the || 3 // test #3 after testing
Try removing the 3 from the input and click search too
var data = {
let1:[["1","2","10.2.2019.","11.2.2019.","Beograd Aerodrom","Amsterdam Aerodrom","30","12000"]],
let2:[["2","4","15.2.2019.","16.2.2019","Amsterdam Aerodrom","Rim Aerodrom","30","8000"]],
let3:[["3","6","25.2.2019.","28.2.2019.","Rim Aerodrom","Beograd Aerodrom","30","8000"]],
let4:[["4","8","13.2.2019.","14.2.2019.","Beograd Aerodrom","Moskva Aerodrom","30","13000"]],
let5:[["5","10","1.3.2019.","4.3.2019.","Beograd Aerodrom","New York Aerodrom","30","18000"]]
};
function getParamValue(brojleta) {
return new URLSearchParams(document.location.search.substring(1)).get(brojleta)
}
function show(item) {
$tr = $("<tr/>"), $tbd = $("#tbd");
$.each(item,function(_,fld) {
$tr.append("<td>"+fld+"</td>");
})
$tr.appendTo($tbd);
}
function showAll() {
Object.keys(data).forEach(function(key) {
show(data[key][0]);
})
}
$(function() {
$("#search").on("click",function() {
$("#tbd").empty();
var brojleta = $("#broj_leta").val();
if (brojleta) show(data["let"+brojleta][0])
else showAll();
});
var brojleta = getParamValue("id") || 3 // test #3
if (brojleta) $("#broj_leta").val(brojleta);
$("#search").trigger("click");
})
th, td { border:1px solid lightgrey; padding: 3px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="broj_leta" /><button id="search">Search</button>
<table>
<thead>
<tr>
<th>id</th>
<th>Datumpolaska</th>
<th>Datumdolaska</th>
<th>Plazniaerodrom</th>
<th>Dolazniaerodrom</th>
<th>Brojsedista</th>
<th>Cenakarte</th>
</tr>
</thead>
<tbody id="tbd">
</tbody>
</table>
You can first filter the data based on ID and then map your required variable to final output array in below code output.
var brojleta = 1;
const mappedarray = Object.entries(data).filter((k,v)=>{return k[0] == "let"+brojleta});
console.log(mappedarray[0][1][0]);
You can use the lodash function find().
This is the same function as Array.find but it works on Object.
https://lodash.com/docs/4.17.11#find
I am working on a table that I need to be able to move rows up and down.
The problem is that I cannot re-insert the row before the previous or next row, because my application relies on the names of the input fields to stay in the same order.
My solution is to swap the values of the input fields, which works, but my code is very ugly and repetitive.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
var rowdata1 = row.find('.rowdata1').val();
var rowdata2 = row.find('.rowdata2').val();
var rowdata3 = row.find('.rowdata3').val();
var rowdata4 = row.find('.rowdata4').val();
var rowdata5 = row.find('.rowdata5').val();
if ($(this).is(".up")) {
var tmp1 = row.prev().find('.rowdata1').val();
var tmp2 = row.prev().find('.rowdata2').val();
var tmp3 = row.prev().find('.rowdata3').val();
var tmp4 = row.prev().find('.rowdata4').val();
var tmp5 = row.prev().find('.rowdata5').val();
row.prev().find('.rowdata1').val(rowdata1);
row.prev().find('.rowdata2').val(rowdata2);
row.prev().find('.rowdata3').val(rowdata3);
row.prev().find('.rowdata4').val(rowdata4);
row.prev().find('.rowdata5').val(rowdata5);
row.find('.rowdata1').val(tmp1);
row.find('.rowdata2').val(tmp2);
row.find('.rowdata3').val(tmp3);
row.find('.rowdata4').val(tmp4);
row.find('.rowdata5').val(tmp5);
//row.insertBefore(row.prev());
} else {
var tmp1 = row.next().find('.rowdata1').val();
var tmp2 = row.next().find('.rowdata2').val();
var tmp3 = row.next().find('.rowdata3').val();
var tmp4 = row.next().find('.rowdata4').val();
var tmp5 = row.next().find('.rowdata5').val();
row.next().find('.rowdata1').val(rowdata1);
row.next().find('.rowdata2').val(rowdata2);
row.next().find('.rowdata3').val(rowdata3);
row.next().find('.rowdata4').val(rowdata4);
row.next().find('.rowdata5').val(rowdata5);
row.find('.rowdata1').val(tmp1);
row.find('.rowdata2').val(tmp2);
row.find('.rowdata3').val(tmp3);
row.find('.rowdata4').val(tmp4);
row.find('.rowdata5').val(tmp5);
//row.insertAfter(row.next());
}
});
});
I created a fiddle: http://jsfiddle.net/29T7V/
I would really appreciate any suggestions on how to simplify my code.
Any ideas on how to update my code to handle x amount of inputs in the rows would be absolutly awesome! TIA!
Something like this maybe
$(document).ready(function () {
$(".up, .down").on('click', function () {
var row = $(this).closest('tr').first(),
way = $(this).hasClass('up') ? 'prev' : 'next';
for (var i=1; i<6; i++) {
var sel = '.rowdata'+i,
tmp1 = row.find(sel).val(),
tmp2 = row[way]().find(sel).val();
row.find(sel).val(tmp2);
row[way]().find(sel).val(tmp1);
}
});
});
FIDDLE
Something wich would work with any number of columns:
$(document).ready(function () {
$(".up, .down").click(function () {
var $row = $(this).closest("tr"),
$swap = $row[$(this).is('.up') ? 'prev' : 'next']();
if (!$swap) return;
$row.find('td').each(function() {
var $input = $(this).find('input, select'),
$swapInput, $swapVal;
if ($input.length) {
$swapInput = $swap.children('td:eq(' + this.cellIndex + ')').find('input, select');
$swapVal = $swapInput.val();
$swapInput.val($input.val());
$input.val($swapVal);
}
});
});
});
Demo: http://jsfiddle.net/29T7V/
I have some JavaScript that creates a row in a table and adds cells to it. I need to put an colspan=2 on the second cell added (A.K.A the select cell), but I can't figure out the best way to do this with the least change in the code because this affects a entire page of more code. Suggestions? (table id=table5 class=mytable)
if(fltgrid)
{
var fltrow = t.insertRow(0); //adds filter row
fltrow.className = "fltrow";
for(var i=0; i<n; i++)// this loop adds filters
{
var fltcell = fltrow.insertCell(i);
//fltcell.noWrap = true;
i==n-1 && displayBtn==true ? inpclass = "flt_s" : inpclass = "flt";
if(f==undefined || f["col_"+i]==undefined || f["col_"+i]=="none")
{
var inptype;
(f==undefined || f["col_"+i]==undefined) ? inptype="text" : inptype="hidden";//show/hide input
var inp = createElm( "input",["id","flt"+i+"_"+id],["type",inptype],["class",inpclass] );
inp.className = inpclass;// for ie<=6
fltcell.appendChild(inp);
if(enterkey) inp.onkeypress = DetectKey;
}
else if(f["col_"+i]=="select")
{
var slc = createElm( "select",["id","flt"+i+"_"+id],["class",inpclass] );
slc.className = inpclass;// for ie<=6
fltcell.appendChild(slc);
PopulateOptions(id,i);
if(displayPaging)//stores arguments for GroupByPage() fn
{
var args = new Array();
args.push(id); args.push(i); args.push(n);
args.push(display_allText); args.push(sort_slc); args.push(displayPaging);
SlcArgs.push(args);
}
if(enterkey) slc.onkeypress = DetectKey;
if(on_slcChange)
{
(!modfilter_fn) ? slc.onchange = function(){ Filter(id); } : slc.onchange = f["mod_filter_fn"];
}
}
if(i==n-1 && displayBtn==true)// this adds button
{
var btn = createElm(
"input",
["id","btn"+i+"_"+id],["type","button"],
["value",btntext],["class","btnflt"]
);
btn.className = "btnflt";
fltcell.appendChild(btn);
(!modfilter_fn) ? btn.onclick = function(){ Filter(id); } : btn.onclick = f["mod_filter_fn"];
}//if
}// for i
}//if fltgrid
If I understand you correctly, you can change the code block in the else if to the following:
var slc = createElm( "select",["id","flt"+i+"_"+id],["class",inpclass] );
slc.className = inpclass;// for ie<=6
fltcell.appendChild(slc);
fltcell.setAttribute("colspan",2);
PopulateOptions(id,i);