I have a select box in a popup that i assign an initial value without any problems. However, I want to change the select boxes value when I open the popup the issue is that although it "ticks" the changed value it does not show it in the select box unless I open and close the popup again. Any solutions to making the select box update so that when I open the pop up for the first time the value assigned is showing?
Note: in production i am using angularJs to populate the select box and jqmobile to render it.
Here is the fiddle and the code: https://jsfiddle.net/AKMorris/ufcasngf/6/
<button ng-click="openPopup()">open popup</button>
<div data-role="popup" id="mypopup" data-overlay-theme="d" data-theme="none">
<select id="fcComparator"
ng-model="ccEditorFcComparator"
ng-options="fcEnumComp for fcEnumComp in ccEditorDefaultComparators"
>
</select>
</div>
the js:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.ccEditorDefaultComparators = ["=","!="];
$scope.ccEditorFcComparator = "!=";
$scope.openPopup = function()
{
$('#mypopup').popup();
$('#mypopup').popup('open', { y: 0 });
console.log("should switch to = now");
$scope.ccEditorFcComparator = "=";
//this makes it work the second time you open the popup
$('#fcComparator').selectmenu('refresh');
}
});
If you change the value of the select using the jQuery function (.option()
) for selectmenu
, it updates the select box properly.
Ng-repeat solution:
Ng-options Solution:
NOTE: You need to separetely assign the ng-model variable also for this fix to work.
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.ccEditorDefaultComparators = ["=","!="];
$scope.ccEditorFcComparator = "!=";
$scope.openPopup = function()
{
$('#fcComparator').selectmenu('refresh');
$('#mypopup').popup();
$('#mypopup').popup('open', { y: 0 });
console.log("should switch to = now");
$('#fcComparator').val("=");
$scope.ccEditorFcComparator = "=";
//this makes it work the second time you open the popup
$('#fcComparator').selectmenu('refresh');
}
});
References: