Develop Reference

stop converting xml tags to lowercase - jquery

I am working on Draw.io in which I have to convert json to XML, which I successfully did, But I am facing an issue in which all my xml tags goes to lowercase auto.
Lets Say, If I create tag with <mxCell></mxCell> it will convert into <mxcell></mxcell>.
BUT for draw.io , I need to keep the same format for XML. any way to do this ?
var apple = '<mxCell />';
var $div = $('<div>');
$div.append(apple);
$("#graphXMlDiv").text($div.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="graphXMlDiv"></div>
Working jsfiddle

Take a look to this:
let XMLTag = function(tagName) {
this.tagName = tagName;
this.children = [];
this.padding = '';
this.parent = null;
}
XMLTag.prototype.addPadding = function() {
this.padding = this.padding + '\t';
}
XMLTag.prototype.getPadding = function() {
var current = this;
let padding = '';
while (current !== null) {
padding += current.padding;
current = current.parent;
}
return padding;
}
XMLTag.prototype.setParent = function(parent) {
this.parent = parent;
}
XMLTag.prototype.append = function(child) {
child.addPadding();
child.setParent(this);
this.children.push(child);
}
XMLTag.prototype.toText = function() {
if (this.children.length === 0) {
return `${this.getPadding()}<${this.tagName}/>`;
} else {
let childrenText = this.children.map(c => c.toText()).join(`\n`);
return `${this.getPadding()}<${this.tagName}>\n${childrenText}\n${this.getPadding()}</${this.tagName}>`
}
}
var apple = new XMLTag('mxCell');
var anotherTag = new XMLTag('anotherTag');
var anotherTag1 = new XMLTag('anotherTag1');
apple.append(anotherTag);
anotherTag.append(anotherTag1);
console.log(apple.toText());

I'm not really sure what you going for so I am assuming two possible solutions.
You are looking to insert simple string instead of XML node
In that case, just do this:
var $div = $('<div/>');
$div.text('<mxCell><mxCell/>');
$("#graphXMlDiv").text($div.text());
//Then I would add the answer to this StackOverflow question
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graphXMlDiv"></div>
Notice I don't use $div.html() to supply the data to $('#graph....') because what you've inserted inside $div is not proper HTML, and should not be treated as such.
In case you wanted to load an XML document and then add into $div the content of what the XML node myCell has, then you can do something like this.
var apple = '<mxCell>Data inside mxCell</mxCell>',
$div = $('<div/>')
$apple_xml = $($.parseXML(apple));
$apple_xml.find('mxCell').each(function() {
$div.html($(this).text());
});
$("#graphXMlDiv").text($div.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graphXMlDiv"></div>

JQuery: How to change colors dynamically?

I'm using jumble.js to jumble colors of text, but finding difficulty in dynamically setting the colors from user input.
User selects colors using the spectrum.js color palette. I'm able to strip the rbg from rbg(xxx,xx,xx); to xxx,xx,xx. but unable to pass that into the jumble call method.
here is my code.
$(document).on('click', '#cypher-branding-jumble-text', function () {
var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");
colour1 = colour1.toRgbString();
colour1 = colour1.replace('rgb(', '');
colour1 = colour1.replace(')', '');
colour1 = colour1.replace(' ', '');
colour2 = colour2.toRgbString();
colour2 = colour2.replace('rgb(', '');
colour2 = colour2.replace(')', '');
colour2 = colour2.replace(' ', '');
var colour_1 = [colour1];
var colour_2 = [colour2];
$('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false);
});
Jumble plugin > https://github.com/vonKristoff/jumble

If I read the Spectrum API correctly, this should work with less string nonsense. And I was able to verify on the Spectrum website that the 'get' call can use toRgb().
$(document).on('click', '#cypher-branding-jumble-text', function () {
var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get").toRgb();
var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get").toRgb();
$('#cypher-branding-main-edit-right-txt-text')
.jumble([colour1.r-0,colour1.g-0,colour1.b-0],[colour2.r-0,colour2.g-0,colour2.b-0],true,false);
});
Why is there a document listener for #cypher-branding-jumble-text, shouldent it just be $('#cypher-branding-jumble-text').click(...)?

this line has to be changed as color_1 = a.split(",") so it will really split into three values and create array. Same for color_2 also.

Nagappan's comment solved my issue very nicely.
Was meant to split the string. Modified code as below.
$(document).on('click', '#cypher-branding-jumble-text', function () {
var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");
colour1 = colour1.toRgbString();
colour1 = colour1.replace('rgb(', '');
colour1 = colour1.replace(')', '');
colour1 = colour1.replace(' ', '');
colour2 = colour2.toRgbString();
colour2 = colour2.replace('rgb(', '');
colour2 = colour2.replace(')', '');
colour2 = colour2.replace(' ', '');
//modified lines using split
var colour_1 = colour1.split(",");
var colour_2 = colour2.split(",");
$('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false);
});

Not Working .innerHTML

I am a seller on eBay and I want to use JavaScript on eBay. I have successfully used document.write to put the source file of JavaScript. The problem is it not working
This is my JavaScript:
window.onload = function trackt(){
if (typeof this.href === "undefined") {var str = document.location.toString();}
else {str = this.href.toString();}
var pos = str.indexOf("itm/");
var newStr = str.substring(pos+4);
var pos1 = newStr.indexOf("-/");
var newStr1 = newStr.substring(0,pos1);
var newStr2 = newStr1.replace(/\-/g,' ')
document.getElementById("cssmenu1").innerHTML = newStr1;
}
This my css:
#cssmenu_box{}#cssmenu1{float:left;right:-2%;padding:9;width:940px;height:31px;font-size:25px;background:transparent url('http://www.endition.net/ebay/templates/001/images/menu_bg.jpg') repeat-x top left;font-family:'Trebuchet MS',Helvetica,Arial,Verdana,sans-serif;color:#FFFFFF;border: 0.5px solid;border-radius:10px;}
This is my html code:
<div id="cssmenu_right"></div><div id="cssmenu1">Men Leather Jacket</div>
.innerHTML is showing error when I run it using console. I have to use document.write() function.

window.onload = function trackt(){
if (typeof this.href === "undefined") {var str = document.location.toString();}
else {str = this.href.toString();}
var pos = str.indexOf("itm/");
var newStr = str.substring(pos+4);
var pos1 = newStr.indexOf("-/");
var newStr1 = newStr.substring(0,pos1);
var newStr2 = newStr1.replace(/\-/g,' ')
document.getElementById("cssmenu1").innerHTML = newStr1;
}
//instead of innerHTML use text(newStr1);

How to make this jQuery code more simple and effective

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

How to create dynamic instances of JQueryTE text editor

I am attempting to create a small program that incorporates dynamically created instances of this editor.
I have it working except for the ability to create a button that opens/closes the editor.
jsFiddle of what I've got so far.
"use strict";
$(document).ready(function() {
var createPad = $("#createPad").click(function () {
var body = document.getElementById("body");
var editorNumberCounter = 1;
var toggleOnOffCounter= 1;
var editorName = '.'+ (editorNumberCounter++);
var status = document.createElement('div');
status.className = "status";
status.id = "status";
var editorName= document.createElement('span');
editorName.className = "status";
editorName.id = "status";
$(body.appendChild(status));
$(body.appendChild(editorName));
var toggle = status.id + toggleOnOffCounter++;
$(editorName).jqte();
// settings of status
var jqteStatus = true;
$(toggle).click(function()
{
jqteStatus = jqteStatus ? false : true;
$(editorName).jqte({toggle : jqteStatus})
});
});
});

I made up some changes to your code an now seems to work.
I try to explain them point by point:
variabiles editorNumberCounter and toggleOnOffCounter must be globally scoped or you lose the incremented value
ID of elements (dynamically created or not) MUST be unique, so I create the div and span element considering the counter
for dynamically created elements you must use the bind method or the event will not be bind
the toggle property not exist! You must use the status property
the element onto JQTE is binded is get as next element after the clicked element
Code:
var editorNumberCounter = 0;
var toggleOnOffCounter = 0;
$(document).ready(function () {
var createPad = $("#createPad").click(function () {
var body = document.getElementById("body");
var editorName = '.' + editorNumberCounter++;
toggleOnOffCounter++;
var status = document.createElement('div');
status.className = "status";
status.id = "div_status" + editorNumberCounter;
var editorName = document.createElement('span');
editorName.className = "status";
editorName.id = "span_status" + editorNumberCounter;
$(body.appendChild(status));
$(body.appendChild(editorName));
$(editorName).jqte();
// settings of status
var jqteStatus = true;
$("#div_status" + editorNumberCounter).bind("click",function () {
jqteStatus = jqteStatus ? false : true;
$(this).next().jqte({
status: jqteStatus
})
});
});
});
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/UfhNQ/14/