I tried app developing with Framework7.
I print my array (list) in this way:
if (list != null){
for (var i=0; i<list.length; i++){
output = output + '<li class="swipeout"><div class="item-content swipeout-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">' + list[i].name + '</div></div><div class="item-subtitle">' + new Date(list[i].fDate).toLocaleDateString() + '</div></div></div><div class="swipeout-actions-right">Delete</div></li>';
}
}
$$('#liste').html(output);
When I swipeout an entry, the entry will disappear but he is still in the array.
This is to handle the remove-event:
$$('.swipeout').on('deleted', function () {
myApp.alert('Item removed');
});
How can I get the index of the element to remove it also from the array?
Alternatively, is there an other way to solve this problem?
Thank you!
Markus
If I were you, I'd rather use Framework7's view engine to render the swipeout items and take advantage of the #index helper. Click here for further information.
In your markup, you'd have something similiar to this:
<div class="list-block">
<ul>
{{#each item in list}}
<li class="swipeout">
<!-- Usual list element wrapped with "swipeout-content" -->
<div class="swipeout-content">
<!-- Your list element here -->
<div class="item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
</div>
</div>
<!-- Swipeout actions right -->
<div class="swipeout-actions-right">
<!-- Swipeout actions links/buttons -->
<a href="#" data-index={{#index}}>Action 1</a>
<a class="swipeout-close" href="#" data-index={{#index}}>Action 2</a>
</div>
</li>
{{/each}}
Notice that I'm using the "each" helper along with "#index" to render the items and put an attribute on them with the id. But you can still achieve the same objective by using the "i" variable inside the for loop:
if (list != null){
for (var i=0; i<list.length; i++){
output = output + '<li class="swipeout"><div class="item-content swipeout-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">' + list[i].name + '</div></div><div class="item-subtitle">' + new Date(list[i].fDate).toLocaleDateString() + '</div></div></div><div class="swipeout-actions-right"><a href="#" class="swipeout-delete" data-index='+i+'>Delete</a></div></li>';
}
}
When the event is fired:
$$('.swipeout').on('deleted', function () {
var $thisAction = $(this);
// Here you delete the item
delete list[$thisAction.data('index')];
myApp.alert('Item removed');
});
In this case you can't use Array.slice because if you delete item 2 from the markup, the element with the index 3 will replace item 2. The problem with the above approach is that you have to take care of the "holes" in your array. A much better approach would be to use a two-way binding framework, such as VueJs.
Related
My aim is to replicate this structure automatically from a json file.
<ul class="sidebar-menu">
<li class="treeview">
Mammals
<ul class="treeview-menu">
<li>Goat</li>
<li> Sheep
<ul class="treeview-menu">
<li>Bone</li>
<li>Bone
<ul class="treeview-menu">
<li>Variant 1</li>
<li> Variant 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON
[
{"datasetID":"5fd4124900827","higherClassification":"Eukarya","kingdom":"Animalia","phylum":"Chordata","class":"Mammalia","order":"Artiodactyla","family":"Bovidae","genus":"Capra","subgenus":"None","vernacularName":"goat","commonName":"None","elementName":"Calcaneus","commonElementName":"None"},
{"datasetID":"5fd4058e5c8d2","higherClassification":"Eukarya","kingdom":"Animalia","phylum":"Chordata","class":"Mammalia","order":"Artiodactyla","family":"Bovidae","genus":"Capra","subgenus":"None","vernacularName":"goat","commonName":"goat","elementName":"Femur","commonElementName":"None"}
]
The relevant parts are:
"datasetID":"5fd4124900827"
"class":"Mammalia",
"order":"Artiodactyla",
"family":"Bovidae",
"genus":"Capra",
"subgenus":"None",
"vernacularName":"goat",
"elementName":"Calcaneus"},
So the class is on the top level of the hierarchy, it could be mammal, bird, fish...
Taking class: Mammalia as an example, under this is order under that family under that genus
then if there is a subgenus that is on the next level also.
Under that is the vernacularName then elementName.
Each record has a unique id datasetID there may be multiple "elementName": "Calcaneus" for a goat, these need an integer added (i.e. Calcaneus 1, then Calcaneus 2, then Calcaneus 3 etc.
>Mammalia
>order
>family
>genus
>subgenus (if exists)
>vernacularName
>elementName (if more than one append 1,2,3...)
So, my mega question, how to do this in javascript?
My attempt so far:
Php gets the json, yes this could be done in javascript.
<?php
$data = json_decode(file_get_contents("bonify" . $version . "/app/json/data.json"), True);
?>
Javascript picks up the json:
<script type="text/javascript">
const version = "<?php echo $version; ?>";
$.getJSON('bonify'+ version +'/app/json/data2.json', function(json) {
console.log(json); // this will show the info it in firebug console
obj = json
This lists all the json data:
function printValues(obj) {
for(var k in obj) {
if(obj[k] instanceof Object) {
printValues(obj[k]);
} else {
document.write(obj[k] + "<br>");
};
}
};
closing code:
});
</script>
I'm not convinced document.write is the best way to do this.
I have this code for my search and it seems like I should adapt that but with out the filter capability.
$('#txt-search').keyup(function(){
var searchField = $(this).val();
if(searchField === '') {
$('#filter-records').html('');
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="col-12 p-0"><hr />';
var count = 1;
$.each(data, function(key, val){
if ((val.datasetID.search(regex) != -1) || (val.ownerInstitutionCode.search(regex) != -1)|| (val.vernacularName.search(regex) != -1)|| (val.elementName.search(regex) != -1)) {
output += '<ul class="sidebar-menu">';
output += '<li><i class="fas fa-bone" data-fa-transform="rotate-45"></i> <span>' + val.vernacularName + ': ' + val.elementName + '</span></li>';
output += '</ul>';
if(count%2 == 0){
output += '</div>'
}
count++;
}
});
$('#filter-records').html(output);
});
});
});
I'm assuming several nested foreach loops is the way to go? I've put the whole aim for clarity. I am trying to learn and I have a learning disability so please be patient with me, thanks for your help. I've tried to included as much info as possible to avoid having my question closed as too broad.
You have a repeated pattern. If we assume that you have built a hierarchical data structure, then we can use a function using template literals, like:
function buildChildren(children) {
var tvms = [];
for (let child of children) {
tvms.push(myTreeViewMenu(child));
}
return tvms;
}
function myTreeViewMenu(treeViewMenu) {
tvms = buildChildren(treeViewMenu.children);
return `
<ul class="treeview-menu">
<li>${treeViewMenu.name} ${tvms.join("")}</li>
</ul>
`;
}
function myTree(tree) {
tvms = buildChildren(tree.children);
return `
<ul class="sidebar-menu">
<li class="treeview">
${tree.name}
${tvms.join("")}
</li>
</ul>
`;
}
(NOT TESTED)
This logic can be a starting point for you, basically you nest your pattern into itself. You need to make sure that from your raw JSON you build an object tree whose nodes have a string called name and an array for the subtree called children. Also, make sure there are no cycles in the tree.
I would like to know how to create a JSON or serialize (both is fine) from a ul including
<ul class="menu send ui-sortable">
<li id="pageid_1" class="ui-sortable-handle">Inscription
<ul class="menu send ui-sortable">
<li id="pageid_2" class="ui-sortable-handle">Joueurs en ligne
<ul class="menu send ui-sortable"></ul>
</li>
</ul>
</li>
I cannot find how to create something like this:
pageid[]=1&pageid[1]=2 OR [{"pageid":1,"children":[{"pageid":2}]}]
Meaning, including parent ID in [].
Thank you for your help!
This code will produce the output required
var result = [].map.call(document.querySelectorAll('ul.menu.send.ui-sortable li.ui-sortable-handle'), function(li) {
var parent = '';
if (li.parentNode && li.parentNode.parentNode && li.parentNode.parentNode.nodeName == 'LI' && li.parentNode.parentNode.matches('li.ui-sortable-handle')) {
parent = li.parentNode.parentNode.id.replace(/\D+/g, '');
}
return "pageid[" + parent + "]=" + li.id.replace(/\D+/g, '');
}).join('&');
console.log(result); // pageid[]=1&pageid[1]=2
I haven't thought about how to do the second format, because the first format is easier to produce
I am trying to make a dynamic list of my blog posts. I need the list to be displayed alphabetically. The current code is working okay, but gave me a chronological list. How can I arrange my list alphabetically. Current code is given below. It is for blogger blog and I used kimonolabs to make the API used in this code. The feed is in jason. (In blog page area I first created a blank html list and then used below code to insert data. Html is also given.) What should I do to make the result alphabetical.
jQuery.ajax({
"url":"https://www.kimonolabs.com/api/djwmp1p8?apikey=P1DP0fILX0ou5GnXR6DRbbRmkFuQNC0G",
"crossDomain":true,
"dataType":"jsonp",
//Make a call to the Kimono API following the "url"
'success': function(response){
// If the call request was successful and the data was retrieved, this function will create a list displaying the data
jQuery(".panel-heading").html(response.name);
//Puts the API name into the panel heading
var collection = response.results.collection1;
for (var i = 0; i < collection.length; i++){
// Traverses through every element in the entire collection
jQuery(".list-group").append('<li class="list-group-item">' +'<a href='+collection[i].property1.href +'>'+ collection[i].property1.text + '</a>' +'</li>');
// adds the text and the links from the first property into the list
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container padding">
<div class="panel panel-info">
<div class="panel-heading"></div>
<ol class="list-group">
</ol>
</div>
</div>
As response.results.collection1 is array, and you want it to order in alphabetical order, you need to sort by each item's property1.text:
collection.sort(function(item1, item2) {
return item1.property1.text > item2.property1.text ? 1 : -1;
});
jQuery.ajax({
"url":"https://www.kimonolabs.com/api/djwmp1p8?apikey=P1DP0fILX0ou5GnXR6DRbbRmkFuQNC0G",
"crossDomain":true,
"dataType":"jsonp",
//Make a call to the Kimono API following the "url"
'success': function(response){
// If the call request was successful and the data was retrieved, this function will create a list displaying the data
jQuery(".panel-heading").html(response.name);
//Puts the API name into the panel heading
var collection = response.results.collection1;
// VVVV Sort it by item.property1.text before print out.
collection.sort(function(item1, item2) {
// If item1.property1.text's alphabetical order is larger than item2's return 1, otherwise return 0.
return item1.property1.text > item2.property1.text ? 1 : -1;
//return item1.property1.text.localeCompare(item2.property1.text) > 0 ? 1 : -1;
});
for (var i = 0; i < collection.length; i++){
// Traverses through every element in the entire collection
jQuery(".list-group").append('<li class="list-group-item">' +'<a href='+collection[i].property1.href +'>'+ collection[i].property1.text + '</a>' +'</li>');
// adds the text and the links from the first property into the list
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container padding">
<div class="panel panel-info">
<div class="panel-heading"></div>
<ol class="list-group">
</ol>
</div>
</div>
http://jsfiddle.net/03f1ehsf/
collection.sort(function(a,b){ return b.property1.text>a.property1.text?0:1});
I have this unordered list and would like to get the data-file attribute value of a link element inside the list element of the unordered list, then delete the whole list element in which it lies if it is not in array z.
<ul id="hithere"class="image-list">
<li class='image-list'>
<div class='controls'>
<a href='#' class='image-list' data-name='myname'><img src='stop.png' ></a>
</div>
<span class='name'>myname12</span
</li>
<li class='image-list'>
<div class='controls'>
<a href='#' class='image-list' data-name='myname2'><img src='stop.png' ></a>
</div>
<span class='name'>myname1312</span
</li>
</ul>
And this is my jQuery but it deletes all the list elements
var z = ["myname", "yourname"];
$("li.image-list a.image-list ").filter(function () {
if ($.inArray($(this).attr('data-name'), z) == -1) {
$(this).parent("li.image-list").empty().remove();
}
});
here is the code recieving from server:
var box = $('#drone');
box.f_drop({
url: 't_file.php',
check_data:function(i,file,response){
z=[];z.push(response.Oname);
$("li.image-list ").filter( function () {
return $.inArray($(this).find('a[data-name]').attr('data-name'), z) == -1
}).remove();
},
});
why is it that all the lists are now being removed instead of just one ie the one not in array?? Also, how can i rename the data-name attribute,to say "xyz" instead.
There are few problems in your script
The array is called z not _out
The anchor element does not have a class
the data property is called name, not filename
Try
var z = ["myname", "yourname"];
$("li.image-list").filter(function () {
return $.inArray($(this).find('a[data-name]').attr('data-name'), z) == -1
}).remove();
Demo: Fiddle
I want to change the classname during an each loop;
so that it will look like this;
<div class="active">
// do somthing
</div>
<div class="static">
//do
</div>
my code looks like this
{{#each pages}}
<div class="active">
//do
</div>
{{/each}}
there is no identifier of the class. So the 1st one will be active, the rest of the items will be static.
You could add your own helper if you want to do this inside the template. Something like this:
Handlebars.registerHelper('each_with_class', function(ary, first, rest, options) {
if(!ary || ary.length == 0)
return options.inverse(this);
var result = [ ];
var context = null;
var cls = { cls: first };
for(var i = 0; i < ary.length; ++i) {
context = _({}).extend(ary[i], cls);
result.push(options.fn(context));
cls.cls = rest;
}
return result.join('');
});
Then your template could say things like this:
{{#each_with_class pages "active" "static"}}
<div class="{{cls}}">
Same stuff you're doing now.
</div>
{{/each_with_class}}
If you don't mind ary[i] getting modified along the way then you can assign directly to ary[i].cls instead of using _.extend to make a copy.
Demo: http://jsfiddle.net/ambiguous/ZMSQh/1/
as far as I know there are no indices provided by {{#each}} that could be checked..
a workaround would be to store this classes in your pages items and then use something like
{{#each pages}}
<div class="{{this.classname}}">
//do
</div>
{{/each}}