We Keep Coding

Switch Content back and forth using Jquery

I have an app where when the user clicks on a table, assigned to btnAlternativeService, the content from this table swaps with another one.
The jQuery I have used involves creating two variables for each piece of content in the table, one to act as a JS selector and another to retain the original content. It looks like this:
// Switch between the two services
btnAlternativeService.on('click', function(){
// Set original recommended text variables
var serviceSubTextOriginal = $('.js-second-step .subtext-top').text();
var serviceProductTitleOriginal = $('.js-second-step .product-title').text();
var serviceMileageOriginal = $('.js-miles').text();
var serviceRecommendationOriginal = $('.js-second-step .full-rec').text();
// Set recommended text selector variables
var serviceSubText = $('.js-second-step .subtext-top');
var serviceProductTitle = $('.js-second-step .product-title');
var serviceMileage = $('.js-miles');
var serviceRecommendation = $('.js-second-step .full-rec');
// Set original alternative variables
var alternativeProductTitleOriginal = $('.js-alternative h3').text();
var alterativeMilageOriginal = $('.js-miles-alternative').text();
var alternativeSubTextOriginal = $('.js-alternative .alternative-subtext').text();
// Set alternative selector variables
var alternativeProductTitle = $('.js-alternative h3');
var alterativeMilage = $('.js-miles-alternative');
var alternativeSubText = $('.js-alternative .alternative-subtext');
// Swap everything around
serviceProductTitle.text(alternativeProductTitleOriginal);
serviceMileage.text(alterativeMilageOriginal);
serviceRecommendation.text(alternativeSubTextOriginal);
alternativeSubText.text(serviceRecommendationOriginal);
alternativeProductTitle.text(serviceProductTitleOriginal);
alterativeMilage.text(serviceMileageOriginal);
});
This seems very long winded - is there a better way for me to swap the content around?

You can select the elements by order and create 2 collections and use the indices for setting the text contents:
var $first = $('.js-second-step .subtext-top, ...');
var $second = $('.js-alternative h3, ...');
$first.text(function(index, thisText) {
// select the corresponding element from the second set
var $that = $second.eq( index ), thatText = $that.text();
$that.text( thisText );
return thatText;
});

Use a function:
function switchContent(selector_1, selector_2){
data_1 = $(selector_1).text()
data_2 = $(selector_1).text()
$(selector_1).text(data_2)
$(selector_2).text(data_1)
}
btnAlternativeService.on('click', function(){
switchContent('.js-alternative h3', '.js-second-step .product-title')
switchContent('.js-miles-alternative', '.js-miles')
switchContent('.js-alternative .alternative-subtext', '.js-second-step .full-rec')
});

How to promote DOM range after inserting a Node?

I insert a node and when insert another it substitutes the previously inserted one.
I guess I need to put the range after the firstly inserted node, but how?
I define a function:
function EmoticonsMenu(jquery_element){
var e = jquery_element;
var top = e.offset().top;
var left = e.offset().left;
var onIconClick_callback;
this.onIconClick = function(eventObject){
var html = $(eventObject.target).parent().html().replace(/\n\s+|\s+\n/g, '');
onIconClick_callback(html);
};
e.blur(function(){
e.css({visibility:'hidden'});
e.hide();
});
this.attach_to = function(element, callback){
onIconClick_callback = callback;
var newTop = element.offset().top - top - 10 - e.height();
var newLeft = element.offset().left - left + 10;
e.css({top:newTop, left:newLeft});
e.css({visibility:'visible'});
e.focus();
};
};
and there is a place where I bind Emoticon to my nicEditor custom button
nicEditorExampleButton = nicEditorButton.extend({
mouseClick : function(eventObject) {
// get nicEdit selected instance - se
var se = this.ne.selectedInstance;
var paste_icon_html = function(html){
// create a DOM node from the string
//var html = '<img src="/assets/emoticons/ac.gif">admin is here!</img>';
var div = document.createElement('div');
div.innerHTML = html;
var node = div.childNodes[0];
// get selection if any, insert html as a Node
var range = se.getRng();
range.deleteContents();
range.insertNode(node.cloneNode(true));
//range.setStart(node,0);
//range.setEnd(node,0);
};
emoticonsMenu.attach_to($(this.button), paste_icon_html);
}
});
nicEditors.registerPlugin(nicPlugin,nicExampleOptions);

