Resetting the selected in a dropdown list using jquery - javascript

I have a HTML select element, with a selected value which has a property of display:none on page load. The display changes to block when a button is clicked.
And the select list is editable.
At this stage, if the user changes the selected value and then wants to reset it to the original one. Is there anyway I can do it?
Solution I thought of:
When the button is clicked, I can use the selectedValue=$(#id).val() to get the originally selected value. When cancelled I can use this selected value to set using $(#id).val(selectedValue)
But it doesn't work because I am not storing the selectedValue.
Is there some way to make this work? Is there some elegant solution for this?

Basically, to make this work, you have to store this value somewhere. Can be in a variable, in a hidden, or you can use .data(), as pointed out in the comments.
On the pageload, you store the value. On the button's click, you get it.
$(document).ready(function() {
$('#slt').data("originalValue", $('#slt').val());
$('#reset').on('click', function() {
$('#slt').val($('#slt').data("originalValue"));
});
});
JSFiddle: http://jsfiddle.net/kf3vtzxh/1/
Hope it helps!

you can use a
<input type="hidden" id="tempval">
and set the value to it during page load with the default this way you can compare it and reset it
like $("#tempval").val() whatever....

Related

How can I get notified when the timezone-picker value is changed?

I'm using timezone-picker to pick my timezones, and so far it's working great.
However, the one problem is that I can't convince it to tell me when the value is changed by using one of the quickLink buttons.
You can try this by going to the demo and sticking this code in your console:
jQuery("#map select").on("change", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
If you do that, you'll see that changing the value via dropdown works just fine, but if you use the buttons to the right of the dropdown, it won't fire the handler. I'm guessing that's because the code isn't calling .trigger when it sets the value, and yeah I could probably modify the Javascript myself but that seems like the wrong thing to do... is there any other way to get notified when this value changes?
You could hook to the map:clicked events (as defined diggin' in to the source code).
Check this code in the demo page:
jQuery("#map").on("map:clicked", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
The only difference is that you need to hook it to the initialization element (#map). There is no trigger on the main select element. The defined binded event is map:clicked. It will execute each time you change the selected option, click on the map or select one of the quick links.
Hope it helps.

Set List for the input field

I'm passing list from java action class to jsp file through the session variable and i need set that list to the hidden input field and get that list to the jquery function I used following method to do that
I use this code bock for set list to the input field
<c:if test="${not empty sessionScope.myList}">
<c:forEach items="${sessionScope.myList}" var="item" varStatus="itemLoop">
<input class="myClass" type='hidden' value='${item}'/>
</c:forEach>
</c:if>
jquery method
$(document).ready(function () {
$('input.myClass').each(function() {
// do some work
});
}
But problem is its working first time only, my list values are changed by ajax call, but after changing list size and value it's not set the value accordingly.
Fist time created input fields are also there when I set the value second time. I think my method is not the correct way to do this, if any one know the better way to do this please help me
Thank you..!
But problem is its working first time only, my list values are changed by ajax call, but after changing list size and value it's not set the value accordingly fist time created input fields are also there
You need to remove the created elements first:
$("input.myClass").remove();
Or if you know the container of your elements you can do:
var $parent_container = $("your-selector-for-the-container");
$parent_container.empty();
I think my method is not the correct way to do this if any one know the better way to do this please help me
I'm normally not a fan of global variables, but in your case a global variable might be better than keeping this info (your list items) in the DOM.

Ext JS 3.4 - Update Display field of a combobox without losing hidden value

So I have a combobox list populated with icons then a small description. Originally when I would select one item it would then put the html into the display as a raw value. Obviously having RAW html in the display wasn't what i wanted so i tried stripping the image tag and using the other information as the raw value.
This worked for display but the display and the value are different. (using a hiddenName field etc) and setting the raw value not only updates the display field but also updates the value. This is not acceptable.
On selecting an item I parse out the image tag and would like to ONLY update the display field. The problem here is there is no method i can find to ONLY update the display field and leave the hidden value alone.
How can i update the display field without messing with the hidden value field?
Update: I tried this....so close but no cigar...
select: function() {
console.log(this.el.dom.value);
this.el.dom.value = 'test';
}
This updated the display field to be 'test' but then for some magical reason when i click off of the combobox it sets my hidden value equal to my display value....any ideas?
Update 2: I have also tried suspending all events on the combobox by putting this.suspendEvents() at the end of the select listener....still no go. I cannot for the life of me figure out why the hidden value gets changed upon box blur. I have tried returning false in blue and change listener events.....preventDefault has no effect.
if you take a look at this link:
http://docs.sencha.com/extjs/4.2.1/source/ComboBox.html#Ext-form-field-ComboBox
there is function **setValue: function(value, doSelect) {...**
it has below lines somewhere::
me.setHiddenValue(processedValue);
me.setRawValue(me.getDisplayValue());
These lines are doing a magical stuff which you mentioned.
Now, to solve your problem, I guess you can do this:
select: function() {
console.log(this.el.dom.value);
var actualValue = this.el.dom.value;
this.el.dom.value = 'test';
this.setRawValue(actualValue );
this.setHiddenValue(actualValue);
}
Hope this helps, I have not tested the code though!

How to reset specific form element in a search form?

I have a search form that has different elements in it, checkboxes, selects, text fields etc. Each change is accompanied by an ajax call that gets the number of results as a sort of counter. I would like to reset only the previous element that caused the counter to return a value of 0.
I was thinking about keeping track of each change in a variable, and each time the counter evaluates to 0, I would then reset the element that caused the change. I however fear that this could force me to handle all the different elements differently with a lot of code and jumping around.
Is there a possible more elegant solution to the problem that anybody can think of? I would appreciate the help.
I cannot comment your question, but : if I understand correcty, there is a big form, and each change on any element, triggers an ajax call, that returns a resultset.
If this resultset size is zero, then, you want the form to reset to previous value.
That would mean, that only the last-changed value has to be tracked down, and reset ?
In this case, your onchange event callback should use this value to get current form element value, and ID. Then, as the resultset comes back, set back the stored value to that element if there are no rows.
Otherwise, if the form is managed globally, you could always store it with a .clone() call, then .remove() it and .insert() the clone back if the resultset is empty.
PS : i know this solution not really elegant :)
Your AJAX module could return a JSON-Encoded string with the data causing this event to occur (PHP-Function: JSON_encode) and from there on, you can cycle through the erroneous values resetting them and displaying further informations. i.e. "Your E-Mail seems to be invalid".
PHP: See JSON_encode
JavaScript: See getElementsByTagName('input') (or textarea or select)
Note: In case of a select item, you may rather want to change the Attribute "selectedIndex" than "value".
I solved the problem by recording each change to the form with
$("#form_id").on("change", function(event) {
//Event bubbling
type = $(event.target).get(0).type;
selector = $(event.target);
}
Then using the Strategy design pattern (Javascript Strategy Design Pattern), I reset each possible field type accordingly. Example for text field,
var Fields = {
"text": {
resetAction: function(fieldSelector) {
fieldSelector.val('');
}
}
};
//To call the reset action for the type of field,
Fields[type].resetAction(selector);
I had to trigger a change event for hidden fields to have their changes also bubble.

How to pass value between parent window and child window

I am using Jsp, Structs. From a parent window (e.g)parent.jsp, I invokes child.jsp, which has a list of checkbox values. I select more than one values, then put it in a arraylist and send back to parent.jsp and store it in a textarea.
Now If i want to select some more values from child.jsp. When i again invokes child.jsp, the checkboxes i already checked will be checked there and i dont want the empty unchecked boxes.
Could someone help me in this.......If u send some sample code means its very useful.
Thanks in advance.....
Aadhira.
As I understand, when you go to the child.jsp for the second time you need to preserve the checked checkbox values. The only solution i see for this is pass these checked box parameters to the child.jsp form.

Categories