I have a javascript function which will read the device ContactList and add them into a javascript array.In my HTML page i have taken a listview.Now as per my requirement i have to add these array data into the listview by jquery dynamically which i am not able to do .I am not able to see anything on the screen of the mobile on launching the app..
Here is my javascript code to read from Mobile's contact list..
function onDeviceReady() {
// specify contact search criteria
var options = new ContactFindOptions();
options.filter=""; // empty search string returns all contacts
options.multiple=true; // return multiple results
filter = ["displayName"]; // return contact.displayName field
// find contacts
navigator.contacts.find(filter, onSuccess, onError, options);
}
var names = [];
// onSuccess: Get a snapshot of the current contacts
//
function onSuccess(contacts) {
for (var i=0; i<contacts.length; i++) {
if (contacts[i].displayName) { // many contacts don't have displayName
names.push(contacts[i].displayName);
}
}
alert('contacts loaded');
}
and here is my HTML listview..
<div data-role="page" id="home" data-theme="c">
<div data-role="content">
<div id="header" class="header">
<h1>Contact Directory</h1>
</div>
<ul data-role="listview" id="contactlist" data-theme="a">
</ul>
</div>
</div>
So, My question is how can i add the array values into the listview by jquery dynamically..
Thanks..
Couple of ways, but here is one way.
Create a simple string variable to hold your LIs.
Loop over names and append to the string <li> + names[x] + </li> where X is your loop counter.
Use jQuery to get the UL dom and then do .html(s) where s is your string.
Basically you are injecting <li>...</li><li>...</li> into your UL.
The last step is to refresh the list view so jQuery displays it correctly. This is done with the refresh API, defined here: http://api.jquerymobile.com/listview/#method-refresh
Related
I have the following data which gets served from a neo4j query, The data that gets sent back is in the format
home->parent->child1
home->parent->child2
home->parent2->child1
home->parent3->child1
home->parent3->child2
home->parent3->child3
I am trying to use javascript to display html which should be like this
<div id="parent1">
<div id="child1"></div>
<div id="child2"></div>
</div>
<div id="parent2">
<div id="child1"></div>
</div>
i tried loopong throigh the query and trying to get the parent to be the index of an object and the child to be values under it
i would do this like this in php
$jsonContents = (object)("parent"=>"child","parent"=>"child"....);
$array = array();
foreach($jsonContents as $jsCo=>$jsoCont){
$array[$jsoCont->parent][] = $jsoCont->child;
}
this would return the
$array as
home->parent1->[0]->child
->[1]->child
parent2->[0]->child...
This would let me avoid the check for uniqueness of the home parent category as well as put them in a hierarchy so i can interpret it properly in my View part of MVC, to create my div structure.
this is the url for the example json data
http://www.jsoneditoronline.org/?id=bdda268982eb431d361c25e9035bbc99
No answers to this, solved it by myself.
Here
var data = 'data shown in link above';
var myArr = [];
$.each(data, function(index, element) {
var parent = String(element.parent.properties.name);
var child = String(element.child.properties.name);
if(myArr[parent]){
myArr[parent][(myArr[parent].length)] = child;
} else {
myArr[parent] = Array(child);
}
});
Hope this helps people. :)
I have a Cordova Android app, running Ionic, and I have a script that gets RSS Feeds from multiple URLs.
To make sure that it doesn't just store the last feeds entries in the local storage, I have made an array where I push each RSS Feeds' entries into it so that I can display all the entires from all the feeds.
This is how I've set up the array:
$scope.$apply(function(){
$scope.entryDB = [];
});
This is how the code for fetching each RSS Feed looks:
db.transaction(function(tx) {
tx.executeSql("SELECT (data) FROM note", [], function(tx,res){
for(var iii = 0; iii < res.rows.length; iii++){
alert(res.rows.item(iii).data);
$http.get("https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=" + res.rows.item(iii).data)
.success(function(data) {
$scope.rssTitle = data.responseData.feed.title;
$scope.rssUrl = data.responseData.feed.feedUrl;
$scope.rssSiteUrl = data.responseData.feed.link;
$scope.entries = data.responseData.feed.entries;
window.localStorage.setItem("entries", JSON.stringify(data.responseData.feed.entries));
$scope.entryDB.push(JSON.stringify(data.responseData.feed.entries));
alert($scope.entryDB)
})
.error(function(data) {
console.log("ERROR: " + data);
if(window.localStorage["entries"] !== undefined) {
$scope.entries = JSON.parse(window.localStorage["entries"]);
}
});
}
});
}, function(err){
alert("An error occured while displaying saved notes");
});
(res.rows.item(iii).data is each feed's URL)
The weird thing is that when I try to display the entries using ng-repeat, if I use the entryDB array, it only outputs the entire array as one entry in HTML, but if I use the localStorage "Entries", it works perfectly fine by iterating properly and displaying multiple card items.
I have tried doing alert() to both the localStorage entry and the entryDB entry and they look identical, but ng-repeat won't iterate over the entryDB entries.
This is how I'm trying to display the entires:
<ion-content ng-controller="FeedController" ng-init="init()" class="has-tabs-top">
<!-- // List of Cards // -->
<div class="list card" ng-repeat="entry in entryDB">
<!-- // Card Title // -->
<div class="item item-divider">{{entry.link}}</div>
<!-- // Card Contents // -->
<div class="item item-body" ng-click="browse(entry.link)">
<h2><b>{{entry.title}}</b></h2>
<p>{{entry.contentSnippet}}</p>
<p><a class="subdued">{{entry.publishedDate}}</a></p>
</div>
</div>
</ion-content>
If I try to just display {{entry}}, I can see that it's successfully getting the entire entryDB array, but it won't iterate and just displays one card item with the entire array on it.
Been stuck at this now for 2 days and I've tried looking online for hours - Iæve tried adding 'track by $index' to the ng-repeat but that didn't work either.
I'm a complete newbie when it comes to angularJS so would appreciate if someone could help me out!
Change this line $scope.entryDB.push(JSON.stringify(data.responseData.feed.entries));
to
$scope.entryDB.push(data.responseData.feed.entries);
I'm trying to load an carousel with angularjs using owl-carousel. I want my carousel to scroll endless, loading items every time the list is fully scrolled and adding queried elements to the actual list. My issue is:
When I get data from the controller of the next page, I want to merge and contact the received items to be merged the the current array and be rendered at the end of the carousel, here is what I've done:
<data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav : false}">
<div owl-carousel-item="" ng-repeat="item in hmc.ProductData.Products track by $index" class="item">
<a ng-href="/#!//{{Page.Culture+'/product/'+item.id}}">
<div class="telewebion-show-box one-row">
<div class="telewebion-show-box-cover">
<ul>
<li>{{::item.title}}</li>
<li>{{::item.price}}</li>
</ul>
</div>
<img ng-src="{{::item.picture_path}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
</div>
</data-owl-carousel>
And here is my controller:
hmc.getProducts=function(){
ProductFactory.getProducts(hmc.ProductData.Offset,hmc.ProductData.Limit).then(function(Products){
if(hmc.ProductData.Page==0)
{
hmc.ProductData.Products[0]='';
}
hmc.ProductData.Page++;
var tempArray=[];
tempArray.push(Products);
console.log(tempArray);
hmc.ProductData.Products [0]=hmc.ProductData.Products [0].concat(tempArray[0]);
console.log(hmc.ProductData.Products );
hmc.ProductData.UpdateInProgress=false;
});
}
but it doesn't contact and merge the array and wouldn't work.
With tempArray.push(Products); you push a single array, considered as the whole variable, in a single cell of the array tempArray without obtaining the expected result. You should call:
tempArray = tempArray.concat(Products);
This way you push every element of Products in tempArray. Please note that concat does not modify the calling array directly, this behavior force you to reassign its return value to the original tempArray.
I Just did it like this:
hmc.ProductData.Page++;
var tempArray=[];
var tempArray2=[];
tempArray.push(AjaxProducts);
tempArray2.push(hmc.ProductData.Products);
hmc.ProductData.Products= tempArray2[0].concat(tempArray[0]);
tempArray.length = 0;
tempArray2.length = 0;
Now angular ng-repeat just repeat in a single array structure and ajax appends to the end of that array
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 a couple of templates with some copy in them. The copy is editable by the user and when the user edits and saves (by clicking a button) I insert the edited copy along with all HTML tags (for later, when I print the data out again) in a db.
When I log the data it works but as soon as I try and write it to the db I get a 'too much recursion' error and I don't understand why.
// Event
Template.editControls.events({
'click .save': function(e) {
var target = e.currentTarget.parentNode;
var targetContent = target.nextElementSibling;
if(targetContent.isContentEditable) {
var targetData = targetContent;
var selectedCopy = Session.get('activeElement');
ContentCollection.update(selectedCopy, {$set: {content: targetData}});
targetContent.contentEditable = false;
}
}
});
// Template
<section class="content" id="header">
<ul class="inline-list">
<li class="edit">edit</li>
<li class="save">save</li>
</ul>
<div class="content__editable" contenteditable="false">
<p>Header content I can change</p>
</div>
</section>