How to make this jQuery code more simple and effective - javascript

I have follow two functions here which working great!
As you can see these two functions are almost the same, except the code which comes below the last comment in each function.
How do I make that more simple. Could I make a code-"holder" - Where I only include a part of a code from another file? So I don't have too have the "same" code in each functions?
Should I use some kind of classes or? - I have never worked with classes.
/// Function (add_new_field)
$(document).on("click", '.add_new_field', function(e) {
e.preventDefault();
var flex0 = $(this);
var flex1 = $(this).parent().closest('div');
var flex2 = $(flex1).parent().closest('div');
var flex3 = $(flex2).parent().closest('div');
var flex4 = $(flex3).parent().closest('div');
var flex5 = $(flex4).parent().closest('div');
var flex6 = $(flex5).parent().closest('div');
/*console.log(
' -> WrapID:'+flex6.attr('id')+
' -> accordionContentID:'+flex5.attr('id')+
' -> acContentBoxID:'+flex4.attr('id')+
' -> acChildBoxID:'+flex3.attr('id')+
' -> acBabyBoxID:'+flex2.attr('id')+
' -> SecondID:'+flex1.attr('id')+
' -> FirstID:'+flex0.attr('id')
);*/
var wrapID = flex6.attr('id'); // wrapID
var accordionContentID = flex5.attr('id');
var acContentBoxID = flex4.attr('id'); // sharedID
var acChildBoxID = flex3.attr('id'); // langID
var acBabyBoxID = flex2.attr('id'); // langID
var SecondID = flex1.attr('id'); // OLD : AddLangBoxID
var FirstID = flex0.attr('id'); // OLD : add_new_fieldID
// there is a lot more code here...
)};
/// Function (del_field)
$(document).on("click", '.del_field', function(e) {
e.preventDefault();
var flex0 = $(this);
var flex1 = $(this).parent().closest('div');
var flex2 = $(flex1).parent().closest('div');
var flex3 = $(flex2).parent().closest('div');
var flex4 = $(flex3).parent().closest('div');
var flex5 = $(flex4).parent().closest('div');
var flex6 = $(flex5).parent().closest('div');
var wrapID = flex6.attr('id'); // wrapID
var accordionContentID = flex5.attr('id');
var acContentBoxID = flex4.attr('id'); // sharedID
var acChildBoxID = flex3.attr('id'); // langID
var acBabyBoxID = flex2.attr('id'); // langID
var SecondID = flex1.attr('id'); // OLD : AddLangBoxID
var FirstID = flex0.attr('id'); // OLD : add_new_fieldID
// there is a lot more code her
)};
How could I make something like this.
/// I want to include this code into the functions. So I don't have to write it twice.
var flex0 = $(this);
var flex1 = $(this).parent().closest('div');
var flex2 = $(flex1).parent().closest('div');
var flex3 = $(flex2).parent().closest('div');
var flex4 = $(flex3).parent().closest('div');
var flex5 = $(flex4).parent().closest('div');
var flex6 = $(flex5).parent().closest('div');
var wrapID = flex6.attr('id'); // wrapID
var accordionContentID = flex5.attr('id');
var acContentBoxID = flex4.attr('id'); // sharedID
var acChildBoxID = flex3.attr('id'); // langID
var acBabyBoxID = flex2.attr('id'); // langID
var SecondID = flex1.attr('id'); // OLD : AddLangBoxID
var FirstID = flex0.attr('id'); // OLD : add_new_fieldID
Thank you.


