Reselect Select box on back / forward with Chrome? - javascript

I have a select box which changes the form below via ajax. If someone changes the form, clicks the back button then clicks the forward button the form changes are reset but the select box still shows the same value.
How do I either do a hard page refresh or make the select box retain its default selected value?

You probably have an onchange event handler on your select element. Trigger that same event handler onload (or on document ready) of the document.

Reset the select box based on the value in the address bar.
Just reset the state of the check box every time the desired address is in the address bar.
After detecting a change in the browser's address, you can use some simple jQuery for example:
if (address === 'foobar.com/whatever') {
$('input[name=foo]').attr('checked', false);
}
The above code will simply uncheck the checkbox if it's checked. Do this check as soon as you detect that you are back at the address you are referring to.

Related

Hidden focus on blur of an input element in dom

A little Explanation : I am using List view control of kendo UI(Telerik). I am triggering an update event of that control after editing the fields in list view. The list view control is having some text-boxes, a dropdown,checkbox and a submit button. When a user change something, ideally it should trigger update but its not doing update because control is not able to judge if there is a change in model.
It is only working if I input something in textbox and just click on outside of textbox i.e just do a onblur before hitting submit. I don't know why it is happening but what I need is to just trigger a focus event but in a hidden mode so that user is unaware of it but it just happens after a user input something in textbox so that the list view control works successfully.
I am trying to do it like below but it will get noticed to user. How can i trigger focus in hidden mode after a user just enter something in textbox before hitting a submit?
function BlurFunc() {
debugger;
$(this).closest('li').find('.inputField').focus();
}
Without your code it is not clear whether you are using MVVM data binding to your model, but this may help; from http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value:
By default the value binding relies on the change DOM event, which is
raised after blurring the element whose value has changed. This means
that the value from the View-Model is updated when the element loses
focus. The data-value-update attribute can be used to specify a
different DOM event, such as keyup or keypress. The keydown event is
not supported, because the DOM element value is not yet updated when
that event triggers.
For example, try adding data-value-update="keyup" as an attribute to your text box input element:
<input data-value-update="keyup" data-bind="value: inputValue" />
This should then update the model value upon each key press and not wait until focus has been removed.

How to detect changes in the asp panel through javascript?

I have many controls(like texbox,telerik grid, dropdown and radio button) on one asp panel.Could someone help me in detecting changes in any control of asp panel while clicking submit button.
There might be a better way of doing this, but my suggestion would be:
Create a hidden field that has a default value of "False". This hidden field will tell us if the form has changed or not.
Then assigning any editable control the JavaScript OnChange event.
The OnChange event should call a simple method that sets the value of the hidden field to "True".
For example with jQuery it would be:
function FormChanged() {
$(".hiddenField").val("True");
}
Then when you submit you will be able to access the value of the hidden field to know wether the form has benn changed or not.

Select box not refreshing on emptying, then adding back options

Jsfiddle is here.
I have a text box and as the user type keys in the box, the multiple select box must refresh its options.
On input change, I am using this code to refresh select options,
$("select").empty()
filteredOpts.map(function(val){
$("select").append("<option name={0} value={0}>{0}</option>".format(val))
})
But, the view is not getting refreshed with new set of options.
When i move to some screen, (for example, pressing ctrl + shift + c to open chrome console) the view gets refreshed. Same behavior is seen in firefox too where the select box doesn't show the filtered options, but when i go to firebug console and come back, the select box has refreshed its options.
It's because you're only handling the Change event and not the Input event like you say you are. The Change event only fires after the element is blurred.
Change:
$("body").on("change", "#pattern", textChange)
To:
$("body").on("input change", "#pattern", textChange)
(You can probably drop the Change event altogether from that, too).
Working JSFiddle demo.
change event will be fired when you focus out of the text box.use keyup event instead change try this $("body").on("keyup", "#pattern", textChange) .

force the focus to leave a form field with jQuery in iOS when selecting non-input element

Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});

dojo Select box, triggering events on select

Hi I am using a dojo select, I have a text box where a certain ID is entered and then based on what is chosen on the select box an action is performed. Now the problem is, suppose over two different requests the action remains the same and the id changes I cant trigger the function with the onChange event. How do i handle this? Even if the user opens the select box and chooses the same item as last time I want the function i've written to be called.
onchange fires when any option is changed of the combo box.In your case you are not changing the options so obviously that event will not fired.
You can try onclick instead.
Write the same code in onclick for the select element (however with some intelligent logic since onclick will keep on firing even before you are able to select any option which may not expected in your case..!).

Categories