Develop Reference

How to make AngularStrap typeahead selection uneditable

I'm using AngularStrap's typeahead element:
<input type="text" ng-model="selectedFruit" bs-options="fruit for fruit in fruits" placeholder="Begin typing fruit" bs-typeahead>
When a fruit is selected in the typeahead it is displayed in the typeahead as a string that can be edited by the user. I want the user to only be able to submit the fruit by its exact name. If a user chooses apple and then by accident edits the string to be aple my app will crash when they submit.
Is there a way to make the string uneditable in the typeahead once it is selected? The user should be able to change their selection by choosing another fruit from the typeahead array, so the first selection shouldn't be unchangeable.

So, going off of Luke's suggestion above, the following solution is what worked for me:
HTML:
<div ng-repeat="pie in pies">
<input type="text" bs-on-select="addSpelling" ng-blur="spellCheck()" bs-options="stock for stock in allBaskets" ng-model="pie.fruit" bs-typeahead>
</div>
Note it needs to be bs-on-select="addSpelling" and not bs-on-select="addSpelling()" since the second option will cause the function to be fired when the page loads.
In controller:
$scope.addSpelling = function(){
this.scope.spelling = this.scope.$modelValue;
}
$scope.spellCheck = function(){
if(this.pie.fruit == ""{
return;
}
if(this.pie.fruit != this.spelling){
this.pie.fruit = this.spelling;
}
}

Bootstrap Selectpicker will not reset using built-in functions

I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:
HTML
<div class="row">
<div class="col-md-3">
<label>By Group</label>
<select id="groups" name="group" class="form-control selectpicker" multiple></select>
</div>
<div class="col-md-3">
etc...
</div>
</div>
JS
ajax_fetch('build_group_options', {groupno:groupno}).done(function(html) {
//var html is a list of options in html format
$('#groups').html(html).find('option[value=""]').remove();
//refresh the selectpicker to make sure options are registered in the picker
$('.selectpicker').selectpicker('refresh');
});
Try to reset all the pickers:
$('#reset_filters').click(function() {
$('.selectpicker').selectpicker('deselectAll');
$('.selectpicker').selectpicker('render');
$('.selectpicker').selectpicker('refresh');
$(this).closest('form').find('.selectpicker').each(function() {
$(this).selectpicker('render');
});
});
As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.

I got solution from following code.Try it
$("#listID").val('').trigger('change');
And also you can try this
$("#listID").val('').selectpicker('refresh');

Maybe it's a little late, but maybe it'll help someone someday. For me the solution was this:
$("#listID").val([]).selectpicker('refresh');
I had the multiselect option and with this you replace your chosen items for an empty array, otherwise you'll choose the option where the value is empty val('').

So I looked in the selectpicker.js file, the deselectAll and selectAll functions both filter their respective options by a few arguments (see line 884):
deselectAll: function () {
this.findLis();
this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();
}
A little breakdown:
.not('.divider') //prevents the divider receiving a click event!
.not('.disabled') //ignore any disabled elements
.filter('.selected') / .not('.selected') //depending if its selectAll() or deselectAll()
.filter(':visible') //prevent any non-visible element receiving a click event!?
My problem was the .filter(':visible'), the list was not visible when the click event was triggered so these options were filtered out and therefore did not get 'clicked'/'deselected'.
I amended my version of the plugin and now my 'reset' button works as expected. The new line is:
this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();

Compare select dropdown value with another input and display matched one

HTML code:
<div class="controls" id="display">
<input type="text" name="demos" class="" value="1" id="displays"/>
<select class="input-medium">
<option value="">Select</option>
<option value="1">II</option>
<option value="2">AS</option>
<option value="3">AR</option>
</select>
</div>
Jquery code:
$("input[name='demos']").each(function(i,e){
var SValue = $('#displays').val();
$('option[value=' + SValue + ']').attr('selected',true);
});
I will be displaying the above html code as dynamic one for multiple times.
I will be comparing the value of #displays with the select options and make the select option as selected.
The value in #displays comes from database.
Since, am using multiple times the above html code when I pass the different values from database to that multiple code. All the multiple code shows only the first html code selected value.
However, I want all the multiple html code to show the selected value to their respective #displays.
In debug I found that $("input[name='demos']").each(function(i,e){ is not performing correctly because when i put console for Svalue it shows only the first html code input value for all the multiple html codes.
How can I fix this??

In HTML, the ID attribute is unique. You cannot use the same ID for more than one control in the same page. So, you'll need to use another approach.
I would do something like:
$("div.controls").each(function() {
$(this).children("select").eq(0).val($(this).children("input").eq(0).val());
});
EDIT: And it works, I've just made this demo!

Try this:
$("#displays").blur(function () {
var data = $(this).val();
$("#select > option").each(function () {
if (this.value == data)
$(this).attr("selected", "selected");
});
});
This example will get the input from user then the system will select the matching value.
Here is the fiddle: http://jsfiddle.net/t6kBY/

try
$("input#displays").each(function(i,e){
});

How to load a text file using JavaScript with a HTML combobox (<select>)?

First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.

Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/

Using .change() function to auto-submit form on checkbox change?

This is a bit of a long question so please bear with me guys.
I needed to make a form submit automatically when a checkbox was ticked. So far I have the code below and it works perfectly. The form must submit when the check box is either checked or unchecked. There is some PHP that reads a database entry and shows the appropriate status (checked or unchecked) on load.
<form method="post" id="edituser" class="user-forms" action="--some php here--">
<input class="lesson" value="l101" name="flesson" type="checkbox" />
</form>
<script>
$('.lesson').change(function() {
$('.user-forms').submit();
});
</script>
However, when I introduce a fancy checkbox script which turns checkboxes into sliders it no longer works. The checkbox jQuery script is below:
<script src="'.get_bloginfo('stylesheet_directory').'/jquery/checkboxes.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("input[type=checkbox]").tzCheckbox({labels:["Enable","Disable"]});
});
</script>
The contents of the checkboxes.js called to above is as follows:
(function($){
$.fn.tzCheckbox = function(options){
// Default On / Off labels:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: '<span class="tzCBContent">'+labels[this.checked?0:1]+
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);
There is also some CSS that accompanies this script but I am leaving it out as it is not important.
Finally, this is what the jQuery script does to the checkbox:
<input id="on_off_on" class="lesson" value="lesson11-1" name="forexadvanced[]" type="checkbox" style="display: none; ">
<span classname="tzCheckBox checked" class=""><span class="tzCBContent">Disable</span><span class="tzCBPart"></span></span>
When the checkboxes are changed into sliders the .change() function no longer detects the change in the checkboxes status.
How can I make the .change() function work or is their an alternative function I can use?

This plugin changes your checkboxes to span elements and hides the actual checkboxes themselves. Thus, when you click on them, nothing happens. Since span elements don't have onchange events, you can't bind change events to these.
However, span elements do have click events, meaning that you could instead bind a click event to the generated spans, using Firebug or Chrome Debugger to locate the correct element to bind to.
Your click-handler can then take the same action your change event would normally take if the plugin weren't being used.
Here is an example:
HTML (Source):
<!-- This is a checkbox BEFORE running the code that transforms the checkboxes
into sliders -->
<li>
<label for="pelda1">Opció 1:</label>
<input class="pelda" type="checkbox" id="pelda1" name="pelda1" />
</li>
HTML (Generated From Chrome Debugger):
NOTE: This is the generated HTML after running the JavaScript that converts checkboxes to sliders! You must bind your click event AFTER this code is generated.
<li>
<label for="pelda1">Option 1:</label>
<!-- The hidden checkbox -->
<input class="pelda" type="checkbox" id="pelda1" name="pelda1" style="display: none; " />
<!-- the "checked" class on the span gets changed when you toggle the slider
if it's there, then it's checked. This is what you're users are actually
changing.
-->
<span class="tzCheckBox checked">
<span class="tzCBContent">active</span>
<span class="tzCBPart"></span>
</span>
</li>
JavaScript:
NOTE: This must be bound AFTER converting the checkboxes to sliders. If you try it before, the HTML won't yet exist in the DOM!
$('.tzCheckBox').click(function() {
// alert the value of the hidden checkbox
alert( $('#pelda1').attr("checked") );
// submit your form here
});

Listen for change like this:
$('.lesson').bind("tzCheckboxChange",function() {
$('.user-forms').submit();
});
Modify the plugin by adding the line:
$(originalCheckBox).trigger("tzCheckboxChange");
after
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
This way, anytime you use this plugin, you can listen for tzCheckboxChange instead of just change. I don't really know what's going on with the plugin, but seems kinda funky for it to be listening for a change event when it would only be fired through trigger (unless it doesn't hide the original checkbox).