If you don't want to substitute anything, remove the call to deleteContents.
Also you might have the problem that while calling this snippet repeatedly you always refer to the same nodes[0], and it can only exist once - to insert it multiple times, you'd need to clone it:
range.insertNode(nodes[0].cloneNode(true));

Here is code change required. Instead of:
range.insertNode(node.cloneNode(true));
//range.setStart(node,0);
//range.setEnd(node,0);
};
should be
range.insertNode(node);
range.setEndAfter(node); //++
range.setStartAfter(node); //++
};

Dynamicaly Creating a Table with document.createElement and add onclick functions to each tr

I want to add Rows to a Table that already exists and each row has a onclick attribute. The problem is that each row needs to call the function with another parameter. At The moment no matter in what row i click the function is called with the parameter of the last row in the table.
This is how i add the rows to the table :
table = document.getElementById('ProgramTable');
table.style.visibility = "visible";
tableBody = document.getElementById('ProgrammTableBody');
tablelength = jsonObj0.data.map.programs.length;
// Check if there is already a Table, if so
// remove the Table
if (tableexists) {
removetable();
}
for ( var i = 0; i < tablelength; i++) {
channel = jsonObj0.data.map.programs[i].programServiceName;
frequency = jsonObj0.data.map.programs[i].programIdentifier;
imagelink = "../image/image.jsp?context=tuner&identifier="
+ channel;
var row = document.createElement("tr");
row.setAttribute("id", i);
row.onclick = function() {
tuneProgram(frequency)
};
var channelCell = document.createElement("td");
var imageCell = document.createElement("td");
var imageElement = document.createElement("IMG");
var frequencyCell = document.createElement("td");
channel = document.createTextNode(channel);
frequency = document.createTextNode(frequency);
channelCell.appendChild(channel);
frequencyCell.appendChild(frequency);
imageElement.setAttribute("src", imagelink);
imageElement.setAttribute("width", "40");
imageElement.setAttribute("height", "40"); // TODO OnError
// hinzufügen und evtl
// Css Style für Texte
// siehe Tabellencode
imageCell.appendChild(imageElement);
row.appendChild(channelCell);
row.appendChild(frequencyCell);
row.appendChild(imageCell);
tableBody.appendChild(row);
}
So the tune function should be called with the specific frequency parameter but it seems like he is overwriting the onclick parameter everytime so the last one is in there for every row. But why is that so? is he adding the onclick Attribute to every row in that table? I don't get it.
Thanks for your help!

Replace
row.onclick = function() {
tuneProgram(frequency)
};
with
row.onclick = (function(frequency) {return function() {tuneProgram(frequency);};})(frequency);
This "anchors" the value of frequency by creating a new closure for it.

You need to do something like this:
for (var i = 0; i < tablelength; i++) {
(function(i) {
//your code here
})(i);
}

Frequency is being referenced when you click - so if the variable changes, it changes every click element. For example, the first row sets a frequency of one and the last row sets a frequency of two. When the onclick runs it isn't referenced to a value, its referenced to a variable in the chain and gets the current value of two.

because your frequency is a global value, so there is only one frequency that every function refer to it;you can cache it in a closure
something like this:
var programTable = document.getElementById('ProgramTable');
programTable.style.visibility = "visible";
programmTableBody = document.getElementById('ProgrammTableBody');
tablelength = jsonObj0.data.map.programs.length;
if (tableexists) {
removetable();
}
function newTabRow ( table, name, identifier ) {
var link = "../image/image.jsp?context=tuner&identifier=" + name,
row = table.insertRow();
row.innerHTML = '<td>' + name + '</td><td><img width="40" height="40" src="'+link+'" alt="''" /></td><td>'+ identifier +'</td>';
row.onclick = function ( ) {
tuneProgram ( identifier );
}
}
for (var i = tablelength; i-- > 0; ) {
program = jsonObj0.data.map.programs[i];
newTabRow ( programTable, program.programServiceName, program.programIdentifier );
}

