Develop Reference

jQuery dynamically add content to div

What I'm trying to do is add for each items in a xml file their content to a html page. I'm trying to make it so that every item content is inside an <article> tag. However, It's my first time using jQuery and my end result is not what I want.
let $items = $(xmlContent).find("item");
$items.each(function() {
let title = $(this).find('title').text();
let date = $(this).find('pubDate').text();
let link = $(this).find('link').text();
let guid = $(this).find('guid').text();
let photo = $(this).find('media').html();
$("#world").append("<article></article>", [$("<a>", {
href: link
}) + ("<h3>" + title + "</h3>")]);
This is what the end result currently is:
<article></article>
[object Object]
<h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3>
And what I want it to become:
<article> <a href= myLink <h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3> </a> </article>
I want to apply my link so that everywhere the user click on the content it goes to the link. Hopefully you can guide me. Thanks!

You can build your article element step by step.
Create 'article' as an element, then create your 'a' element. Append the 'h3' element to the 'a' element before appending 'a' to 'article', and then 'article' to '#world'.
let article = $("<article></article>")
let a = $("<a></a>", {href: link})
a.append("<h3>" + title + "</h3>")
article.append(a)
$("#world").append(article)

You're not using append as described in the documentation -- see the type of arguments you can pass.
Maybe you intended this:
$("#world").append(
$("<article>").append(
$("<a>", { href: link }),
$("<h3>").text(title)
)
);

Break some html code into Array of objects

I am trying to analyse some html code and break it into an array of objects.
Here is some example html code:
<slide data-time=5>
<div class="cds-block-title">Master Calendar</div>
<div class="cds-block-content">iframe to master calendar</div>
</slide>
<slide data-time=5>
<div class="cds-block-title">Weather</div>
<div class="cds-block-content">iframe to master Weather App</div>
</slide>
My goal is to break it down into an object similar to this:
[
{
"html":"<slide.....</slide>",
"time":"5",
"title":"Master Calendar",
"content":"iframe...."
},
{
"html":"<slide.....</slide>",
"time":"5",
"title":"Master Calendar",
"content":"iframe...."
}
]
I have tried a few different approaches.
Using Regex (This worked in my test, but not when I put it in production, the .match stopped working as expected, I also read a few posts stating that using regex to parse html code is not the best approach):
function splitSlidesHtml(html){
var html = '<slide data-time="5"><div class="cds-block-title">Activities & Sports</div><div class="cds-block-content">content</div></slide><slide data-time="5"><div class="cds-block-title">weather</div><div class="cds-block-content">content</div></slide>"';
var slides = html.match(/<slide.*?>(.*?)<\/slide>/g);
var slidesA = [];
if (!slides) {
slidesA.push({"html":html});
} else {
for (i in slides){
var c = {};
c.html = slides[i];
c.time = slides[i].match(/(data-time=)(.*?)>/)[2].replace(/['"]+/g, ''); // extract the time, and replace any quotes that might be around it
c.title = slides[i].match(/<div class="cds-block-title">(.*?)<\/div>/)[1];
c.content = slides[i].match(/<div class="cds-block-content">(.*?)<\/div>/)[1];
slidesA.push(c);
}
}
return slidesA;
} // end splitSlidesHtml
I have also tried using jQuery, which kind-of works, but I don't know enough about parseHTML to know how to make sure it breaks at the different slides.
var slides = $.parseHTML(html);
console.log(slides);
console.log(slides[0].innerHTML);
console.log(slides[0].outerHTML);

You can use $.parseHTML() to convert your HTML string into an array of DOM nodes and then loop over the nodes to grab the information you need. .map() is a good use in this case as you are mapping each node to something else.
var html = '<slide data-time=5>\
<div class="cds-block-title">Master Calendar</div>\
<div class="cds-block-content">iframe to master calendar</div>\
</slide>\
<slide data-time=5>\
<div class="cds-block-title">Weather</div>\
<div class="cds-block-content">iframe to master Weather App</div>\
</slide>';
var slides = $($.parseHTML(html)).map(function () {
return {
// store the HTML
html: this.outerHTML,
// store the data-time attribute
time: this.dataset.time,
// store the title
title: $('.cds-block-title', this).text(),
// store the content
content: $('.cds-block-content', this).text(),
};
}).get();
console.log(slides);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

This is what I finally came up with. I had trouble with map working to get the time correctly.
var html = sheetData['values'][prop]['html'];
var parsed = $.parseHTML(html);
var isSlide = true;
for (n in parsed){
var cur = parsed[n];
if (cur.nodeName == "SLIDE"){
var curSlide = {
html: cur.outerHTML, // store the HTML
time: cur.dataset.time, // store the data-time attribute
title: $('.cds-block-title', cur).html(), // store the title
content: $('.cds-block-content', cur).html(), // store the content
};
} else {
isSlide = false;
}
}

Meteor and Mongo DB

I have two questions.
1) I have these two document in MongoDB calender and calendarios_slaves. calender has a subdocument with array of calendarios_slaves ObjectID.
I have tried several queries but all to no result, How cxan I pull the ObjectID's of all the calendarios_slaves in the calender document.?
this is the calender document:
{
"_id" : ObjectId("577a09d3e9ac22d62a20ab01"),
"status_visualizacion" : "visible",
"status_tipo" : "Pintura",
"createdAt" : ISODate("2016-07-04T07:01:39.018Z"),
"usuarios_admin" : [
ObjectId("5773976c201bb491f499c180"),
ObjectId("577a03db9da98306f624c3d9"),
ObjectId("577a041d9da98306f624c3da"),
ObjectId("577a07b7e9ac22d62a20aae9"),
ObjectId("577a07c6e9ac22d62a20aaea"),
"Ys6fiychXcSfCgWox"
],
"grupo_usuarios" : [
ObjectId("5773976c201bb491f499c180"),
ObjectId("577a03db9da98306f624c3d9"),
ObjectId("577a041d9da98306f624c3da"),
ObjectId("577a07b7e9ac22d62a20aae9"),
ObjectId("577a07c6e9ac22d62a20aaea")
],
"calendario_slaves" : [
ObjectId("577b6a0114b9512e1e3f4c10"),
ObjectId("577b6a1d14b9512e1e3f4c11"),
ObjectId("577b6a2414b9512e1e3f4c12")
]
}
2) Is there anyway of pulling out nodes from a query in javascript in meteor. I used a queries to get all whole document in meteor (Client) javascript but couldn't get the nodes even though I was able to do that in the html using the #each loop..
Meteor.subscribe("calenders_user_visible");
Template.calendarios_visibles.helpers({
ls_calenderios_visibles: function(){
var result = Calender.find({status_visualizacion: "visible"});
return result;
}
});
<template name= "calendarios_visibles">
Calendarios visible!
<ul>
{{#each ls_calenderios_visibles}}
<li class = "calendarios_slave"> Calendarios slaves: {{calendario_slaves}} </li>
</ul>
{{/each }}
</template>
Result en Browser:
Calendarios visible!
Pintura visible
Calendarios slaves: ObjectID("577b6a0114b9512e1e3f4c10"),ObjectID("577b6a1d14b9512e1e3f4c11"),ObjectID("577b6a2414b9512e1e3f4c12")
vehiculo visible
Calendarios slaves: ObjectID("577b6a0114b9512e1e3f4c10"),ObjectID("577b6a1d14b9512e1e3f4c11"),ObjectID("577b6a2414b9512e1e3f4c12")
montaje visible
Calendarios slaves: ObjectID("577b6a0114b9512e1e3f4c10"),ObjectID("577b6a1d14b9512e1e3f4c11"),ObjectID("577b6a2414b9512e1e3f4c12")
Is there any way of getting these ObjectIds in Javascript immediately after getting the queries result?? I am only interested in these ObjectId values to make other queries not to display them in the browser.
Could any one with more experience help me out please?
Thanks

For 1st :
There are two way if you are want to get a result for single or more than one calender doc.
For single doc :
var calender = calenderCollection.findOne('ID');
var result= [];
if(calender.calendario_slaves.map){
result = calender.calendario_slaves.map(function(data){
return data;
})
}
return data;
For multiple doc :
var calenders = calenderCollection.find({query}).fetch();
var result= [];
for ( var i = 0; i < calenders.length; i++ ) {
for ( var j = 0; j < calenders[i].calendario_slaves; j++ ) {
result.push(calenders[i].calendario_slaves[j]);
}
}
return result;
For 2nd :
<ul>
{{#each ls_calenderios_visibles}}
{{#each calendario_slaves}}
<li class = "calendarios_slave">
Calendarios slaves: {{this}} // You can pass this into another helper to perform some operation.
</li>
{{/each}}
{{/each }}
</ul>
#note: your question 2 is not well clear for me, Please let me know if you need something else for question 2.

Protractor AngularJS count, copy, and verify a list span

I am new to automated testing, Protractor, and angularJS. I have a list that I would like to count, copy to an array maybe, and verify the list text is present. For example The list shows Attractions, Capacity, and Content to the user so they know what privileges they have.
Below is the .html
<div class="home-info">
<div class="home-top home-section">
<h3>User Information</h3>
<div class="home-box">
<div class="property-group wide">
<span>
Change Phillips<br />
</span>
</div>
</div>
<div class="home-box">
<div class="property-group wide">
<div>Editors:</div>
<span>
<ul class="property-stack">
<li><span>Attractions</span>
</li>
<li><span>Capacity</span>
</li>
<li><span>Content</span>
</li>
<li><span>Media</span>
</li>
<li><span>Options</span>
</li>
<li></li>
<li></li>
<li><span>Upload CADs</span>
</li>
</ul>
</span>
</div>
</div>
</div>
Below is the code I have written. I can get the first item on the list however using .all isn't working for me.
var text = "";
browser.driver.findElement.all(By.xpath("//li/span")).count().then(function(count) {
initialCount = count;
console.log(initialCount);
});
browser.driver.findElement(By.xpath("//li/span")).getText().then(function(text) {
console.log(text);
});
I'm trying to avoid using xpath as I was told to try and avoid. To be honest Im lost. Thanks for the help in advance.
Code used for matching:
expect(myLists).toEqual(['Attractions', 'Capacity', 'Conent',
'Media', 'Options', 'Upload CADs'
]);

I am not sure what version of protractor you're using but you should be able to just call element without the browser or driver prefix. Using element.all should get you the array of of elements you're looking for.
If you want to access specific indexes within that array you can use the .get(index) suffix to the element.all
So below:
1. you get the array of the elements
2. you get the count of the array
3. we call a for loop to iterate through all the indexes of the array
4. each index of the array we call the getText() and print it to the console
var j = 0; // using this since the i iterator in the for loop doesn't work within a then function
var textList = [];
var text = "";
var myLists = element.all(by.css("li span"));
myLists.count().then(function(count) {
console.log(count);
for(int i = 0; i < count; i++){
myLists.get(i).getText().then(function(text) {
textList[j++] = text;
console.log(text);
});
}
});
EDIT:
In researching I actually found another way to iterate through the array of elements by using the .each() suffix to the element.all.
var j = 0; // using this since the i iterator in the for loop doesn't work within a then function
var textList = [];
var text = "";
var myLists = element.all(by.css("li span"));
myLists.count().then(function(count) {
console.log(count);
myLists.each(function(element, index) {
element.getText().then(function (text) {
textList[j++] = text;
console.log(index, text);
});
});
});
you should be able to use the textList array to match things.
expect(textList).toEqual(['Attractions', 'Capacity', 'Conent',
'Media', 'Options', 'Upload CADs'
]);

Save and load a flowchart on jsPlumb

What's the best approach to save and load an flowchart on jsPlumb?

I managed to save the chart by simply having all the elements inside an array of objects, where each object has source and target nodes, x, y coordinates.
When saving, simply do JSON.stringify(whole_object), and if loading, simply JSON.parse() and manually position the nodes as well as connect them.

My solution save and load jsPlumb:
function Save() {
$(".node").resizable("destroy");
Objs = [];
$('.node').each(function() {
Objs.push({id:$(this).attr('id'), html:$(this).html(),left:$(this).css('left'),top:$(this).css('top'),width:$(this).css('width'),height:$(this).css('height')});
});
console.log(Objs);
}
function Load() {
var s="";
for(var i in Objs) {
var o = Objs[i];
console.log(o);
s+='<div id="'+ o.id+'" class="node" style="left:'+ o.left+'; top:'+ o.top+'; width:'+ o.width +'; height:'+ o.height +' "> '+ o.html+'</div>';
}
$('#main').html(s);
}
UPD Demo: http://jsfiddle.net/Rra6Y/137/
Note: if demo does not work in JsFiddle, make sure it points to an existing jsPlumb link (links are listed in "External Resources" JsFiddle menu item

My save functionality does a bit more than just save the x, y position of the element and its connections. I also added saving a connection Label overlay as well as custom text for each element. You can tailor this solution as per your requirements but here it is basically:
//save functionality
function IterateDrawnElements(){ //part of save
var dict = {};
$('#id_diagram_container').children('div.window').each(function () {
var pos = $(this).position()
var diagram_label = $(this).children('div.asset-label').children('div.asset-diagram-label').text()
if (diagram_label == null || diagram_label == ''){
diagram_label='';
}
dict[this.id] = [pos.left, pos.top, diagram_label];
});
return dict;
}
function IterateConnections(){ //part of save
var list = [];
var conns = jsPlumb.getConnections()
for (var i = 0; i < conns.length; i++) {
var source = conns[i].source.id;
var target = conns[i].target.id;
try{
var label = conns[i].getOverlay("label-overlay").labelText;
}
catch(err) {
label = null
}
//list.push([source, target])
if (source != null && target != null){
list.push([source, target, label]);
};
}
return list;
}
I initiate all this when the user hits the save button, an ajax call is made back to the server, in this case Django is intercepting the ajax request and saves the data to the database.
//ajax call when save button pressed
$save_btn.click(function() {
//drawn elements
var d_elements = IterateDrawnElements();
var d_conns = IterateConnections();
var d_name =$('#id_diagram_name').val();
$.ajax({
url : ".",
type : "POST",
dataType: "json",
data : {
drawn_elements: JSON.stringify(d_elements),
conns: JSON.stringify(d_conns),
diagram_name: d_name,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (result) {
if (result.success == true){
save_status.html(result.message)
}
//console.log(JSON.stringify(result));
$save_btn.attr('disabled','disabled');
if (result.old_name != false){
//alert()
$('#id_diagram_name').val(result.old_name)
}
},
error: function(xhr, textStatus, errorThrown) {
alert("Please report this error: "+errorThrown+xhr.status+xhr.responseText);
}
});
//return false; // always return error?
});
To load all this up is even easier and there are many ways you can do this. In Django you can just generate the html straight in your template as well as the js for the connections or you can create a JSON object in javascript for everything and then have javascript draw it all based on the array. I used jquery for this.
//js & connections load
var asset_conns = [
{% for conn in diagram_conns %}
[ {{ conn.source.id }}, {{ conn.target.id }}, '{{ conn.name }}' ],
{% endfor %}
]
// Takes loaded connections and connects them
for (var i = 0; i< asset_conns.length; i++){
var source = asset_conns[i][0].toString();
var target = asset_conns[i][1].toString();
var label = asset_conns[i][2];
var c = jsPlumb.connect({source: source, target: target, detachable:true, reattach: true }); //on init already know what kind of anchor to use!
if (label != null && label != 'None'){
c.addOverlay([ "Label", { label: label, id:"label-overlay"} ]);
}
}
//html right into django template to draw elements, asset element interchangeable terms
{% for element in drawn_elements %}
<div id="{{ element.asset.id }}" class="window" style="left:{{ element.left }}px;top:{{ element.top }}px;background-image: url('{% static element.asset.asset_mold.image.url %}'); width: {{ element.asset.asset_mold.image.width }}px;height: {{ element.asset.asset_mold.image.height }}px;">
<div class="asset-label" id="label-{{ element.asset.id }}">
{#{{ element.asset }}#}<a class="lbl-link" id="lbl-link-{{ element.asset.id }}" href="{{ element.asset.get_absolute_url }}">{{ element.asset }}</a>
<div class='asset-diagram-label' id="lbl-{{ element.asset.id }}">{% if element.asset.diagram_label %}{{ element.asset.diagram_label }}{% endif %}</div>
</div>
<div class='ep' id="ep-{{ element.asset.id }}"></div>
</div>
{% endfor %}
You can greatly simplify this but mine also gets a background for the element, as well as label and the shape of the element to use with perimeter anchors. This solution works and is tested. I'll release an open source Djago application for this soon on PyPi.

I'm using YUI with it. I'm saving the position of each box item being connected in a table. I them have a separate table the stores a parent to child relationship between the items, which is used to determine the lines jsPlumb should draw. I determine this using a selection process in which the first item selected is the parent, and all other items are children. When the "connect" button is clicked, the parent/child selection of the items is cleared. I also toggle this if you click the selected parent - it clear the child selections as well.

I recently wrote this blog post about why jsPlumb doesn't have a save function (and what I recommend you do):
http://jsplumb.tumblr.com/post/11297005239/why-doesnt-jsplumb-offer-a-save-function
...maybe someone will find it useful.