Is the left over text in input accessible programatically? If so, how?
I only allow tags from autocomplete (to use as search filters), and want to use the left over text as additional keywords, meaning I want to know if it's bound to anything so I can pass it to a search function.
Thanks for the help
That's not directly possible, but you can hack into the directive and make it work by using a helper directive:
app.directive('bindInternalInputTo', function() {
return function(scope, element, attrs) {
var property = attrs.bindInternalInputTo,
input = element.find('input'),
inputScope = input.scope();
inputScope.$watch('newTag.text', function(value) {
scope[property] = value;
});
};
});
Now you can bind some variable in the outer scope to the inner input by doing the following:
<tags-input ng-model="tags" bind-internal-input-to="variable"></tags-input>
Working Plunker
Please note that this solution isn't guaranteed to work with future versions of ngTagsInput since it relies on internal implementation details.
Related
I have taken the codes shared from the Modal example page and instead of an LI I have decided to use a select element. My select element has ng-model="selectedColor" in it, and I can use {{selectedColor}} all over the partial I created, however, I can not use "$scope.selectedColor" from the "Model Instance Controller" or any controller for that matter. I assume this is because something is off with $scope but I cant seem to figure it out. Any help is appreciated.
http://plnkr.co/edit/MsNBglLJN0hWxvGZ1pj1?p=preview
The problem in your code is that $scope.selectedColor and the selectedColor in the modal markup are two different references. For details on this, please read Understanding Scopes, you will probably benefit from it as it is a common task.
Instead of writing $scope.selectedColor, you should make an object in your controller, then store the result in it.
var ModalInstanceCtrl = function ($scope, $modalInstance, colors) {
$scope.colors = colors;
$scope.o = {}
$scope.ok = function () {
console.log($scope.o.selectedColor, "$scope.o.selectedColor");
$modalInstance.close($scope.o.selectedColor);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
and in the markup, refer to o.selectedColor.
Here is a working version of your Plunker
I'm trying to dynamically populate a select tag at load time (latest jQM version) using a custom template filling function.
If the fn is called in the "pagebeforechange" event, the select tag is properly initialized. Since this event is called on every page transition, I thought of moving the fn to the 'pageinit' event. This does not work, presumably because the DOM is not yet fully available. How can I coerce jQM to inject content in a page only once? Currently, I am using a kludge. There surely must be a smarter way. Thanks for any suggestions.
$(document).bind('pageinit', function () {
InitSelTagTest("#selActTag", "tplTag"); // Does not work.
});
$(document).bind("pagebeforechange", function (e, data) {
if ($("#selActTag").children().size() === 0) {
InitSelTagTest("#selActTag", "tplTag"); // Kludge, but it works
}
});
function InitSelTagTest(el,tpl) { // Append all tags to element el
var lstAllTags = JSON.parse($("#hidTag").val()); // Create tag array
// Retrieve html content from template.
var cbeg = "//<![" + "CDATA[", cend = "//]" + "]>";
var rslt = tmpl(tpl, { ddd: lstAllTags }).replace(cbeg, ").replace(cend,");
$(el).html(rslt).trigger("create"); // Add to DOM.
}
EDIT
In response to Shenaniganz' comment, it seems that the "pagebeforecreate" event could do the trick ie.
$("#pgAct").live("pagebeforecreate", function () {
// Populate tag select. Works. Traversed only once.
InitSelTag("#selActTag", "tplTag");
});
I'm not sure I fully understand your question but I'll throw a few things out there and you let me know if I can extend further.
To make something trigger only once on page load you can try to implement a regular JQuery $(document).ready(function(){}) aka $(function(){}) for the exact reason why JQuery Mobile users are told not to use it. It triggers only once on DOM load. Further pages don't trigger it because they're being switched via Ajax.
Other than that, on regular dynamic content loading you take a look at the following example I put together for someone else earlier:
http://jsbin.com/ozejif/1/edit
I have a set of dynamically generated dropdown boxes on my page. basically I clone them using jQuery. now I want to capture the value selected on each dropdown on change event.
I tried something like this which did not work.
$('._someDropDown').live('change', function(e) {
//debugger;
var v = $(this);
alert($(this + ':selected').val());
alert($(this).val());
});
How do I get it done?
To get the text of the selected option
$("#your_select :selected").text();
To get the value of the selected option
$("#your_select").val();
This is what you need :)
$('._someDropDown').live('change', function(e) {
console.log(e.target.options[e.target.selectedIndex].text);
});
For new jQuery use on
$(document).on('change', '._someDropDown', function(e) {
console.log(this.options[e.target.selectedIndex].text);
});
$("#citiesList").change(function() {
alert($("#citiesList option:selected").text());
alert($("#citiesList option:selected").val());
});
citiesList is id of select tag
Check it Out-->
For getting text
$("#selme").change(function(){
$(this[this.selectedIndex]).text();
});
For getting value
$("#selme").change(function(){
$(this[this.selectedIndex]).val();
});
You can try:
$("._someDropDown").val();
To get the value of a drop-down (select) element, just use val().
$('._someDropDown').live('change', function(e) {
alert($(this).val());
});
If you want to the text of the selected option, using this:
$('._someDropDown').live('change', function(e) {
alert($('[value=' + $(this).val() + ']', this).text());
});
try this...
$("#yourdropdownid option:selected").val();
This is actually more efficient and has better readability in my opinion if you want to access your select with this or another variable
$('#select').find('option:selected')
In fact if I remember correctly phpStorm will attempt to auto correct the other method.
In case you want the index of the current selected value.
$selIndex = $("select#myselectid").prop('selectedIndex'));
The options discussed above won't work because they are not part of the CSS specification (it is jQuery extension). Having spent 2-3 days digging around for information, I found that the only way to select the Text of the selected option from the drop down is:
{ $("select", id:"Some_ID").find("option[selected='selected']")}
Refer to additional notes below:
Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(":selected"). (copied from: http://api.jquery.com/selected-selector/)
You can also use :checked
$("#myselect option:checked").val(); //to get value
or as said in other answers simply
$("#myselect").val(); //to get value
and
$("#myselect option:checked").text(); //to get text
Anyone know good sample code using jQuery UI's autocomplete widget that can autocomplete words in the middle of a text box, not just autocomplete of the word at the end only?
I'm using the jquery UI autocomplete widget for a component that supports entry of multiple tags. It's like like stack overflow's tag editor, but simpler: no fancy formatting in the autocomplete dropdown, no "tag" background images in the edit box. I started with the jQuery UI Autocomplete Multiple sample and modified it.
It's working OK, except autocomplete doesn't work for tags in the middle of a multi-tag string. For example, if I type C Fortran and then put the caret right after C and type +, I'd expect to see C++ in the autocomplete list but instead I see Fortran again.
Here's the code so far: http://jsfiddle.net/WCfyB/4/
This is the same problem described by autocomplete in middle of text (like Google Plus), but the problem in that question was simpler because he could rely on an empty # in the text to signal when to show the autocomplete. In my case, I can't just rely on the text-- I actually need to find out where the caret is and autocomplete for the word where the caret is.
I could build this myself using caret or another plugin, but was wondering if there was already a jQuery-UI-based sample online that I could use without re-inventing another wheel, especially if there are browser-specific corner cases to worry about. Ideally, it'd behave like this: whenever the user places the caret inside or at the end of a tag (where tags are always separated by 1+ spaces), autocomplete is shown for that tag. Know a good sample?
I don't know of any examples like this, but here's something that you could start with:
var availableTags = [ ... ];
function split(val) {
return val.split(/ \s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
.bind("keydown", function(event) {
// don't navigate away from the field on tab when selecting an item
if (event.keyCode === $.ui.keyCode.TAB
&& $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
var results = [],
selectionStart = this.element[0].selectionStart
term = extractLast(request.term.substring(0, selectionStart));
if (term.length > 0) {
results = $.ui.autocomplete.filter(availableTags, term);
}
response(results);
},
focus: function() {
return false; // prevent value inserted on focus
},
select: function(event, ui) {
var terms = split(this.value.substring(0, this.selectionStart));
terms.pop(); // remove the current input
terms.push(ui.item.value); // add the selected item
this.value =
$.trim(terms.join(" ") + this.value.substring(this.selectionStart)) + " ";
return false;
}
});
Example: http://jsfiddle.net/WCfyB/7/
The major caveat here is that the selectionStart method does not work in IE. You can replace those function calls with one of those plugins you mentioned in your question.
I am using Knockout Js for my view page. I have a requirement where if any editable field changes, I have to enable Save button else not. This is working nicely.
My issue is I have checkboxes too for each row of item. These are observable items in my viewModel. What happens now is when I check or uncheck any checkbox, Knockout considers that as Dirty item and enables the Save button which I don't want.
How can I tackle this?
I am not sure of the exact code that you are using for a dirty flag, but if it involves using ko.toJS in a dependentObservable like this, then there is a trick that you can use to have it skip some observables.
If you create an observable that is a property of a function, then ko.toJS will not find it.
Here are two examples (someFlag and anotherFlag):
function Item(id, name) {
this.id = ko.observable(id);
//create a sub-observable that the dirty flag won't find
this.id.someFlag = ko.observable(false);
this.name = ko.observable(name);
this.dirtyFlag = new ko.dirtyFlag(this);
//or similarly, place an observable on a plain ol' function
this.forgetAboutMe = function() { };
this.forgetAboutMe.anotherFlag = ko.observable(false);
}
Sample here: http://jsfiddle.net/rniemeyer/vGU88/