Develop Reference

In jquery run time dynamic value not able to get it

I am creating the complete syntax of jquery and assigning it in the PHP field and on the button click I get the field value but the problem is in jquery the syntax I used to replace their value is not replaced. It shows the same variable.
<input type="hidden" name="ajaxUrl" id="ajaxUrl" value="'index.php?mode=ajax&action=modHistory&process=save&account={$account}&date=' + uenc(readNextdate('dateField')) + '&response=' + uenc(fieldVal('response')) + '&contact=' + uenc(fieldVal('contact')) + '&salesman=' + uenc(fieldVal('salesman')) + '&activity=' + uenc(fieldVal('activity')) + '&project=' + uenc(fieldVal('project')) + '&owner=' + uenc(fieldVal('owner')) + '&status=' + uenc(fieldVal('modstatus')) + '&product=' + uenc(fieldVal('product')) + '&duration=' + uenc(fieldVal('duration')) + '&username=' + uenc(fieldVal('username')) + '&oldProduct=' + uenc(fieldVal('oldProduct')) + '&oldDuration=' + uenc(fieldVal('oldDuration')) + '&oldActivity=' + uenc(fieldVal('oldActivity')) + '&oldDate={$pointer}{$save}&extraId={$extraId}&time=' + new Date().getTime() + '&token={$XSRFToken|escape:'url'}'">
At the jquery end I suppose it will replace the jquery syntax with there value but it shows the same value -
'index.php?mode=ajax&action=modHistory&process=save&account=10002&date=' + uenc(readNextdate('dateField')) + '&response=' + uenc(fieldVal('response')) + '&contact=' + uenc(fieldVal('contact')) + '&salesman=' + uenc(fieldVal('salesman')) + '&activity=' + uenc(fieldVal('activity')) + '&project=' + uenc(fieldVal('project')) + '&owner=' + uenc(fieldVal('owner')) + '&status=' + uenc(fieldVal('modstatus')) + '&product=' + uenc(fieldVal('product')) + '&duration=' + uenc(fieldVal('duration')) + '&username=' + uenc(fieldVal('username')) + '&oldProduct=' + uenc(fieldVal('oldProduct')) + '&oldDuration=' + uenc(fieldVal('oldDuration')) + '&oldActivity=' + uenc(fieldVal('oldActivity')) + '&oldDate=1638172792&FIELD1='+uenc(readNextdate('mod-RCMANL-ANAL01'))+'&ADDN-FIELD1=RCMANL-ANAL01&FIELD2='+uenc(jqfieldVal('.RCMANL-ANAL15 select'))+'&ADDN-FIELD2=RCMANL-ANAL15&FIELD3='+uenc(jqfieldVal('.RCMANL-ANAL13 input'))+'&ADDN-FIELD3=RCMANL-ANAL13&FIELD4='+uenc(readNextdate('mod-RCMANL-ANAL51'))+'&ADDN-FIELD4=RCMANL-ANAL51&FIELD5='+uenc(readNextdate('mod-RCMANL-ANAL80'))+'&ADDN-FIELD5=RCMANL-ANAL80&extraId=&time=' + new Date().getTime() + '&token=2d62814f617129a0a611dd505ec239a2'

Merge every two elements into 1 element in javascript array

Suppose I have the following array in JavaScript:
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3',
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11',
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18',
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
]
How can I write code to merge every two elements into one element? So that each pair, is only separated by 1 comma?
I'm looking to get the following output:
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3'
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11'
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18'
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
]
I want it to be like the above, whereby every 2 elements are amalgamated.

You can use Array.from, assuming that the length of the array is even.
const res = Array.from({length:dataArray.length/2}, (_,i)=>dataArray[2*i]+dataArray[2*i+1]);
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3',
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11',
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18',
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
];
const res = Array.from({length:dataArray.length/2}, (_,i)=>dataArray[2*i]+dataArray[2*i+1]);
console.log(res);

How do I replace a string in a parent page from a JS created childpage?

