I have to use templates to translate my grid's cells values.
For some reasons, the function I'm calling to translate is returning a promise.
I found the following topic related to my issue
Asynchronous cell template
I'm using the angular method with
ng-bind-html
$scope.lookUpEventNameAsync = function(data) {
refData.events().fetch(function() {
var eData = refData.events().data();
var refEvent = eData.find(function(re, i, a) {
return re.code === data.eventCode;
});
$("#async_tse_" + data.key).html(refEvent.name);
});
return $sce.trustAsHtml("<div id='async_tse_" + data.key + "'> </div>");
};
$scope.gridTimesheetColumns = [
{
field: "eventCode",
title: "Event",
template: "<span ng-bind-html='lookUpEventNameAsync(dataItem)'> </span>"
},
....
I made a similar thing to adapt it with the code I have and it's working.
But the problem now is that it's calling $scope.lookUpEventNameAsync several times and never stop calling it which is freezing the screen and make the app unusable.
Do you have an idea why and how can I prevent it ?
I needed a one way data binding like the following :
$scope.gridTimesheetColumns = [
{
field: "eventCode",
title: "Event",
template: "<span ng-bind-html='::lookUpEventNameAsync(dataItem)'> </span>"
},
Related
Usecase
There are a total of 200000 records exist in my database, if i load all the option in one time the page is not loading at all, it is saying maximum transaction time crossed (i felt like its the worst approach).
I thought of loading the selectize options based on keyword search, i will show the 50 records close to the search keyword.
I implemented the search in backend(Serverside), it is returning the data correctly to the client but i'm not finding a way to show them as options in html.
Please find my code below:
$scope.$selectUser = $('#selectUser').selectize({
valueField: 'sys_id',
labelField: 'name',
maxItems: c.data.maxteam,
placeholder:"Enter names or select below",
create: false,
load: function (query, callback) {
if (!query.length) return callback();
$scope.data.funcName = 'getUsers';
$scope.data.searchQuery = query;
$scope.data.kudosTo = [];
//Server call happens here
c.server.update().then(function(){
//Search data coming fine in this variable
var results = c.data.activeUsers;
//??? AT this step i'm not what to do to appear the data as selectize options and select from them ??
callback(results);
});
},
render: {
option: function (item, escape) {
return '<div class="option">' +
'<div class="text">' +
'<span class="name">' + escape(item.name) +"<i class='fa fa-circle circleFont'></i>"+ escape(item.user_name) + '</span>' +
'</div>' +
'</div>';
}
},
});
$scope.selectizeControlUser = $scope.$selectUser[0].selectize;
<div class="form-group text-left clearfix">
<select class="form-control" id="selectUser" multiple></select>
</div>
Search data coming fine in client code:
Issue: Selectize options are not showing in the HTML view
Expected results: Options should come like below image
I figure it out myself.
Options are appending to the options but just not showing in the view.
I added searchField and it started working fine as expected.
searchField: ['name', 'email', 'user_name'],
I'm trying to pass the value of the row
into the template function
{
field: "RuleName",
template: ruleRadioActive(<MyValueHere>),
title: global.textJSPartialView["RuleName"],
headerTemplate: *bla bla*
}
I want to pass the "RuleName" value to the function ruleRadioActive.
I've tried using "#= RuleName #" but it will pass the string and not the value.
Any solutions?
So basically I discovered that using a function in the template option automatically sends the object with the whole row structure to the function.
So if I have:
{
field: "RuleName",
template: templateFunction,
title: global.textJSPartialView["RuleName"],
headerTemplate: *bla bla*
}
and I want to print a <p> with some value in it
the function templateFunction will look something like this:
function templateFunction(DataItem){
return "<p>" + DataItem.<element in structure> + "</p>";
}
I tried to view different sources and also looked into the forums posting similar question, but it didnt quite help me with the issue that im facing.
I have a text input filed to which I'm adding a popover to show similar a list of names in the database. The inout field checks for validation, to see if the name entered is unique, if not it displays similar names available in the database that could be re-used.
here is the popover snippet:
$("#account_name_create").popover({
title: 'Twitter Bootstrap Popover',
content: function (process) {
this.accountCollection = new ipiadmin.collections.AccountCollection();
var newName = $("#new-account-form #account_name_create").val();
var userFilter = "accountName~'" + newName + "'";
this.accountCollection.fetch({
data: { "f": userFilter,
"sortby": null,
"type":"ipi",
"pageno":0,
"pagesize":2,
"reversesort" : true
},
cache: false,
success: function(model, response, options) {
var states = [];
map = {};
$.each(model.aDataSet, function (i, state) {
map[state.accountName] = state;
states.push(state.accountName);
});
process(states); //gives an error saying 'undefined is not a function (says process is undefined)'
},
error: function(model, response, options) {
console.log('error');
}
});
},
});
here is the html:
<input type="text" id="account_name_create" name="account_name" class="" size="40" />
I'm not sure how why it says 'process' as undefined. Also not sure if this would be the correct way of displaying the data in the popover.
Any ideas??
Thanks!
process doesn't have scope in the success function, only in the content function. If you want to call the process function from within the success function, you could define it somewhere outside of the jQuery call.
I started to give angularJS more attention today, and in my project I would need geonames.
I wanted to create something like jQuery UI's autocomplete with geonames like this.
All is fine when I console.log it, I get back the results, but for some reason I can't place it to typeahead's dropdown list.
scope
$scope.cities = function(cityName)
{
return $http.jsonp("http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK&q="+cityName+"&maxRows=6").success(function(data){
$.map(data.geonames, function(item)
{
return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
});
});
};
input
<input type="text" class="span4" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
I am using UI Bootstrap for angular js and I tried based on that example but something is wrong, could please someone give me a hint?
Thank you
$http.jsonp performs requests asynchronously, so what you do in your success callback is lost.
You can use $q.defer or a watcher (but apparently the latter doesn't work properly with typeahead) to apply the values from the success callback:
$scope.cities = function(cityName)
{
var dfr = $q.defer();
$http.jsonp("http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK&q="+cityName+"&maxRows=6").success(function(data){
dfr.resolve($.map(data.geonames, function(item)
{
return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
}));
});
return dfr.promise;
};
}
I'm making a data visualisation tool where you can input your own data. The data values are stored in an unordered list like this: <ul><li data-name='name'><a href='#' onclick='showEditDv(this);'>Edit</a><span class='name'>name</span><span class='seperator'> | </span><span class='value'>7</span></li></ul. There can be more than one list item in the list. When you click on the Edit button it calls the showEditDv() function, giving a reference to itself. Before I show the function, I will say that the data object is organised like this:
data ->
name: "root",
children: [ {name: "something", size: "7"},
{name: "something-else", size: "999"} ]
This is the code for the function:
function showEditDv(object) {
var name = $(object).parent().attr("data-name"),
input = new Opentip($(object), {removeElementsOnHide: true, target: null, showOn: null, hideTrigger: "closeButton"}),
disabled = (data.children[getChildIndexByName(name)].hasOwnProperty("children")) ? "disabled" : "";
input.setContent("<label>Name:</label><input type='text' data-prevname='" + name + "' value='" + name + "' class='dv-add-name' /><label>Value:</label><input " + disabled + " type='text' class='dv-add-value' value='" + data.children[getChildIndexByName(name)].size + "' /><button class='callEditDv'>Apply</button>"); // Set content of opentip
input.show();
$("body").on("click", ".callEditDv", function() {
var newname = $(this).siblings(".dv-add-name").val(),
prevname = $(this).siblings(".dv-add-name").attr("data-prevname"),
value = $(this).siblings(".dv-add-value").val();
if (newname !== prevname)
{
data.children[ getChildIndexByName(prevname) ].name = newname; // Update name
$(object).parent().attr("data-name", newname); // Update parent data
$(object).siblings(".name").text(newname); // Update form
}
if (data.children[ getChildIndexByName(newname) ].size !== value)
{
data.children[ getChildIndexByName(newname) ].size = value;
$(object).siblings(".value").text(value);
}
input.hide();
});
}
It uses Opentip, which is just a way of creating dynamic popups / tooltips. The problem is that once you have changed a data value once, when you try to change it again it loops through the code twice! The first time everything works as expected, but the second time it does it again, using the same prevname, which means that getChildIndexByName returns undefined and it can't set the variable causing an error. getChildIndexByName loops through the values of data.children checking the names until it finds a match, and then returns the index of the object in the array.
Thanks in advance!
Try this:
$("body").off('click').on("click",...
jQuery Documentations
Event handlers attached with .bind() can be removed with .unbind().
(As of jQuery 1.7, the .on() and .off() methods are preferred to
attach and remove event handlers on elements.)
change:
$("body").on("click",...
to
$("body").unbind('click').on("click",
Hope this help!