I have two select dropdowns,
When i change first select, onchange function will execute but options not updated in chosen 2nd dropdown. But options populated in orginal select.
Onchange function generate dynamic options for second select, when i inspect element original select updated, chosen results area not updated.
I follow below code.
<select id="account" onchange="changePackage()">
<select id="package">
javascript
$(select).chosen();
$("#account"). on('change',function(){
$("#package").trigger('chosen:updated');
If I understand your question correctly, this should help you. You just need to add the callback function which will be executed after the select is updated:
function changePackage(){
changePackageChosen(function(success) {
if(success) {
$("#package").trigger('chosen:updated');
}
});
}
function changePackageChosen(callback){
/* binding options*/
callback(true);
}
Related
Select element bound to a state object loses update binding.
I am doing some exploration with lit-html and various routing/store combinations and have come across this strange behaviour. I have used the create-lit-app stackblitz.
I have a menu which is populated from an array on the store.state object. These links update a currentPage attribute on the store.
The navigation is self listens to the store and sets an [active] attribute if it matchs the store's currentPage.
Click events update the store. This is all working fine.
In another element (hello-world) I have a select box. The select box is populated by the same array on the store.state object. The [selected] attribute is set if the option matches the currentPage attribute. This also works fine.
I also put a couple of p tags which display the currentPage for sanity... or insanity... not yet sure.
Now, when I go back to using the menu the state changes and the menu [active] is working, as are the p tag updates in the other (hello-world) element. The select element however does not update. I can use the select to update the state but the binding down to the select seems to have stopped working all together.
I have tried super.update() and this.update() after googling similar issues but still no cheese. I am wondering if it is a function of an ugly anti-pattern on my part or if this might be an RC bug.
class HelloWorld extends LitElement {
constructor() {
super();
store.subscribe(() => super.update());
}
_updatePage(e) {
console.log(e.target.value);
store.update(s => s.currentPage = e.target.value);
}
render() {
return html`
<p class="app-intro">
Current page: ${store.state.currentPage}
</p>
<select #change=${(e) => this._updatePage(e)}>
${store.state.navItems.map(navItem => {
return html`<option ?selected=${store.state.currentPage===navItem.page}>${navItem.page}</option>`
})
}
</select>
<p class="app-intro">
Current page: ${store.state.currentPage}
</p>
`;
}
}
I want to be able to update the state from anywhere in the app and have all subscribers updated.
My suggestion is to set properties on your element when the store updates, that way your element is not tightly coupled to the store's structure.
Otherwise, you can use this.requestUpdate() to trigger an update. update() is just a lifecycle callback which is called by LitElement internally.
I'm using angular-google-places-autocomplete (https://github.com/kuhnza/angular-google-places-autocomplete) with Ionic but having problems capturing the selected option when using this directive.
I have the directive set up like this:
<!-- template -->
<input type="text" placeholder="Place search" g-places-autocomplete ng-model="locationSearchResult"/>
<h5>Result</h5>
<pre ng-bind="locationSearchResult | json"></pre>
My controller code is set up to watch for changes to the locationSearchResult model, and if it does change to save the new location to local storage:
// Controller
$scope.locationSearchResult = {};
$scope.$watch('locationSearchResult', function(newVal, oldVal) {
if (angular.equals(newVal, oldVal)) { return; }
$scope.$storage.loc = newVal;
$state.go('new-page');
});
When using the autocomplete it seems to work as expected - I get a list of predictions, and selecting a prediction from the list of predictions updates the text input with the name of the selected place, and the JSON data for the selected place displays under the result heading. But, the change doesn't seem to be picked up by the $scope.$watch in the controller.
As a result, I can't seem to be able to capture the search result data and do anything with it - like add it to the user session.
Maybe I'm just going about it the wrong way (though I used the same approach with ngAutocomplete and it worked ok).
Use the event that gets emitted in your controller.
$scope.$on('g-places-autocomplete:select', function (event, param) {
console.log(event);
console.log(param);
});
i have a basic form . inside it , i have two fields(dropdown and textbox) whose behaviour is dependent on each other. I want to reset the textbox based on the change in dropdown. Also i want to add/integrate into the DOM as a new element so that validity etc can be taken care of which is to say i can use my $dirty to hide/show the message .
Use ng-model and $watch
<select ng-model="dropdown" ng-options="**"><!-- --></select>
<textbox ng-model="textbox"></textbox>
$scope.$watch('dropdown', function () {
$scope.textbox = '';
});
http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch
Two things:
To have one value be dependant on another, just listen to the ng-change event of the first and then update the variable that the second one is bound to. eg:
$scope.selectChanged = function() {
$scope.textValue = '';
}
To do validation, one approach I like to take is to have an "error" element declared and just show/hide it when needed.
Here's a quick snippet that illustrates both approaches
http://jsfiddle.net/marplesoft/ULhVS/
I need to reset all the values of field elements of my page. The elements are: inputs, selects (combobox), checkbox and radio group.
Searching found the following code:
$("*").attr('value', '');
$("input[type='checkbox']").attr("checked",false);
$('select').each(function() {
if($(this).children().length > 0) {
$($(this).children()[0]).attr('selected', 'selected');
$(this).change();
}
});
Inputs and checkbox are ok with this code, but the other components present problems with the codes tested. The radio group needed or take any kind of selection or at least select the first. The combobox resets with this code but when trying to select a new value it is not storing your value.
Thanks!
The non textual inputs need to be refreshed. Here's an example of doing so:
//reset text input values, then refresh slider widgets
$(".ui-input-text").val('').filter('.ui-slider-input').slider('refresh');
//reset checkboxes and radio inputs, then refresh them
$(".ui-checkbox input[type='checkbox'], .ui-radio input[type='radio']").prop("checked", false).checkboxradio("refresh");
//reset all select menus and then refresh them
$('.ui-select select').val('').selectmenu('refresh');
return false;
Here is a demo: http://jsfiddle.net/MLewd/1/
In Jqgrid, I want to restrict user to select only one check box at any time. When user selects multiple check box only last selected to be in 'selected' state, remaining should be automatically un-selected.
I have set multi select attribute to true. But I am not able to do un-select previously selected item. Is it possible to do if so how?
Thanks
You can use the event beforeSelectRow and reset the selection:
beforeSelectRow: function(rowid, e)
{
jQuery("#list47").jqGrid('resetSelection');
return(true);
}
I've got a fiddle for you so you can check how it works.
You have to do some more stuff:
1. Set multiboxonly to true and multiselect to true
2. Define the events onSelectRow and beforeSelectRow:
3. Define global variable: var lastSel;
The OnSelectRow and beforeSelectRow implementation:
onSelectRow: function (rowId, status, e) {
if (rowId == lastSel) {
$(this).jqGrid("resetSelection");
lastSel = undefined;
status = false;
} else {
lastSel = rowId;
}
},
beforeSelectRow: function (rowId, e) {
$(this).jqGrid("resetSelection");
return true;
}
Having a checkbox in each column implies that you can click more than one at a time. What you are asking for is basically the multiselect: false behavior but with the checkbox column - are you sure you really want the checkboxes in this case?
I know this question is old, but I found a better solution in this Stack Post.
All you have to do is set the following two properties of the jqGrid:
multiselect:true // multi-select checkboxes appear
multiboxonly:true // checkboxes act like radio buttons where only one is selected at a time
I have updated the fiddle made by LeftyX to simply use the multiboxonly setting at this JsFiddle
This was what I needed. It may help someone else.