Preserve dynamically changed select values when back button clicked - javascript

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;
}

Related

Local Storage set to dropdown in Javascript

I'm been using this link. The issue is when I'm done submitting and filling those dropdown it reloads, When I come back again the previous value will gone. I just want to remain those value in dropdown but I think there is a conflict when using that link above. It also didn't display the other value of dropdown. All I know I should use localStorage. Is there any expert can give me directions and ideas for this?
Setting the value of dropdown when I click search/submit button
var values = document.getElementById('province').value;
localStorage.setItem("prov", values);
getting the value of province dropdown
document.getElementById("province").innerHTML = localStorage.getItem("prov");
It is possible to apply this through that link I provided?
Firstly, make an object that you can read from with mental ease.. something like
var obj={province:provinceElement.value, municipality:Municipality.value, ...etc}
then when you save all your values to the object, save it with a key("whatever it is once it's a key only your code uses")
localStorage.setItem("uniqueKeyOnlyMyCodeUses",JSON.stringify(obj))
Then you can get all your data like
var localObj=JSON.parse(localStorage.getItem("uniqueKeyOnlyMyCodeUses"))
localObj would have all the data you saved in just one key and objects are a very easy way to play around with the data you gave

Dynamically set item from <select> menu based on $state.params

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 };

How to interact with a custom select box with CasperJS?

When I visit a nike.com store page (test URL listed below) with my Casper script, I'm unable to change the value of the 'skuAndSize' select element. I am verifying this by checking the screenshot that is made after the supposed change. The code I am using to do it is:
// Add to cart
casper.then(function() {
this.fillSelectors('form.add-to-cart-form', {
'select[name="skuAndSize"]' : '3857923:9'
}, false);
this.capture("test.png");
this.click('button#buyingtools-add-to-cart-button');
});
Is there a better way to be handling this?
TEST URL: http://store.nike.com/us/en_us/pd/mercurial-superfly-fg-soccer-cleat/pid-1531739/pgid-1481200
I've looked at your link and the select box is hidden. It is replaced with markup which changes the select box under the hood, but the connection between the select box and the custom markup is one way. When you change the select box with JS, the custom markup is not changed.
If you only want to test the add-to-cart functionality, you can just keep it like you have it, because on submit the underlying select box data is used.
If you want to recreate the user interaction then you have to explicitly click this (untested):
casper.thenClick(".exp-pdp-size-and-quantity-container > .exp-pdp-size-container")
.wait(100) // little time to open dropdown
.thenClick(x("//div[contains(#class,'exp-pdp-size-dropdown-container')]/ul/li[not(contains(#class,'exp-pdp-size-not-in-stock'))][3]"));
This should select the third available size by using the CasperJS XPath utility.

How to save data for previous selected value in a drop down list (before change) in jquery

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!

How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

Categories