If you want to do something like classes in javascript, your best bet is to use prototyping, since javascript doesn't have classes.
In this case, I'm not sure what your code does, so prototyping might not be the best answer. Your other option is to encapsulate all of your variable definitions in another function, and call that function in both of your click functions. It would return an object with attributes, rather that a bunch of vars.
var myVarFn = function(){
var returnObject = {};
returnObject.flex0 = $(this);
returnObject.flex1 = $(this).parent().closest('div');
...
returnObject.wrapID = flex6.attr('id'); // wrapID
...
return returnOBject
}
And to use it in click, with this defined the same as in the scope of the click function:
$(document).on("click", '.del_field', function(e) {
var dataObject = myVarFn.call(this);
//Other code
};
And in the other click event,
$(document).on("click", '.add_new_field', function(e) {
var dataObject = myVarFn.call(this);
//Other code
};
You will have to modify your other code to use dataObject.flex0 instead of flex0 and so on.


Create a global object
var allId = new Object();
And a function that can be called whenever needed..
function getAllIDs(el) {
var id = ["wrapID", "accordionContentID", "acContentBoxID", "acChildBoxID", "acBabyBoxID", "SecondID", "FirstID"];
var flex;
for (var i = 0; i <= 6; i++) {
if (i == 0) {
flex = $(el).parent().closest('div');
} else {
flex = $(flex).parent().closest('div');
}
allId.id[i] = $(flex).parent().closest('div').attr('id');
}
}
Further, on jQuery event you can call getAllIDs function
$(document).on("click", '.add_new_field', function (e) {
e.preventDefault();
getAllIDs(this);
});
More details about javascript objects

Related

swap the Multiple Video Html elements before Removing

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!

Not appending the desired output in jquery

I have the following (very incomplete) code that I want to eventually be a shopping cart using jquery.
This is code for loading items remotely from a json file and parsing them into Html using jquery.
$(document).ready(function () {
"use strict";
// Download the content
var head = $("<h1>Aisan Market</h1>");
var dl = $("<dl>");
$("body")
.append(head)
.append(dl)
for (var i = 0; i <shop.length; i++) {
var item = shop[i];
var dt=$("<dt>").text(item.itemId)
var dt1 = $("<dt>").text(item.name)
var dd = $("<dd>").text(item.price)
var button = $("<button>buy</button>");
dl
.append(button)
.append(dt)
.append(dt1)
.append(dd);
}
Here I'd like to have on a button click to walk the dom tree to the correct item id,item name and price and append that to the cart.but it's not doing that.It's writing the id number repeating it and writing 0.
var cart = $("<div>cart<div>");
$("body").append(cart);
var total = 0;
$("button").on("click", function () {
var a = $(this);
var prev = a.next("dt").text();
var b = $(this);
var prev1 = b.next("dt").text();
var c = $(this);
var prev2 = c.next("dd").text();
total += prev2;
cart
.append(prev)
.append(prev1)
.append(total);
});
});
Where am I going wrong.
Thanks a lot.

Automatically push / nest object within a parent object in JavaScript

I am currently working on an excel like behaviour for some task.
All "tr"s are bound to the variable $test
var $test = $('tbody tr');
Now I use the jQuery .each function to run throuhg all trs and collect its relevant contents like this :
$test.each(function(index, element){
var $row_id = $(this).data("rowid");
var status = $(this).find('#status option:selected').val();
var ma_name = $(this).find('#ma-name').val();
var datum = $(this).find('#datum').val();
var firmenname1 = $(this).find('#firmenname1').val();
var firmenname2 = $(this).find('#firmenname2').val();
var limit = $(this).find('#limit').val();
var gruppe_kredit = $(this).find('#gruppe_kredit').val();
var omv_kdnr = $(this).find('#omv_kdnr').val();
var sap_kdnr = $(this).find('#sap_kdnr').val();
var fos = $(this).find('#fos').val();
var hga_kdnr = $(this).find('#fos').val();
var pushObj = {row_id: $row_id,....};
});
Since the pushObject gets greated and stuffed with content each time the each function gets executed I need a way to "push" this object into a parent object which I can later use with AJAX.
The behaviour I'd wish for would be like this:
var parentObj = {};
$.each(function(){
// in each run the newly created object gets nested into the parentObject which results in the parent object having X-childObjects
});
So after, lets say 5 each runs, the parentObj should contain : [0],[1],...,[4] objects.
Could anyone guide me throuhg that process ?

Try this solution by storing pushObj inside array variable like so :
// add here
var parentObj = [];
$test.each(function (index, element) {
var $row_id = $(this).data("rowid");
var status = $(this).find('#status option:selected').val();
var ma_name = $(this).find('#ma-name').val();
var datum = $(this).find('#datum').val();
var firmenname1 = $(this).find('#firmenname1').val();
var firmenname2 = $(this).find('#firmenname2').val();
var limit = $(this).find('#limit').val();
var gruppe_kredit = $(this).find('#gruppe_kredit').val();
var omv_kdnr = $(this).find('#omv_kdnr').val();
var sap_kdnr = $(this).find('#sap_kdnr').val();
var fos = $(this).find('#fos').val();
var hga_kdnr = $(this).find('#fos').val();
var pushObj = {
row_id: $row_id,
....
};
// add here
parentObj.push(pushObj);
});
// later on here access parentObj variable

Having trouble with image preload code

I have this object constructor function that has a preload method for preloading
rollover images pairs.
So, I have two questions:
1: why is the alert dialog just doing 'STR: ' with no data attached? (this type of problem is generally due to my blindness.
2: is it possible to treat the this.buttons_on and this.buttons_off as objects in that instead of
a numerical index, use a sting index so the rollover event handler does not need to loop through
the buttons_on and buttons_off arrays to get the one that should be swapped out;
function _NAV()
{
this.list_off = [];
this.list_on = [];
this.buttons_on = [];
this.buttons_off = [];
this.buttons_all = {}; // .on and .off
this.button_events = {};
this.img = true;
this.img_ids = {}
this.preLoad = function()
{
if(document.images) //creates image object array for preload.
{
var STR = '';
for(var i = 0; i < list_off.length; i++)
{
var lab_on = list_on[i].replace('\.jpg', '');
var lab_off = list_off[i].replace('\.jpg', '');
STR += lab_on+'||'+lab_off+"\n";
this.buttons_on[i] = new Image();
this.buttons_on[i].src = srcPath+list_on[i];
this.bottons_on[i].id = img_ids[i];
this.buttons_off[i] = new Image();
this.buttons_off[i].src = srcPath+list_off[i];
this.buttons_off[i].id = img_ids[i];
}
alert("STR: "+STR);
}
else
{
this.img = false
}
}
//// ...etc...
Here is the call before the onload event fires
var rollover = new _NAV();
rollover.preLoad();
Here are the arrays used
var srcPath = '../nav_buttons/';
var list_off = new Array(); // not new Object;
list_off[0] = "bio_off.jpg";
list_off[1] = "cd_off.jpg";
list_off[2] = "home_off.jpg";
list_off[3] = "inst_off.jpg";
list_off[4] = "photo_off.jpg";
list_off[5] = "rev_off.jpg";
list_off[6] = "samp_off.jpg";
var list_on = new Array();
list_on[0] = "bio_on.jpg";
list_on[1] = "cd_on.jpg";
list_on[2] = "home_on.jpg";
list_on[3] = "inst_on.jpg";
list_on[4] = "photo_on.jpg";
list_on[5] = "rev_on.jpg";
list_on[6] = "samp_on.jpg";
var img_ids = new Array();
Thanks for time and attention.

1:
Try PHPGlue's suggestion and add this. in front of all your member variables (this.list_on, this.list_off, this.img_ids)
You also have a typo on one line. bottons_on is misspelled.
this.bottons_on[i].id = img_ids[i];
2:
Yes, you can use a string as an index. Just make buttons_on and buttons_off objects instead of arrays.
function _NAV()
{
this.buttons_on = {};
this.buttons_off = {};
// For example:
this.buttons_off[lab_off] = new Image();
}

Loop through elements with greasemonkey

I have the following working code on greasemonkey:
var qtt = 100;
var filler1 = document.getElementById("s1_0");
var filler2 = document.getElementById("s2_0");
var filler3 = document.getElementById("s3_0");
var filler4 = document.getElementById("s4_0");
var filler5 = document.getElementById("s5_0");
var filler6 = document.getElementById("s6_0");
var filler7 = document.getElementById("s7_0");
filler1.value = qtt;
filler2.value = qtt;
filler3.value = qtt;
filler4.value = qtt;
filler5.value = qtt;
filler6.value = qtt;
filler7.value = qtt;
Where the "sN_0" are the names of inputs, the code works, but I was wondering if there is a better way to do the same, to loop through all the id names or something.

here is a simple loop doing that your code does
var qtt=100;
for (var i =1;i<8;i++){
document.getElementById("s"+i+"_0").value=qtt
}

If you can use jQuery, try the following.
var qtt = 100;
$('[id]').each(function() {
if(/^s\d_0$/.test(this.id)) {
this.value = qtt;
}
});
Demo

Categories

Resources