We Keep Coding

Sometimes the list connects other times it doesn't

Sometimes the lists connect and you can transfer between them. Other times it doesn't connect. At all times you can sort within each list, but sometimes not between them. I can't figure it out.
$('#questions .survey-page ul').sortable({
items: 'li:not(.placeholder)',
sort: function() {
$(this).removeClass('ui-state-edit'); // While sorting we do not want edit buttons to show.
},
update: function() {
refreshAllDetails(); // Update survey with the new details.
},
connectWith: '#questions .survey-page ul'
});
#question is a tag that multiple .survey-page children are put into. Each .survey-page has a ul with multiple li entries. It is this ul that I am trying to link between .survey-pages.
EDIT: As per request:
/**
* Saves the order of questions, then saves the details of all questions to server.
*/
function refreshAllDetails() {
saveOrder();
saveAllToDatabase();
}
/**
* Saves the details of all questions to server.
*/
function saveAllToDatabase() {
// Go through each page.
$("#questions").find(".survey-page").each(function() {
var surveypage = this;
// Save metadata for current page.
// Go through each question on page.
$(this).find(".questiontypestuffp").each(function() {
// Get the answers for a particular question, including meta-data for question.
var result = callWidget($(this), "getEditedAnswers");
// Get the order of the question listed on page.
result.questionorder = $(this).attr('ordervalue');
result.pageno = $(surveypage).attr("ordervalue");
// Save the question's order to its associated widget.
callWidget($(this), "setData", result);
// Update the question in database.
$.ajax({dataType: "json", url: "index.php?option=com_survey&loadorsave=update&view=surveydata&layout=edit&id=" + $("#itemid").val() + "&tmpl=component&format=json&questionvalues=" + encodeURI(JSON.stringify(result)), success: function(callback) {
}});
// Turn off edit mode.
setEditModeOff();
});
});
}
/**
* Refreshes order values with regard to their position on page. This rewrites the order values as they appear.
*/
function saveOrder() {
var pageorder = 0;
// GO through each page.
$("#questions").find(".survey-page").each(function() {
var questionorder = 0;
// Rewrite page order.
var currentPage = ++pageorder;
$(this).attr('ordervalue', currentPage);
// Rewrite each question's order on page.
$(this).find(".questiontypestuffp").each(function() {
$(this).attr('ordervalue', ++questionorder);
});
});
}

I've solved my own problem here. The class I was removing was actually required to recognize drag and drop operations, hence 'ui-state-edit'. By dynamically updating this class to/from the DOM element, this was affecting whether the list item was able to be transferred between lists. As a brief - drag and drop was rejecting the list item since it didn't have a valid class name.

How to Retrieve Specific Data in Firebase Using Table Cells?

I'm kinda new to Javascript so please don't bite. I wrote simple function that displays my Firebase users in table, I'm using Jquery to create this, so far my code looks like that:
userRef.on("child_added", snap => {
var username = snap.child("name").child("name").val();
var surname = snap.child("name").child("surname").val();
$("#user_table").append("<tr><td>"+ username +"</td></tr>")
});
now i want to display each users data by clicking on his nickname in table, im doing it like that :
$("#user_table").on('click', 'td', function() {
userRef.on("child_added", snap =>{
cosValue = snap.child("cos").child("cos").val();
alert(cosValue);
})
});
and it displays all of my users data.. not this specific one that i clicked on, how can i solve that ? :)