Be careful I have a function on top of my page with name "show_field_setting". my function get to value and do something. I have a for loop and in my loop i change 'type' and 'id' for each element. you can see one part inside of my for loop below. finally I add my new element to my div with element id 'my_element_id'. If you want to set a function to your created element you need use something like this:
var new_child = document.createElement('div');new_child.id = id;
new_child.href = "javascript:;";
new_child.onclick = (function (type, id) {
return function() {
show_field_setting (type, id);
};
})(type, id);
document.getElementById('my_element_id').appendChild(new_child);
if you have on argumant in your function only, use this:
var new_child = document.createElement('div');
new_child.href = "javascript:;";
new_child.onclick = (function (your_value) {
return function() {
your_function_name (your_value);
};
})(your_value);
document.getElementById('your_element_id').appendChild(new_child);
finally i don't know why. any way if you are not in loop condition like "while", "for" or even "switch" you can use easy below code line:
var new_child = document.createElement('div');
new_child.href = "javascript:;";
new_child.onclick = function(){your_function_name (your_value_1, your_value_2 , ...)};
document.getElementById('your_element_id').appendChild(new_child);
Have Fun ;) :)

CreateElement with id?

I'm trying to modify this code to also give this div item an ID, however I have not found anything on google, and idName does not work. I read something about append, however it seems pretty complicated for a task that seems pretty simple, so is there an alternative? Thanks :)
g=document.createElement('div'); g.className='tclose'; g.v=0;

You should use the .setAttribute() method:
g = document.createElement('div');
g.setAttribute("id", "Div1");

You can use g.id = 'desiredId' from your example to set the id of the element you've created.

var g = document.createElement('div');
g.id = 'someId';

You can use Element.setAttribute
Examples:
g.setAttribute("id","yourId")
g.setAttribute("class","tclose")
Here's my function for doing this better:
function createElement(element, attribute, inner) {
if (typeof(element) === "undefined") {
return false;
}
if (typeof(inner) === "undefined") {
inner = "";
}
var el = document.createElement(element);
if (typeof(attribute) === 'object') {
for (var key in attribute) {
el.setAttribute(key, attribute[key]);
}
}
if (!Array.isArray(inner)) {
inner = [inner];
}
for (var k = 0; k < inner.length; k++) {
if (inner[k].tagName) {
el.appendChild(inner[k]);
} else {
el.appendChild(document.createTextNode(inner[k]));
}
}
return el;
}
Example 1:
createElement("div");
will return this:
<div></div>
Example 2:
createElement("a",{"href":"http://google.com","style":"color:#FFF;background:#333;"},"google");`
will return this:
google
Example 3:
var google = createElement("a",{"href":"http://google.com"},"google"),
youtube = createElement("a",{"href":"http://youtube.com"},"youtube"),
facebook = createElement("a",{"href":"http://facebook.com"},"facebook"),
links_conteiner = createElement("div",{"id":"links"},[google,youtube,facebook]);
will return this:
<div id="links">
google
youtube
facebook
</div>
You can create new elements and set attribute(s) and append child(s)
createElement("tag",{attr:val,attr:val},[element1,"some text",element2,element3,"or some text again :)"]);
There is no limit for attr or child element(s)

Why not do this with jQuery?
var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})

var element = document.createElement('tagname');
element.className= "classname";
element.id= "id";
try this you want.

that is simple, just to make a new element with an id :
var myCreatedElement = document.createElement("div");
var myContainer = document.getElementById("container");
//setAttribute() is used to create attributes or change it:
myCreatedElement.setAttribute("id","myId");
//here you add the element you created using appendChild()
myContainer.appendChild(myCreatedElement);
that is all

I'm not sure if you are trying to set an ID so you can style it in CSS but if that's the case what you can also try:
var g = document.createElement('div');
g.className= "g";
and that will name your div so you can target it.

window.addEventListener('DOMContentLoaded', (event) => {
var g = document.createElement('div');
g.setAttribute("id", "google_translate_elementMobile");
document.querySelector('Selector will here').appendChild(g);
});

dojo equivalent of document.X

What will be the dojo equivalent code of following.?
var msgContainer = document.createElement('div');
msgContainer.id = 'alert'; // set id of div
msgContainer.setAttribute('role', 'alert');
msgContainer.className = 'contenthide' // set class name
msgContainer.appendChild(document.createTextNode(msg));
document.body.appendChild(msgContainer);
var div = dojo.byId('alert');
while (div) {
div.parentNode.removeChild(div);
div = dojo.byId('alert');
}

var msgContainer = dojo.create("div", {
id:"alert",
role:"alert",
"class":"contenthide",
innerText:msg }, dojo.body());
Please check on the Dojo Toolkit's documentation for more DOM functions.