I'm developing a feature where a user can repost a previously submitted 'project', which involves passing the data from the current project to $scope.params.project, archiving the existing project, and redirecting to the PostProject page where the user can resubmit the project, adjusting details in the form as needed.
The idea is that the PostProject form should be populated with the Job data from $scope.params so the user doesn't have to fill all of this out again.
I've successfully used this to populate a regular <input> field, so I know the data is being passed. I'm having trouble finding documentation on how to do this with a <select> dropdown menu, however. Everything I find tells me to use ng-model to be able to set the <select> menu to a default value.
However, I need to set the menu to a value based on $scope.params and have that value set the model for when the form is submitted. I'm stumped.
Here's the HTML. Assuming that $state.params.project is the intended JS object and that $state.params.project.service_type is a string that exists in the postOppCtrl.services array, I think this is all that is needed to demonstrate the problem.
From the HTML:
<select ng-if="$state.params.project"
ng-model="postOppCtrl.postOppProjForm.service_type"
ng-options="category as category for category in postOppCtrl.services"
// this part doesn't work, and I'm not sure what else to try.
ng-value="$state.params.project.service_type"
</select>
You could try using ng-init in the select tag to initialize the value:
ng-init="postOppCtrl.postOppProjForm.service_type = $state.params.project.service_type
I solved this by setting the model from my controller using $scope.
In my PostOpportunityController I had:
vm.postOppProjForm = {};
I replaced that with:
vm.postOppProjForm = { service_type: $state.params.project.service_type };
Related
I am continuing work on a large single page application for viewing results from our database. There are a total of 10 different select options to chose from before clicking the search button. It was built in codeigniter / angular so naturally it uses Ajax to fetch all the data.
Now my boss has decided he wants "sharable" urls added like the old system had (it used get parameters) and I was told angular-ui-router was the way to go to handle urls on larger single page web apps. I have some code written that currently replaces the url state in the address bar when a dropdown option is selected and it works but since its not using nested states it simply overrides it when another is selected. Before I go down the road of 10 deep nested states, would there be a solution to append the next part of the url onto the existing without overriding?
app.config(function($stateProvider) {
$stateProvider
.state('stateone', {
url: '/:key/:value',
});
});
$scope.changedValue=function(key, value){
console.log("Key:"+key+" Value:"+value);
$state.go('stateone', {
key: key,
value: value
});
}
<select ng-model="excess_state.value" ng-change="changedValue('excess', excess_state.value)">
<option ng-repeat="state in excess_state" value="{{state.value}}">
</option>
</select>
for clarification:
when a dropdown named "excess" has option of "yes" selected the url would be: index/excess/yes/
When the next dropdown named "inventory" has option of "3" selected the url should become:
index/excess/yes/inventory/3/
right now it just overrides to index/inventory/3/
since this code only needs to change the ng-selected option when its called from the url, the state itself doesn't serve much of a purpose beyond the standard get parameter.
I hope I have made myself clear enough, any suggestions would be greatly appreciated!
I have a form which filters through different cars, and it's working perfect.
When a user selects a "Make" the correct sibling "Models" are populated into the next dropdown, so on and so forth.
The problem is that once a user has performed a search, if they click the browser's back button, the select values which are dynamically populated - are back to default!
I am not using ajax to dynamically populate the select fields, but only javascript where I am reading a JSON file and updating the models/series/etc like that.
I have looked at this post: Preserve dynamically changed HTML on back button
And I do not understand how this works, I have also heard about localstorage - what would be the best avenue for me to travel down? Thanks.
Using localStorage for this can be a bit unwieldy (when and how should I clear this value?) and there are security related considerations that may make it an infeasible solution.
Another option is to use a hidden textbox which makes use of the browser's default behaviour.
When a page is loaded after clicking the back button, browsers appear to populate textboxes based on the value contained in it when the user left the page (even if that value was dynamically changed). Note, this is different to how hidden inputs are handled, where dynamic changes are ignored, so you must use a textbox.
<select></select>
<input type="text" style="display:none" />
<script>
// store the dropdown's value in a hidden textbox which is persisted and
// used to populate the dropdown when the back button is used to get here
$('select').on('change', function() {
$('input').val($(this).val());
});
// example showing dynamic population of dropdown
$.ajax({
url: 'api/get-dropdown-options',
success: function(data) {
// dynamically populate the dropdown
$('select').html(data);
// update the dropdown's value based on the persistent value
// retained in the hidden textbox
$('select').val($('input').val());
}
});
</script>
Because the data is dynamically loaded, the browser will not be able to repopulate the previously selected entries when the user goes back to the previous page.
I suggest you make use of the browser's localStorage to store the latest selections and retrieve them when the user goes back. To accomplish that it's as simple as setting a new variable to the localStorage object and later retrieving it like so:
localStorage.make = "BMW";
alert(localStorage.make);
Also here's a more useful example:
select = document.getElementById("make");
if (localStorage.make) {
select.options[localStorage.make].selected = true;
}
I am trying to create a multiple select input element in Ember, where the content is coming from a hash, containing the label, value and group for the different options. This works fine, however I am not able to access the value binding.
Here is the JSBin; after submitting the form, it logs the selectedField variable to the console which is always 'undefined'.
I would like to implement the binding so that the initial contents of selectedField are preselected.
Update: I now see that the value method is unsupported for multiple selections, but then how do I pre-select and retrieve the selections?
Solved: I need to bind the Select via 'selection' (see JSBin).
This is a bit of an odd issue I came across today. I have an application that is using Breeze and Knockout. On one of my pages I allow the user to edit and save project data. The save button is only enabled if a change has been made. To track changes I subscribe to the propertyChanged event. This page has quite a few dropdowns which are causing some problems. Here is an example of one of the dropdowns.
<div>
<label for="projQAManager">QA Manager</label>
<select id="projQAManager" data-bind="options: QAManagers,
optionsText: 'FullName',
optionsValue: 'USERNAME',
optionsCaption: 'None',
value: project().QAManager"></select>
</div>
The issue occurs when project().QAManager is "". The propertyChanged event gets fired as soon as the project is loaded and it shows the QAManager field being changed from "" to null. This is causing the entity to believe it has been modified even though nothing has really changed. If QAManager is already null everything works fine. I suppose I could go through and try and clean the DB and clear out any fields with "" and set them to null if I had to but I would rather not if it can be avoided.
The problem lies indeed with the fact that KnockoutJS assigns the value undefined to the caption of the list box, which you labelled "None".
What happens is that right after the listbox is populated, KnockoutJS checks if your selected value (project().QAManager) matches any of the options listed in the list box. If it does not match, it selects the option with the caption, and as such, the selected value of the listbox is modified, which triggers project().QAManager to get the undefined value.
Excerpt from the documentation of the options binding handler (emphasis is mine):
KO will prefix the list of items with one that displays the text
[caption text] and has the value undefined. So, if myChosenValue
holds the value undefined (which observables do by default), then the
dummy option will be selected. If the optionsCaption parameter is an
observable, then the text of the initial item will update as the
observable’s value changes.
I thought of the following workarounds ranging from the easiest to the hardest, but most "proper":
One of the workaround would be to add to your list of options (QAManagers) an entry which has the value undefined, before it is available as an observable array.
Write a custom binding handler for options that allows to set a given value to the caption item, instead of it being set to undefined. This should consist in copy/pasting 99% of KnockoutJS's implementation of "options", and just changing the code I wrote at option 3.
Change KnockoutJS's source so that a new "optionsCaptionValue" binding is taken into account, like this (I've modified the original code like you should do):
if (allBindings['optionsCaption']) {
var option = document.createElement("option");
ko.utils.setHtml(option, allBindings['optionsCaption']);
var captionsValue;
if (allBindings['optionsCaptionValue']) {
captionsValue = ko.utils.unwrapObservable(allBindings['optionsCaptionValue']);
}
ko.selectExtensions.writeValue(option, captionsValue ? captionsValue : undefined);
element.appendChild(option);
}
It would be little complicated. Suppose I have a select list with items as status.I select a status and do some modification in the page, when I change to different status all the modificatiions which I did for previous selected status should be saved and send to a servlet. I was trying to do using change() , but it was taking current select field. and Also page relaods when status from the select is is changed thats y all the previous selected fields value also get lost.
Do anyone have ides of how to do it using jquery/Javascript as if I get the value I can pass to the servlet.
Basically I work on component based java using Apache Click framework. If some can relate with that too it would be great help too.
basically you need to store the previous value yourself and keep track of it, something like that:
var $selectElement = $("#selectElement");
$selectElement.change(function () {
var previousValue = $selectElement.data("previous");
//do something with previous value
$selectElement.data("previous",
$selectElement.find("option:selected").val);
}).change();
a quick example http://jsfiddle.net/dCkwd/
Try storing the values in a cookie with the jQuery $.cookie plugin and updating the cookie on change(). You can then access the latest cookie value.
I hope this helps!