userRef.on("child_added", snap => {
var username = snap.child("name").child("name").val();
var surname = snap.child("name").child("surname").val();
var cosValue = snap.child("cos").child("cos").val();
$("#user_table").append("<tr onClick=\"displayCos(" + cosValue + ")\"><td>"+ username +"</td></tr>")
});
function displayCos(cos) {
alert(cos); //or any other action, e.g. open a PopUp window, display it in another div or table, etc.
}
You don't need the second .on("child_added",...
Also, you may do that with an onClick listener, instead of coding that inline in the tr tag (see https://www.w3schools.com/js/js_htmldom_eventlistener.asp).

Using Javascript loop to create multiple HTML elements

I would like to use a javascript loop to create multiple HTML wrapper elements and insert JSON response API data into some of the elements (image, title, url, etc...).
Is this something I need to go line-by-line with?
<a class="scoreboard-video-outer-link" href="">
<div class="scoreboard-video--wrapper">
<div class="scoreboard-video--thumbnail">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="scoreboard-video--info">
<div class="scoreboard-video--title">Pelicans # Bulls Postgame: E'Twaun Moore 10-8-17</div>
</div>
</div>
</a>
What I am trying:
var link = document.createElement('a');
document.getElementsByTagName("a")[0].setAttribute("class", "scoreboard-video-outer-link");
document.getElementsByTagName("a")[0].setAttribute("url", "google.com");
mainWrapper.appendChild(link);
var videoWrapper= document.createElement('div');
document.getElementsByTagName("div")[0].setAttribute("class", "scoreboard-video-outer-link");
link.appendChild(videoWrapper);
var videoThumbnailWrapper = document.createElement('div');
document.getElementsByTagName("div")[0].setAttribute("class", "scoreboard-video--thumbnail");
videoWrapper.appendChild(videoThumbnailWrapper);
var videoImage = document.createElement('img');
document.getElementsByTagName("img")[0].setAttribute("src", "url-of-image-from-api");
videoThumbnailWrapper.appendChild(videoImage);
Then I basically repeat that process for all nested HTML elements.
Create A-tag
Create class and href attributes for A-tag
Append class name and url to attributes
Append A-tag to main wrapper
Create DIV
Create class attributes for DIV
Append DIV to newly appended A-tag
I'd greatly appreciate it if you could enlighten me on the best way to do what I'm trying to explain here? Seems like it would get very messy.

Here's my answer. It's notated. In order to see the effects in the snippet you'll have to go into your developers console to either inspect the wrapper element or look at your developers console log.
We basically create some helper methods to easily create elements and append them to the DOM - it's really not as hard as it seems. This should also leave you in an easy place to append JSON retrieved Objects as properties to your elements!
Here's a Basic Version to give you the gist of what's happening and how to use it
//create element function
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//append child function
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//example:
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");
//create link and div
let link = create("a", { href:"google.com" });
let div = create("div", { id: "myDiv" });
//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));
//create element function
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//append child function
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//example:
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");
//create link and div
let link = create("a", { href:"google.com", textContent: "this text is a Link in the div" });
let div = create("div", { id: "myDiv", textContent: "this text is in the div! " });
//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));
div {
border: 3px solid black;
padding: 5px;
}
<div id="mainWrapper"></div>
Here is how to do specifically what you asked with more thoroughly notated code.
//get main wrapper
let mainWrapper = document.getElementById("mainWrapper");
//make a function to easily create elements
//function takes a tagName and an optional object for property values
//using Object.assign we can make tailored elements quickly.
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//document.appendChild is great except
//it doesn't offer easy stackability
//The reason for this is that it always returns the appended child element
//we create a function that appends from Parent to Child
//and returns the compiled element(The Parent).
//Since we are ALWAYS returning the parent(regardles of if the child is specified)
//we can recursively call this function to great effect
//(you'll see this further down)
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//these are the elements you wanted to append
//notice how easy it is to make them!
//FYI when adding classes directly to an HTMLElement
//the property to assign a value to is className -- NOT class
//this is a common mistake, so no big deal!
var link = create("a", {
className: "scoreboard-video-outer-link",
url: "google.com"
});
var videoWrapper = create("div", {
className: "scoreboard-video-outer-link"
});
var videoThumbnailWrapper = create("div", {
className: "scoreboard-video--thumbnail"
});
var videoImage = create("img", {
src: "url-of-image-from-api"
});
//here's where the recursion comes in:
ac(mainWrapper, ac(link, ac(videoWrapper, ac(videoThumbnailWrapper, videoImage))));
//keep in mind that it might be easiest to read the ac functions backwards
//the logic is this:
//Append videoImage to videoThumbnailWrapper
//Append (videoImage+videoThumbnailWrapper) to videoWrapper
//Append (videoWrapper+videoImage+videoThumbnailWrapper) to link
//Append (link+videoWrapper+videoImage+videoThumbnailWrapper) to mainWrapper
let mainWrapper = document.getElementById('mainWrapper');
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
var link = create("a", {
className: "scoreboard-video-outer-link",
url: "google.com"
});
var videoWrapper = create("div", {
className: "scoreboard-video-outer-link"
});
var videoThumbnailWrapper = create("div", {
className: "scoreboard-video--thumbnail"
});
var videoImage = create("img", {
src: "url-of-image-from-api"
});
ac(mainWrapper, ac(link, ac(videoWrapper, ac(videoThumbnailWrapper, videoImage))));
//pretty fancy.
//This is just to show the output in the log,
//feel free to just open up the developer console and look at the mainWrapper element.
console.dir(mainWrapper);
<div id="mainWrapper"></div>

Short version
Markup.js's loops.
Long version
You will find many solutions that work for this problem. But that may not be the point. The point is: is it right? And you may using the wrong tool for the problem.
I've worked with code that did similar things. I did not write it, but I had to work with it. You'll find that code like that quickly becomes very difficult to manage. You may think: "Oh, but I know what it's supposed to do. Once it's done, I won't change it."
Code falls into two categories:
Code you stop using and you therefore don't need to change.
Code you keep using and therefore that you will need to change.
So, "does it work?" is not the right question. There are many questions, but some of them are: "Will I be able to maintain this? Is it easy to read? If I change one part, does it only change the part I need to change or does it also change something else I don't mean to change?"
What I'm getting at here is that you should use a templating library. There are many for JavaScript.
In general, you should use a whole JavaScript application framework. There are three main ones nowadays:
ReactJS
Vue.js
Angular 2
For the sake of honesty, note I don't follow my own advice and still use Angular. (The original, not Angular 2.) But this is a steep learning curve. There are a lot of libraries that also include templating abilities.
But you've obviously got a whole project already set up and you want to just plug in a template into existing JavaScript code. You probably want a template language that does its thing and stays out of the way. When I started, I wanted that too. I used Markup.js . It's small, it's simple and it does what you want in this post.
https://github.com/adammark/Markup.js/
It's a first step. I think its loops feature are what you need. Start with that and work your way to a full framework in time.

Take a look at this - [underscore._template]
It is very tiny, and useful in this situation.
(https://www.npmjs.com/package/underscore.template).
const targetElement = document.querySelector('#target')
// Define your template
const template = UnderscoreTemplate(
'<a class="<%- link.className %>" href="<%- link.url %>">\
<div class="<%- wrapper.className %>">\
<div class="<%- thumbnail.className %>">\
<img src="<%- thumbnail.image %>">\
</div>\
<div class="<%- info.className %>">\
<div class="<%- info.title.className %>"><%- info.title.text %></div>\
</div>\
</div>\
</a>');
// Define values for template
const obj = {
link: {
className: 'scoreboard-video-outer-link',
url: '#someurl'
},
wrapper: {
className: 'scoreboard-video--wrapper'
},
thumbnail: {
className: 'scoreboard-video--thumbnail',
image: 'http://via.placeholder.com/350x150'
},
info: {
className: 'scoreboard-video--info',
title: {
className: 'scoreboard-video--title',
text: 'Pelicans # Bulls Postgame: E`Twaun Moore 10-8-17'
}
}
};
// Build template, and set innerHTML to output element.
targetElement.innerHTML = template(obj)
// And of course you can go into forEach loop here like
const arr = [obj, obj, obj]; // Create array from our object
arr.forEach(item => targetElement.innerHTML += template(item))
<script src="https://unpkg.com/underscore.template#0.1.7/dist/underscore.template.js"></script>
<div id="target">qq</div>

Cannot locate element using recursion after it found it as visible

My Problem:
I am trying to click options in a dropdown with Nightwatch, using sections in page objects. I'm not sure if it's a problem with the section declaration or i'm missing something scope-related. Problem is that it finds the element as visible, but when it tries to click it will throw error that it cannot locate it using recursion.
What could i try to do to fix this issue using sections?
In the test:
var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;
// [finding and clicking the dropdown so it opens and displays the options]
browser.pause (3000);
browser.expect.section('#setResults').to.be.visible.before(1000);
myPage.myFunction(mySection, '18');
In the page object:
var searchKeywordCommands = {
myFunction: function (section, x) {
section.expect.element('#set18').to.be.visible.before(2000);
if (x == '18') section.click('#set18');
//[...]
};
module.exports = {
//[.. other elements and commands..]
sections: {
setResults: {
selector: '.select-theme-result', //have also tried with '.select-content' and '.select-options' but with the same result
elements: {
set18: '.select-option[data-value="18"]',
set36: '.select-option[data-value="36"]' //etc
}}}}
Here is my source code:
When i run this piece of core, it seems to find the section, finds the element visible (i also can clearly see that it opens the dropdown and shows the options) but when trying to click any option, i get the error: ERROR: Unable to locate element: Section[name=setResults], Element[name=#set18]" using: recursion
Here is the full error:
My attempts:
I have tried to declare that set18 selector as an individual element instead of inside of the section and everything works fine this way, but won't work inside of the section. I have also tried all the selectors available to define the section's selector, but it won't work with any of them.

This is what i am doing with(LOL)
I assume steps would be (find dropbox - click dropbox - select value).
var getValueElement = {
getValueSelector: function (x) {
return 'li[data-value="'+ x + '"]';
}
};
module.exports = {
//[.. other elements and commands..]
sections: {
setResults: {
commands:[getValueElement],
selector: 'div[class*="select-theme-result"', //* mean contains,sometime class is too long and unique,also because i am lazy.
elements: {
setHighlight:'li[class*="select-option-highlight"]',
setSelected:'li[class*="select-option-selected"]',
//set18: 'li[data-value="18"]',
//set36: 'li[data-value="36"]'
// i think getValueFunction is better,what if you have 100+ of set.
}}}}
In your test
var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;
// [finding and clicking the dropdown so it opens and displays the options]
mySection
.click('#dropboxSelector')
.waitForElementVisible('#setHighlight',5000,false,
function(){
var set18 = mySection.getValueElement(18);
mySection.click(set18);
});
Ps:in my case(i think your case also), dropbox or any small third-party js framework which is used many times in your web app, so better create a different PageObject for it,make pageObject/section is simple as possible.

Jquery - Add hyperlink to datatables

Using the DataTable plugin I am able to generate a table just fine but I want a custom hyperlink on one of the columns that links to another page but taking information from the rest of the row...for example in row 1 I want a hyperlink: http://url/?data['imdata'][i]['faultInst']["attributes"]["code"] or something like that. I've seen a lot of complicated examples from other forms but couldn't get it to work. Looking for the simplest solution as this is a side project and I need it to be completed.
$(document).ready(function(){
$.getJSON('/static/faults.json', function (data) {
var test = $('#table5').DataTable({
});
var tr;
for (var i = 0; i < data["totalCount"]; i++) {
test.row.add([
data['imdata'][i]['faultInst']["attributes"]["code"],
data['imdata'][i]['faultInst']["attributes"]["cause"],
data['imdata'][i]['faultInst']["attributes"]["descr"],
data['imdata'][i]['faultInst']["attributes"]["created"],
data['imdata'][i]['faultInst']["attributes"]["changeSet"],
data['imdata'][i]['faultInst']["attributes"]["childAction"],
data['imdata'][i]['faultInst']["attributes"]["dn"],
data['imdata'][i]['faultInst']["attributes"]["domain"],
data['imdata'][i]['faultInst']["attributes"]["highestSeverity"],
data['imdata'][i]['faultInst']["attributes"]["lastTransition"],
data['imdata'][i]['faultInst']["attributes"]["lc"],
data['imdata'][i]['faultInst']["attributes"]["occur"],
data['imdata'][i]['faultInst']["attributes"]["origSeverity"],
data['imdata'][i]['faultInst']["attributes"]["prevSeverity"],
data['imdata'][i]['faultInst']["attributes"]["rule"],
"test",
//data['imdata'][i]['faultInst']["attributes"]["Severity"],
data['imdata'][i]['faultInst']["attributes"]["subject"],
data['imdata'][i]['faultInst']["attributes"]["type"],
//data['imdata'][i]['faultInst']['attributes']["ack"]
"test",
"test"
])
}
test.draw();
});
});

When you have a setup like this, just avoid to define data, by that you get the proper value you can turn into a link. dataTables know which data it should pass to the render function by the targets value. Example :
var table = $('#example').DataTable({
columnDefs : [
{ targets : [0],
render : function(data) {
return '<a href="'+data+'" target_blank>'+data+'</a>'
}
}
]
})
table.row.add(['https://example.com', 'david', 'programmer']).draw()
demo -> http://jsfiddle.net/47k7nhkb/