I am creating a dynamic list with JS
var obj = JSON.parse(Agent212);
var i;
var serie = "Agent212";
for (i = 0; i < obj.strips.length; i++) {
if (obj.strips[i].Collectie == "0") {
document.write("<li><a onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")' style = 'color:orange'>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</a></li>");
}
else if (obj.strips[i].Collectie == "2") {
document.write("<li><a onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")' style = 'color:red'>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</a></li>");
}
else {
document.write("<li><a class='ToHide' onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")'><strike>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</strike></a></li>");
}
}
when I click on an item in the list, I create a childpage
function newPage(StripNum, SerieNaam) {
var obj = JSON.parse(SerieNaam);
var i;
var x = StripNum;
for (i = 0; i < obj.strips.length; i++) {
if (obj.strips[i].Nummer == x) {
if (obj.strips[i].Collectie == 0) {
var myWindow = window.open();
myWindow.document.writeln('<html>');
myWindow.document.writeln('<head>');
myWindow.document.writeln('<meta name="viewport" content="width=device-width, initial-scale=1">');
myWindow.document.writeln('<link rel="stylesheet" href="./css/W3CSS.css">');
myWindow.document.writeln('<scr' + 'ipt>');
myWindow.document.writeln('function windowClose(){');
myWindow.document.writeln('window.close();}'); **
myWindow.document.writeln('function ToevoegenVerzameling(){'); **
myWindow.document.writeln('window.alert("toegevoegd aan verzameling");');
myWindow.document.writeln('window.close();');
myWindow.document.writeln('}');
myWindow.document.writeln('</scr' + 'ipt>');
myWindow.document.writeln('</head>');
myWindow.document.writeln('<body>');
myWindow.document.writeln('<div class="w3-container w3-display-topmiddle">');
myWindow.document.writeln('<div class="w3-card-16 w3-round-xlarge" style="width:100%">');
myWindow.document.writeln('<a onclick="windowClose();"><center><img src="' + obj.strips[i].Link + obj.strips[i].Nummer + '.jpg"></center></a>');
myWindow.document.writeln('<div class="w3-container w3-margin-top">');
myWindow.document.writeln('<center><B>Nummer: </B><I>' + obj.strips[i].Nummer + '</I></center>');
myWindow.document.writeln('<center><B>Titel: </B><I>' + obj.strips[i].Titel + '</I></center>');
myWindow.document.writeln('<center><button onclick="ToevoegenVerzameling()" class="w3-btn w3-light-grey w3-border w3-border-black w3-round-xlarge w3-margin-top w3-margin-bottom" style="width:100%"><h2><b>Toevoegen</b></h2></button></center>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</body>');
myWindow.document.writeln('</html>');
}
all of the above does work, but know I want to ad a replace function to ToevoegenVerzameling().
I've tried with adding this piece of code.
myWindow.document.writeln('if (window.opener != null && !window.opener.closed){');
myWindow.document.writeln('var str = "<li><a onclick='
newPage(" + obj.strips[i].Nummer + ", " + serie + ")
' style = '
color: orange '>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel +"</a></li>";');
myWindow.document.writeln('str.replace("<a onclick='
newPage(", " < a class = 'ToHide'
onclick = 'newPage(");'); myWindow.document.writeln('str.replace("style = '
color: orange '>", "><\strike>");'); myWindow.document.writeln('str.replace("</a>", "</strike></a>");}');
But I can't get it to work, Were am I making a mistake in this?

TypeError: $source.offset is not a function

I have a tree structure where the elements can be dragged and dropped into another element. My objective is when a element or node from a tree is dragged and dropped to the external element I want a line to be drawn from the element of the tree to the external location.
I have the code separate for dragging and dropping. I tried to integrate the code into my tree structure and getting this error. I did see similar errors but could not get an exact idea about what exactly the error is. Here is the code that is giving me the error.
end: function(item, hover, placeholder, helper) {
if (placeholder.parent().length) {
var tree = $('#tree1').aciTree('api');
if (tree.isItem(item)) {
var id = tree.getId(item);
var label = tree.getLabel(item);
if (this._instance.jQuery.hasClass('any')) {
this._instance.jQuery.find('li:not(.aciSortablePlaceholder)').remove();
}
var item = $('<li id="item-' + id + '">' + label + '</li>');
var sourceId = id;
var destinationId = sourceId;
drawLine(sourceId, destinationId);
//This is how the function is called
placeholder.after(item).detach();
}
else {
placeholder.detach();
}
}
helper.detach();
}});
function drawLine(eTarget, eSource) {
setTimeout(function () {
var $source = eSource;
var $target = eTarget;
var originX = $source.offset().left + $source.width() + 20 + 4;
// In the $source.offset() I am getting the error.
var originY = $source.offset().top + (($source.height() + 20 + 4) / 2);
var endingX = $target.offset().left;
var endingY = $target.offset().top + (($target.height() + 20 + 4) / 2);
var space = 20;
var color = "black";
var a = "M" + originX + " " + originY + " L" + (originX + space) + " " + originY; // beginning
var b = "M" + (originX + space) + " " + originY + " L" + (endingX - space) + " " + endingY; // diagonal line
var c = "M" + (endingX - space) + " " + endingY + " L" + endingX + " " + endingY; // ending
var all = a + " " + b + " " + c;
console.log("New Line ----------------------------");
console.log("originX: " + originX + " | originY: " + originY + " | endingX: " + endingX + " | endingY: " + endingY + " | space: " + space + " | color: " + color );
console.log(all);
myLines[myLines.length] = svg
.path(all)
.attr({
"stroke": color,
"stroke-width": 1,
"stroke-dasharray": "-"
});
}, 1000);
PS: I am using firefox. The eTarget and eSource and getting the values as supplied.

JS styling 3 per line

I'm trying to make this so there is 3 on a line then a break then 3 more then a break etc..
Any help?
Code so far http://jsfiddle.net/82wNq/69/
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
var t = "";
$.each(e.streams, function (e, n) {
t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>"
});
$("#content").html(t)
})
Example:
http://i.stack.imgur.com/h0xvX.gif

DEMO
Create 3 different content divs instead of 1
<div id="content1" class="panel panel-default"></div>
<div id="content2" class="panel panel-default"></div>
<div id="content3" class="panel panel-default"></div>
Style these divs
.panel.panel-default {
width:430px;
display:inline-block;
}
Distribute the results accordingly
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
var t = u = v = "";
$.each(e.streams, function (e, n) {
switch ((e + 1) % 3) {
case 1:
t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
case 2:
u = u + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
case 3:
default:
v = v + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
}
});
$("#content1").html(t);
$("#content2").html(u);
$("#content3").html(v);
})