My JSON:
[{"status":"success","id":1,"title":"title1","content":"test"},
{"status":"success","id":2,"title":"title2","content":"test2"},
{"status":"success","id":3,"title":"title3","content":"test3"},
{"status":"success","id":4,"title":"title4","content":"test4"}]
I have the following success-function inside of my Ajax Request:
function(response){
response.forEach(function(data) {
$('#suche').append('<li id="post_id_' + data.id + '" ><div class="item-inner"><div class="item-title">' + data.title + '</div></div></li>');
})//foreach end
}
Now I want to show the content of the item with id 3 for example:
$(document).on('click', '#post_id_' + data.id, function(){
$('#postcontent').append(data.content);
});
How can I assign the correct content "test3" for this ID?
Assuming response is what you posted
[{"status":"success","id":1,"title":"title1","content":"test"},
{"status":"success","id":2,"title":"title2","content":"test2"},
{"status":"success","id":3,"title":"title3","content":"test3"},
{"status":"success","id":4,"title":"title4","content":"test4"}];
The following code should display the content associated with each element when you click on it.
function(response){
response.forEach(function(data) {
$('#suche').append('<li id="post_id_' + data.id + '" ><div class="item-inner"><div class="item-title">' + data.title + '</div></div></li>');
$(document).on('click', '#post_id_' + data.id, function(){
$('#postcontent').html(data.content); //replace content instead of appending
});
})//foreach end
}
Related
I have to use AngularJS to build a dashboard and one of the components is a table.
Since I did not find relevant dependencies/libraries for angularjs (like tabulator or datatables), I am doing it myself.
Instead of using the native angular filter, I built a custom method, but I am not sure if I am following a good approach.
The main idea is that when I pull the data object (array of objects) via Ajax, I create both an "original" and a "current" data object,s and at the beginning, they are exactly the same of course.
Then I created an input field above every column heading and I linked the search function to the blur and keyup events (enter key).
When the search function is triggered, I start making changes to the "current" object. This way I can filter by multiple columns incrementally. I filter the data object using an awesome library called AlaSQL.
I also linked to a button the "reset" method, which simply makes the "current" object equal to the "original" object, and cleans up the input fields.
The point is, am I missing any best practices? Are there better ways to do so with AngularJS?
Any suggestions?
Thanks a lot.
HTML
<div ng-app="myApp">
<div ng-controller="divController">
<my-table></my-table>
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('divController', function ($scope, $http) {
$scope.data = {};
$scope.data.current = null;
$scope.data.original = null;
$scope.filter = {
id: {
field: "id",
value: null
},
name: {
field: "name",
value: null
},
owner: {
field: "owner",
value: null
},
}
$scope.reset = function () {
console.log("reset");
$scope.data.current = $scope.data.original;
for (let prop in $scope.filter) {
$scope.filter[prop]["value"] = null;
}
}
$scope.filterExec = function (field, value) {
if (value) {
console.log(`Executing filter on field "${field.trim()}" by this value "${value.trim()}"`);
var filtered = alasql('SELECT * FROM ? where ' + field + ' LIKE "%' + value + '%"', [$scope.data.current]);
$scope.data.current = filtered;
}
}
$http.get("./workspaces_demo_obj.json")
.then(function (response) {
console.log(response);
$scope.data.original = response.data;
$scope.data.current = response.data;
});
});
app.directive('myTable', function () {
return {
template:
'<div>Total rows {{data.current.length}} <button ng-click="reset()">RESET</button></div>' +
'<table class="table table-responsive table-sm">' +
'<thead>' +
'<tr><th>Workspace ID</th>' +
'<th>Name</th>' +
'<th>Owner</th></tr>' +
'<tr><th><input ng-model="filter.id.value" ng-blur="filterExec(filter.id.field, filter.id.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.id.field, filter.id.value)" placeholder="Filter by id"></input></th>' +
'<th><input ng-model="filter.name.value" ng-blur="filterExec(filter.name.field, filter.name.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.name.field, filter.name.value)" placeholder="Filter by name"></input></th>' +
'<th><input ng-model="filter.owner.value" ng-blur="filterExec(filter.owner.field, filter.owner.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.owner.field, filter.owner.value)" placeholder="Filter by owner"></input></th></tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="x in data.current">' +
'<td>{{ x.workspace_id }}</td>' +
'<td>{{ x.name }}</td>' +
'<td>{{ x.owner }}</td>' +
'</tr>' +
'</tbody>' +
' </table>',
restrict: 'E'
};
});
I got a very large list of about 200 items with text and images. ng-repeat is way to slow to render this smoothly. It tried it with this solution. Works nice. But not with collection-repeat.
My web-service return this:
There are events with specific dates. The events should be grouped by date. So in order to use collection repeat, how is it possible to insert dividers, if you cant use angular.filter groupBy?
I can offer you a partial solution which would only work if the dataset is ordered by the displayed field in the divider.
First of all we need to create a fake element in the array so that we can discriminate the divider amongst the other element.
Let's say we have a collection of posts fetched from a webservice:
.controller('mainController', function($scope, dataService) {
$scope.posts = [];
var divider = '';
});
the private field divider will be in use when we load the posts.
And we will have the loadMore method to load extra data when we scroll the list:
$scope.loadMore = function(argument) {
page++;
dataService.GetPosts(page, pageSize)
.then(function(result) {
if (result.data.length > 0) {
angular.forEach(result.data, function(value, key) {
value.divider = false;
if (value.postId !== divider)
{
divider = value.postId;
$scope.posts.push({divider: true, dividerText: value.postId});
}
$scope.posts.push(value);
});
}
else {
$scope.theEnd = true;
}
})
.finally(function() {
$scope.$broadcast("scroll.infiniteScrollComplete");
});
};
When we fetch the data from the web api (and the promise is resolved) we loop through the collection and check if the field is different from the divider. If this is a new divider we store the info and add a new element to the collection:
angular.forEach(result.data, function(value, key) {
value.divider = false;
if (value.postId !== divider)
{
divider = value.postId;
$scope.posts.push({divider: true, dividerText: value.postId});
}
$scope.posts.push(value);
});
As you can see I've added an element:
$scope.posts.push({divider: true, dividerText: value.postId});
I've used a dividerText field which will be displayed later on.
Now we need to create our own directive divider-collection-repeat which should be attached to a collection repeat:
<ion-item collection-repeat="post in posts" item-height="75" divider-collection-repeat>
I guess you're using infinite-scroll, so here is the whole HTML:
<ion-content ng-controller="mainController">
<ion-list>
<ion-item collection-repeat="post in posts" item-height="75" divider-collection-repeat>
{{post.name}}
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!theEnd" on-infinite="loadMore()" distance="50%"></ion-infinite-scroll>
</ion-content>
this is the directive:
.directive('dividerCollectionRepeat', function($parse) {
return {
priority: 1001,
compile: compile
};
function compile (element, attr) {
var height = attr.itemHeight || '75';
var itemExpr = attr.collectionRepeat.split(' ').shift();
attr.$set('itemHeight', itemExpr + '.divider ? 40 : (' + height + ')');
attr.$set('ng-class', itemExpr + '.divider ? "item-divider" : ""');
var children = element.children().attr('ng-hide', itemExpr + '.divider');
element.prepend(
'<div ng-show="' + itemExpr + '.divider" class="my-divider" ' +
'ng-bind="' + itemExpr + '.dividerText" style="height:100%;">' +
'</div>'
);
return function postLink(scope, element, attr) {
scope.$watch(itemExpr + '.divider', function(divider) {
element.toggleClass('item-divider', !!divider);
});
};
}
});
The directive prepends an element (html) to the list using the expression you've defined in your collection-repeat.
In my sample I've use collection-repeat="post in posts" so this line:
var itemExpr = attr.collectionRepeat.split(' ').shift();
fetches the item's name; in my case it is going to be post.
We use the height as well cause we might need to have a different height for the divider.
This bit here is the place where all the magic happens:
element.prepend(
'<div ng-show="' + itemExpr + '.divider" class="my-divider" ' +
'ng-bind="' + itemExpr + '.dividerText" style="height:100%;">' +
'</div>'
);
It uses an ng-show for the field 'post.divider' (ng-show="' + itemExpr + '.divider") and binds the our text field ng-bind="' + itemExpr + '.dividerText"
I've also added a custom class my-divider just in case we need to change the layout of our divider a bit.
The final result is here or in this plunker.
As you might have noticed I haven't used a date field as I already had a sample where, sadly, I didn't have any dates.
I guess it should be very easy to adapt to your situation.
The directive is based on a sample I have found on github.
You will find the code for the directive here.
I'm working for iPhone application using phonegap. In the application there are few dropdowns whose values are more the 10000. Now we are trying to replace the dropdown with Autocomplete.
We are maintaining those 10000 records in SQLite DB and fetch the records from the DB as user enters the string.
CODE:
<input type ="text" class="inputFormText" ng-model="Location.location" id="location" list ="locValues" placeholder="{{'lSummary_Location_text'|translate}}" autocomplete = "on" maxlength="80" ng-keyup="populateLocations($event)"/>
<div class="aListCon">
<datalist id="locValues">
</datalist>
</div>
$scope.populateLocations = function($event){
if ($event.target.value.length > 2) {
try
{
db.transaction(function(tx){
tx.executeSql("SELECT ID, VALUE FROM tbl_Location WHERE VALUE LIKE '%" + $event.target.value + "%'", [],
function(tx, res){
if(res.rows.length > 0)
{
var template = "";
for (var i = 0; i < res.rows.length; i++) {
var id = res.rows.item(i).value + ' / ID: ' + res.rows.item(i).id;
template += '<option class="aCon" id="' + id + '" value="' + res.rows.item(i).value + '"></option>';
};
document.getElementById('locValues').innerHTML = template;
}
else
console.log("No records found")
},
function(ex){
console.log("Populate Location Error: " + ex.message);
});
});
}
catch(ex)
{
console.log("Populate Location Error: " + ex.message);
}
};
};
I was able to fetch the records form the SQLite and append to the datalist, but Autocomplete is not displayed in the UI.
Any idea where I'm going wrong?
Thanks in advance
This code should be working:
var divtoappend=angular.element( document.querySelector( '#locValues' ) );
divtoappend.append("<option class="aCon" id="' + id + '" value="' + res.rows.item(i).value + '"></option>");
I am Bootstrap Select user in IE11.
When I fill data with ajax and open it then it automatically move down wards and when I select any value then it's not selected. How can I remove this error?
jQuery.ajax({
url: base_url + "UserBusinesses/ajaxState/" + countryId,
dataType: 'json',
beforeSend: function () {
$('#UserBusinessStateId').html('<option value="">Loding... </option>');
$('#UserBusinessStateId').selectpicker('refresh');
$('#UserBusinessCityId').html('<option value="">Select city</option>');
$('#UserBusinessCityId').selectpicker('refresh');
},
success: function (obj) {
var addHtml = '';
addHtml += '<option value="">Select state</option>';
$.each(obj, function (key, value) {
var selected = "";
if (selectedState == key) {
var selected = "selected='selected'";
}
addHtml += "<option value='" + key + "' " + selected + ">" + value + "</option>";
});
jQuery("#UserBusinessStateId").html(addHtml);
$('#UserBusinessStateId').selectpicker('refresh');
}
});
I am facing this issue In IE and I have find the solution
$('#UserBusinessStateId').selectpicker('refresh');
remove this and add this code
$('#UserBusinessStateId').selectpicker('render').selectpicker('refresh');
// Calling the video function with JSON
$.getJSON("videos.php", function(data){
// first check if there is a member available to display,
//if not then show error message
if(data == '') {
$('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
}
// if there is a member, then loop through each data available
else {
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").html(content);
});
}
});
The problem is that it only gives me one result instead of list of results from the array but if I appendTo(content) .. it adds the full list of results under the current which is not what I want because I need to refresh that content with updated data.
Any ideas to what I'm doing wrong?
Probably so far only the last Element is getting Displayed .
// Calling the video function with JSON
$.getJSON("videos.php", function(data){
// first check if there is a member available to display, if not then show error message
if(data == '') {
$('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
}
// if there is a member, then loop through each data available
else {
//If you want to Clear the Container html
$("#tabs-4").html('');
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").append(content);
});
}
});
Empty the element before filling it:
$('#tabs-4').empty();
$.each(data, function(i,name){
var content =
'<div class="left"><img src="' + name.pic + '"/>' +
'<p>' + name.name + '</p>' +
'Video link' +
'</div><br/><hr>';
$("#tabs-4").append(content);
});
Or put all the elements in the string before putting it in the element:
var content = '';
$.each(data, function(i,name){
content +=
'<div class="left"><img src="' + name.pic + '"/>' +
'<p>' + name.name + '</p>' +
'Video link' +
'</div><br/><hr>';
});
$("#tabs-4").html(content);
If I well understood, probably you may want do something like this
...
else {
$("#tabs-4").empty(); // remove previous data (if any)
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").append(content); // append new data
});
}