ng-change function is not being called and no error? - javascript

I am working with a select box in angular and it appears like the ng-change function is never being called. This is the code for the select:
<select
data-ng-options="choice.id as choice.singular for choice in model.doseUnitChoices"
data-ng-model="ucumId"
data-ng-change="updateForm()"
class="form-control input-sm">
<option value=""></option>
</select>
I have simplified the code in the controler function to do the minimum needed:
updateForm: function(){
console.log('test');
},
So far everything works like normal, the drop down shows all the available options, but when I select any option in the dropdown it immediately changes back to the last option, which may mean something, and the change function is never called and no errors appear in the console? Any ideas on how I can debug this issue and find out whats wrong?
UPDATE: interestingly I discovered while inspecting the element on the page is that actually all of the select elements are listed as selected, maybe there is an issue with the data being used as the model? Looking into it

I discovered that the issue was being caused by two problems outside the scope of the question:
ucumId didn't exist when this select was being called, which I guess caused all the select options to be set as selected somehow?
because the above error was causing all the options to be 'selected', no matter what i did in the select it never updated the values so no change was occurring?
Anyway making sure 'ucumId' existed fixed the issue I was having,

I just tried to duplicate it and with the minimum amount of code, it works fine.
<html>
<body ng-app="app" ng-controller="myController">
<select
data-ng-options="choice as choice.label for choice in model.doseUnitChoices"
data-ng-model="ucumId"
data-ng-change="updateForm()"
class="form-control input-sm">
<option value=""></option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script>
<script>
angular.module("app",[]).controller("myController", myController)
function myController($scope) {
$scope.ucumId = "";
$scope.updateForm = function(){
console.log('test');
};
$scope.model = {}
$scope.model.doseUnitChoices = [
{id: 1, label: "one" },
{id:2, label: "two" }
]
}
</script>
</body>
</html>
I suspect that either there's a small typo somewhere, updateForm is redefined somewhere or your controller is getting redefined somewhere. I'd suggest pairing down the actual code and removing things piece by piece until you get to a point where it's working or something like that.

Related

Not able to fire onchange event dynamically from javascript after selecting options of bootstrap selectpicker

