Trying to load an edit profile page for a musician site. There is a select2 box that lists the instruments that the user plays, and it pulls this information from the database. But I can't figure out how to get the existing instrument list to display on the select2 on render, it always displays as an empty select2 box (the actual search and select functionality of the box works).
(this is coffeescript in meteor)
On render, it runs:
populator = Meteor.user().profile.instrumentsPlayed
$("#e9").select2()
the populator variable defines properly and has a value of
["acoustic guitar", "piano", "ukulele", "piano"]
I've tried many variations including:
$("#e9").select2("value", populator)
None of the variations worked, and I have a hard time finding and implementing the exact thing I need from the select2 documentation... can someone point me in the right direction?
Summary: need to load select2 box with existing data instead of just empty select2 box
See the documentation here: http://ivaynberg.github.io/select2/#programmatic
They use "val" and not "value" to programmatically set the values.
Try this:
$('#e9').select2();
$('#e9').select2('val', populator);
edit:
Perhaps the confusion was the select2() should be called before select2("val",...).
Here is a jsfiddle http://jsfiddle.net/JFMbt/ showing both methods (comment out one of them)
Related
I have a table with variable number of records (could be up to hundreds) where its body is build with one ng-repeat.
Within each record, there are two input fields of type select where their contents is also built using ng-repear and the number of options for each is about 100.
This is working right now, except that it takes a lot of time for the page to be built (several seconds; I guess due to the large number of html records that AngularJS is adding to the DOM).
Here is an example of one of the selects:
<select class="form-control" ng-model="One_Source.Measuring_Method_Code">
<option ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods"
value="{{One_Method.Value}}"
title="{{One_Method.Test_Method_Name}} | {{One_Method.Method_Internal_Name}}">
{{One_Method.Value}}
</option>
</select>
Two questions:
Is there a simple way to speed up the page building process?
As shown in the example, each option in the list has a title clause displaying a detailed description of the option's meaning. How can I add a title to the select showing the description of the current value?
For the first question I was thinking about building the list of options for each select element only upon clicking on it, but I'm not sure if that would be the best way to do it.
Try using one time bindings so that Angular doesn't watch the value by prefixing it with ::. It can also be more efficient to use track by in your ng-repeat if each row has a unique value, like an ID.
<option
ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods track by One_Method.id"
value="{{::One_Method.Value}}"
title="{{::One_Method.Test_Method_Name}} | {{::One_Method.Method_Internal_Name}}"
>
{{::One_Method.Value}}
</option>
If you still can't gain the performance you're expecting from #doublesharps's answer, you will have to implement one of the following:
You could build a custom list that has a 'load more' button which would destroy say the first '50' options and load the next 50.
A better option would be to turn this into an autocomplete, where the user searches for values.
Virtual repeat - Something angular material does really well, it constantly draw's and re-draws new elements based on the scroll position inside the element.
Other resources:
http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
https://github.com/stackfull/angular-virtual-scroll
http://klajd.github.io/angular-virtual-repeat/#/Home
I found a PARTIAL SOLUTION that still needs to be polished but is quite promising.
During creation of the page, I do not make use of ng-repeat for the options but instead deploy a single option with the value received for the field from the database (if any, otherwise the select element is left blank).
When the user clicks on the select element a $scope function is invoked that checks the number of options within the select element and, if less or equal to 1, the inner HTML of this select element is re-generated and deployed.
Though clicking on all these select in the page will take (accumulative) a comparable time as when built upon load, this time is distributed over several events (the user clicking on all the select elements) and hence it is not perceived by the user.
Now, by polishing I mean that there is a strange behavior. In order to see the generated list of options, I need to click on the select twice. Will keep investigating this and post the solution (hoping I find one).
I'm new to Xpages and i'm currently learning how to work with it, I'm using the newest version of domino database and domino designer.
I have created a view which has column (can't post a picture)
[Name][Date from][Date to][Value][Name of the driver]
[#####][02/01/2015][NULL][######][#######]
[#####][02/01/2015][NULL][######][#######]
[#####][02/01/2015][05/05/2015][######][#######]
Everything works.
But now what i want is every time i open this view i want it to show data that has a NULL value in Date to. That would mean that the third row won't be shown in the view. The reason is that when i work that each document that has a NULL value in Date to has to be edited and must be given a value by end of the day, and removed from the first view.
How can i do that, can you give me an example or a guide where i can find a solution. I searched everywhere and can't find anything.
Could you change the view Selection formula to exclude all documents that have a Date To set e.g. append & DateTo = "" or & #Text(DateTo) = "" to your formula? It will probably be something like: SELECT Form="DriverForm". Sorry, I can't remember whether the #Text part is required, but you could try both and see which works.
Could you base your XPage on a Full Text Search? There is an "IS PRESENT" option to look for non blank fields. I assume you can negate that as well. Some good searching information on this blog post: http://lostinxpages.com/2014/05/15/exporting-to-excel-using-queries-in-xpages/
In ExtJS I have something rather weird with my combobox.
The combobox is populated but in some cases, all but the 2 first entries are removed.
If I stay on the same page and process a new item on this screen (thus the all fields and thus the combobox would be reloaded), the combobox is now completely populated however the remove function is runned.
The weird thing is that all items are in the combobox, but the only the items that didn't get removed are in fact selectable and clickable. If I would click any other item that is visible in the list, it just wouldn't do anything (even the combobox wouldn't collapse).
What could be the cause of this?
I know you guys want code but it's simple impossible to post code because the code at the company I work at is so huge and complex that there would be too much to paste in here. I'm just wondering if any of you guys have had something similar.
Also, a textbox is above the combobox. If you would fill in the textbox with a value from the combobox, the combobox would jump to the correct value. With the 2nd run (which I described above), if I would type a value that is visible in the combobox but unselectable, it would not jump to that value in the combobox. It seems that these values are only visible but that's it.
EDIT:
Some other weird behavior: if I click in the combobox (so you can actually type text) and press any button, the combobox will be magically transformed to the correct form. By this I mean that only the 2 first items are now visible. I do not have any listener that would do this on my combobox...
Perhaps a "refresh" of that combobox would be enough? However, this doesn't explain then why the combobox behaved that way in the first place. Got it in FF and IE.
Without the code, you say you cannot provide, I can only guess: See if you have idProperty defined for the model and if the idProperty matches one of the fields, if valueField of the combo is same as the value of idProperty and last if you receive records with unique ids from the server. The combo config should look similar to this:
Ext.define('ComboModel',{
extend:'Ext.data.Model'
,idProperty:'custId'
,fields:[
{name:'custId', type:'int'}
,{name:'custName', type:'string'}
]
});
Ext.define('ComboStore',{
extend:'Ext.data.Store'
,model:'ComboModel'
});
Ext.create('Ext.form.field.ComboBox',{
store:Ext.create('ComboStore')
,valueField:'custId'
,displayField:'custName'
});
Of course you would most likely need additional config options for the above classes. And custId must be unique for all combo store records.
In the end I got it solved by binding the store again to it's combobox. While debugging with Firebug, I saw that there were only 2 items in the store, and not all those that were visible.
A short example below:
var ddl = Ext.getCmp('DDL');
var ddlStore = ddl.store;
...
//some manipulation of the data here
...
ddlDocType.bindStore(ddlDocTypeStore);
The bindStore() function is not documented in the official docs...
Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.
I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.