I am trying to make some useful directives with jQueryUI widgets for my AngularJS base application.
One of them works on "select" element and am ok with directives but only thing do not understand is this one:
When select list is populated from ajax request, how to tell to apply jqueryui widget when data is populated? Suppose it is with $watch but not sure how.
Edit:
In example I am trying to implement directive for the multiselect plugin.
Please note that I am simulating server reponse but putting everything in timeout.
Here is a code on plunker
You need to be $watching changes to the items list, then calling refresh on the multiselect plugin... Here is a plunk that shows the solution
angular.module('myui', [])
.directive('qnMultiselect', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr) {
//set up the plugin.
elem.multiselect({ allowClear: false });
//get the source of the ngOptions
var parts = attr.ngOptions.split(' ');
var source = parts[parts.length - 1];
//watch the options source and refresh the plugin.
scope.$watch(source, function(value) {
elem.multiselect('refresh');
});
}
};
});
Related
I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.
anyone know how to open a tooltipDialog from extlib using parameters.
in csjs I find all links in a webapage and bind them to mouseover. using a key in the link I know which link is clicked, I want to send this key to the toolTipDialog so that I can use that to find the document and display document data in the tooltipDialog.
Currently the only way I have found to open a tooltip dialog is by using XSP.openTooltipDialog("tooltipid",'linkid') which does not seem to allow parameters.
any ideas how to resolve this
Hows this?
require(["dijit/TooltipDialog", "dijit/popup",
"dojo/on", "dojo/dom", "dojo/_base/lang"],
function(ready, TooltipDialog, popup, on, dom, lang){
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
contentTemplate: "<p>Key is: {key}</p>",
content: 'empty',
onMouseLeave: function(){
popup.close(myTooltipDialog);
},
onOpen: function(pos) {
this.set("content", lang.replace(this.contentTemplate, this.replaceObject));
}
});
/
query('a.hasSelectorClass').on('mouseover', function(){ //
myTooltipDialog.replaceObject = { //
key : this.innerHTML // (inner text in anchor node)
}
popup.open({
popup: myTooltipDialog,
around: this // anchor
});
});
});
Try it and tell if any errors (untested code) :)
The below code having a selectbox with id='theservice' and a text field with id ='servicename'.This code autocompletes the servicename text field by checking which service is active in the service selectbox.But unfortunately the source string remains the same eventhought the selectbox is changed.
$( "#servicename" ).autocomplete({
source: "index.php?key="+($('#theservice').find('option:selected').val()),
minLength: 2,
});
Thanks a Lot
Probably a delegation issue.
Autocomplete propagation example added
//build the autocomplete function, sans source
$('#servicename').autocomplete({
minLength: 2
});
var theArray = [];
$('body').on('change', 'select', function(){
$.ajax({
url: 'index.php?key='+$(this).val(),
dataType: 'json/jsonp',
success: function(data){
//i don't know what the array you return looks like, but autocomplete expets a key:value relationship
$.each(data, function(key, value){
theArray.push({label: value, value: key});
});
//a custom function to pass the array into
startAutoComplete(theArray);
}
});
});
function startAutoComplete(array){
$('#servicename').autocomplete('option', 'source', array);
}
Using the above code, we instantiate the autocomplete instance, we only identify the parameters we need excluding the source.
We then define an empty array that we can push the data returned from our ajax request into.
In our select function, we pass the value over to the server to be parsed. I don't know if you are expecting JSON/JSONP formatting, so you'll have to change that yourself.
In the success:function(data) we're getting back the request from the server, it would be best if the response was json_encode'ed. Also, when we push the values into the array, it's best to use a key -> value relationship. Autocomplete allows for a label and a value to be accessed like function(event, ui){ //do stuff with ui.item.label / ui.item.value}'
We declare an uninitialized function outside of the scope of document.ready, and pass the array into the function. Within this function, we change the source of the autocomplete.
Hope this all makes sense.
Solved the issue by using the .autocomplete( "option" , optionName , [value] ) method
$( "#servicename" ).autocomplete({
source: "index.php?key="+($('#theservice').find('option:selected').val()),
minLength: 2,
search: function( event, ui ) {
$( "#servicename" ).autocomplete( "option" ,'source' ,'index.php?key="+($('#theservice').find('option:selected').val()));}
});
In my jQuery Mobile application, I am creating some dynamic pages.Here is the code
function createPages()
{
$header = "<header data-role='header'><h1>Dynamically created pages</h1></header>";
$content = "<div data-role='content' class='content'><p>This is a dynamically generated page</p></div>";
$footer = "<div data-role='footer'><h1>Audimax</h1></footer>";
for($i=1;$i<=5;$i++)
{
$section= "<section id='"+"#fav"+$i+"' data-role='page' data-url='"+"fav"+$i+"' class='dynamic'>";
$new_page = $($section+$header+$content+$footer+"</section>");
$new_page.appendTo($.mobile.pageContainer);
}
}
The pages are being created properly and being added to the DOM and I can navigate to them. The problem is that I simply can,t attach any event handlers to the dynamic pages.I am using ids of the dynamic pages with jquery "live" but to no avail.Any help is greatly appreciated.
Why not bind the event handlers when you add the new pseudo-page to the DOM?
function pageShowFunction () {
console.log(this.id + ' has triggered the `pageShow` event!');
}
function createPages()
{
$header = "...";
$content = "...";
$footer = "...";
for($i=1;$i<=5;$i++)
{
$section= "<section id='"+"#fav"+$i+"' data-role='page' data-url='"+"fav"+$i+"' class='dynamic'>";
$new_page = $($section+$header+$content+$footer+"</section>").bind('pageshow', pageShowFunction);
$new_page.appendTo($.mobile.pageContainer);
}
}
It's normally better to bind directly to elements rather than delegating the event handling.
P.S. You didn't post your event binding code so I can't give any specific comments on that code, perhaps you can update your question with that code if this doesn't fix your issue.
Upgrade the jquery core to 1.7.1 from
http://jquery.com/download/
and then
$(selector).live( eventName, function(){} );
Can be replaced with the following on signature
$(document).on( eventName, selector, function(){} );
It then works for dynamic elements.
I need to show user all autocomplete choices, no matter what text he already wrote in the field? Maybe i need some other plugin?
$('#addressSearch').autocomplete("search", "");
That doesn't work.
There are two scenarios:
You're using a local data source. This is easy to accomplish in that case:
var src = ['JavaScript', 'C++', 'C#', 'Java', 'COBOL'];
$("#auto").autocomplete({
source: function (request, response) {
response(src);
}
});
You're using a remote data source.
$("#auto").autocomplete({
source: function (request, response) {
// Make AJAX call, but don't filter the results on the server.
$.get("/foo", function (results) {
response(results);
});
}
});
Either way you need to pass a function to the source argument and avoid filtering the results.
Here's an example with a local data source: http://jsfiddle.net/andrewwhitaker/e9t5Y/
You can set the minLength option to 0, then it should work.