I am using javascript code to select a option on body load as shown in the snippet. This works fine for me.
The issue i am facing in the next step is that i am not able to call onchange event dynamically as soon as the value gets selected in selectpicker.
Code what i have written to select the options dynamically
$('select[name=pname]').val(pnamea);
$('.selectpicker').selectpicker('refresh');
After this i am mapping a simple function addcname1 to onchange event which gives an alert of selected option. but this is not working for me.
Snippet has been provided which explain the problem statment more clearly.
Can you please guide me through where i am going wrong?
Thanks
function openmd2(pnamea){
$('select[name=pname]').val(pnamea);
$('.selectpicker').selectpicker('refresh');
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
}
function addcname1(getval){
var myname = getval.getAttribute('value');
alert(myname)
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<body onload="openmd2('1')">
<select class="selectpicker" name="pname">
<option value="0">select</option>
<option value="1">Mustard</option>
<option value="2">Ketchup</option>
<option value="3">Relish</option>
</select>
</body>
In your code you have to do some small changes to make it running.
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
function openmd2(pnamea){
$('select[name=pname]').val(pnamea).change();
}
function addcname1(getval){
var myname = getval.getAttribute('value');
alert(myname)
}
Here I have just changed the $('select[name=pname]').val(pnamea) with $('select[name=pname]').val(pnamea).change(); to make it running
You can refer this like to get the exact answer
https://jsfiddle.net/Sakshigargit15/j4ccdeaq/17/
It will not give you an alert. Understand it this way.
1- By default, you will have value 1 selected from the first two lines of your function openmd2(pnamea) which will be called on your onLoad().
2- Now in the third line, it gets a call to monitor for the onChange event.
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
3- And hence moving forward, if you change the dropdown, you will get the alert. But not the first time (your onload) since there are no listeners waiting for its change.
AFAIK, its working like you wrote it.

how to choose selected option in select/option in HTML?

I need to display two select lists with the same options (there are many).
I have the index.html:
<body>
<select class="c_select1"></select>
<select class="c_select2"></select>
</body>
and in another html file (options.html) all the options (only the options):
<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>
Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector:
$(".c_select1").load("options.html");
I'd like to display as default selected option two different values (since I need to show a currency converter).
I've tried in 2 different ways, but any of these works fine (I show the code for just one).
<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>
or
$(".c_select1").val("ARS");
I don't know why, but I think there is a problem with the .load() of jQuery.
The only solutions that work are 2:
set a timer and execute the second jQuery statement after this timer
use 2 different options.html files one for each select tag, but I think it is not so clever.
Is there a better way to do this dynamically?
Try this:
$(".c_select1").load("options.html", function(){
$(".c_select1").val("ARS");
});
Explained:
The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). The browser doesn't wait for it before continuing to run the rest of the javascript logic. The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback").
Use a callback :
$(".c_select1").load("options.html", function() {
$(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
$(".c_select2").val("ARS");
});
Actually there is a delay of load method that is why selected item is not working. Like #Joulss said use callback method that should work. You can see the here.
$(function(){
$(".c_select1").load("option.html", function() {
$(".c_select1").val("AFN");
});
$(".c_select2").load("option.html", function() {
$(".c_select2").val("ANG");
});
});
Demo

Cannot update ui-select2 content from $scope.$watch

The simplified version of my code is as follows:
var app = angular.module("App", ['ui.select2']);
app.controller("MainController", function ($scope) {
$scope.select2Options1 = {
data: [{id: 0, text: "Foo"}, {id: 1, text: "Bar"}]
};
$scope.select2Options2 = {
data: []
};
$scope.$watch('chosen1', function (newVal, oldVal) {
if (newVal !== undefined && newVal !== null) {
console.log("Valid value selected: " + newVal);
$scope.select2Options2.data.push({id: 0, text: "FooBar"});
}
});
});
The markup:
<html>
<head>
<link rel="stylesheet" href="bower_components/select2/select2.css">
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/select2/select2.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-select2/src/select2.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="App">
<input ng-controller="MainController" ng-model="chosen1" ui-select2="select2Options1" style="width:100px">
<input ng-controller="MainController" ng-model="chosen2" ui-select2="select2Options2" style="width:100px">
</body>
</html>
What I want to do, is to update the contents of a ui-select2 ($scope.select2Options2.data), when something gets chosen from another ui-select2 ($scope.select2Options1.data).
The problem is that the contents of the second ui-select2 is not updated no matter what I do in the handler of the $scope.$watch. If I move this $scope.select2Options2.data.push({id: 0, text: "FooBar"}); outside the watch handler, it works and the second ui-select2 gets populated. This means, that there must be something fundamentally wrong.
Any suggestions how to fix this?
I believe you're not using the module as recommended. Please read the documentation at https://github.com/angular-ui/ui-select2.
The way to enable options on a <select> in Angular is to use the ng-options directive. However, ui-select2 doesn't fully support this directive, and recommends using <option> tags instead. In your case that should be something like:
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
<option value=""></option>
<option ng-repeat="item in select2Options2" value="{{item.id}}">{{item.text}}</option>
</select>
Please note that, unlike using ng-options, the selected object stored via ng-model, in this case will be a string representation, not the actual object. This is a limitation when using ui-select2. So please be aware that what's stored in chosen2 will be the value of {{item.id}} (a string), not the {id: 0, text: "Foo"} object.
Last, why did it partly work in your case?
Reason is, you were using select2 internal functions to generate the options. This works like normal upon initialization, but there is no watch set on this select2options.data field (Select2 doesn't know anything about Angular). So whatever data was there upon initialization would show up, but any updates would not.
The root cause for the problem seemed to be the fact that I had defined MainController in the HTML twice. Wrapping everything inside a single div with ng-controller="MainController" fixed the problem.

Hide/Display tables after selecting different options

I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.
Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.
Here is my JavaScript code:
<script>
$(document).ready(function()
{
$('#iu_table').hide();
});
$('#iu').onchange=function()
{
$('#si_table').hide();
$('#iu_table').toggle();
}
</script>
And HTML code:
<select>
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
The table ID is "si_table" and "ui_table" respectively.
I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.
I hope that someone could help.
You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.
There are multiple errors in your code:
There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
You want to work with the change of the select not with the change of the option.
In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.
Here is a working sample:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function()
{
$('#iu_table').hide();
$('#selector').change(function()
{
$('#si_table').toggle();
$('#iu_table').toggle();
});
});
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
<select id="selector">
<option id="si" selected="selected">SI</option>
<option id="iu">IU</option>
</select>
</body>
There are many ways of achieving this. One is below - I have added id attribute to dropdown control
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>
There is a method in jQuery which does hide/show matched elements called toggle()
As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here

Opening Link via New Window from Javascript Select List

I'm not sure what's the issue that is causing that error message when I try debugging with Firebug. Everything looks good to me.
Current Issue:
$("#SlideList option:selected") is null
Select Box Code (abridged) :
<select id="SlideList" name="D1" style="width: 130px;">
<option value = "Numbers.pdf" >Numbers</option>
</select>
<img src="Button.png" onclick="SlidePDFOpen()" />
Javascript:
function SlidePDFOpen() {
window.open($("#SlideList option:selected").val());
}
You are using a jquery selector but you don't have jquery included in the page.
The error you are getting therefore makes sense as the page can't find the function val().
At the very least with jquery you would get an empty string.

Categories

Resources