Triggering Javascript on cached page? - javascript

I'm pretty sure I can't do what I'm actually asking, but am wondering if there is some sort of workaround for the issue.
I have a page that has a drop down SELECT form element with several options. If one particular option (in this case, the first item) is selected, we show additional content (via jQuery). This works fine.
What happens, though, is that if I select item 2, the additional content disappears, as it should. I then go to a different page and then hit BACK. A that point, the page properly has kept that additional content hidden (as it was the last state) but the SELECT menu has been reset to the first item. I then have to click the SELECT, pick a different option, then select it again picking the first option, which finally brings the additional content back.
I can't trigger Javascript from what I can tell on a cached page (or is there a way?) Any other clever options?
One option I've come up with is to apply some sort of mouseover action to the area that houses the SELECT menu that does a quick 'reset elements' check. This seems a bit hacky and, of course, will produce an odd screen redraw unexpectedly for people.

You can record that the user action has taken place and re-execute it using JavaScript. You can store it in a cookie, then check for it on page load and reset the elements you want.

Related

Trigger dynamic dropdown to load

I'm very new to scripting stuff, but here's what I'm trying to do. When visiting a webpage, there are two dropdowns available, but the second is disabled until a selection is made in the first. The content of the second populates automatically as soon as something is selected in the first, and each option in the first leads to a unique set of options in the second. I'm attempting to automate selecting items in both. I can set a value in the first using "document.getElementById('firstDropdown').value = 'myValue'", and I can get the label of myValue to appear in the dropdown window, but I can't get the second dropdown to populate because it doesn't realize that I've made a selection since I'm not physically clicking on something. Is there a way to reload or refresh only secondDropdown (not the entire page) so that it realizes I have made a selection for firstDropdown and thus populate?
You can trigger change event of firstDropdown with below code using the Event Constructor.
document.getElementById('firstDropdown').dispatchEvent(new Event('change'));

force safari iOS select component to update when options change

When you tap on a select input on a web page using iOS (iPhone), a spinner widget (the "picker") pops up and lets you spin through and select options within that select. Let's say you've tapped into one of these and the selector widget is open. While this is open, if you use javascript to modify the select options (add, remove, update options via the dom), then these changes don't get reflected in the widget unless the user closes and reopens the widget.
Is there a way to force the browser to update the options automatically?
Edit: Here is an example you can use to observe how updating select options doesn't update the selector widget: http://jsfiddle.net/RrsNk/
<select id="my-select" />
$(function () {
updateSelect();
});
function updateSelect() {
$("#my-select").empty();
for (i = 0; i < 5; i++) {
var ran = Math.random();
$("<option />").attr("value", ran).html(ran).appendTo("#my-select");
}
setTimeout(updateSelect, 2000);
}
Safari uses a UIPickerView to display the dropdown menus. As you would expect, the title of the dropdown component in the page is updated according to the changes in the DOM but the picker view is not tightly coupled with the DOM so it isn't updated. The situation is the same with Chrome and Opera Mini.
So in conclusion, it is not possible what you are trying to implement. You should look for other ways to make your dataset accessible.
I was brought to this question as the closest to my usage case, which is similar but not identical, and might apply to other people as it is a common situation. I found the answers here a touch confusing, so just wanted to clarify my findings.
I start with a dropdown containing just one option: Searching....
When the user clicks, the "picker" pops up (a "tick-list" on iPad, same principle as the "spinner" on iPhone), showing Searching....
An AJAX call gets come choices from the server, and JavaScript updates the options[] to these.
At this point, the picker still shows just Searching..., and the user has no clue that it has been repopulated. The user must click outside to dismiss the "picker", and click the dropdown again to see the new choices.
So in my case I do not have OP's situation of wanting a second dropdown to be displayed depending on what option is selected in the first dropdown. Rather I would like (#1) the "picker" disappear, and then (#2) reappear (with the new choices).
Now, it seems you can do #1, but not #2.
You can dismiss the "picker" by dropdown.blur() (tested in Mobile Safari). See Close a SELECT dropdown list programatically with Javascript/jQuery.
You cannot cause the "picker" to pop up again (at least not in Mobile Safari). See How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?.
So I am at least doing #1, so that the user gets some feedback rather than just being stuck with Searching....
If anyone can state how you can do #2 on Mobile Safari I would be very interested to hear....
Worth trying: populate a second <select> element, and .focus() to it when the item in the first select list is chosen.
Note that iOS only allows a control to be focused within a user interactive events (touchend or click event) so I am guessing Safari Mobile might allow .focus() to work within a <select> (to opening the second select list).
Might not work, since an onchange event of a select list might not be deemed "interactive" or Safari Mobile might otherwise disallow selectElement.focus() to work for some reason.
Edit: I think this shows it is unlikely to work: force safari iOS select component to update when options change
Don't bother trying if you need to contact a server to fill the list. That is because when you get the response event, you are definitely not in a user interactive tap/click event handler, so .focus() is sure to be ignored (although there is a very slight chance an async chain could work).
Firstly, why would you want to - you should adjust the values in your HTML file, or with JavaScript as the page is loading.
However, if the values are changing as the user selects the dropdown, you can use JavaScript to select another element, then reselect the dropdown, causing it to reload.
You can bring focus to an element with the focus() method. Eg.
Document.getElementById("input").focus();

Chosen Java script plug in behavior - Shows items in list prematurely

We are using Chosen Javascript plugin http://harvesthq.github.io/chosen/ . It works great except one issue. When it loads on the page, it shows the "list box" kind of view for few split seconds in place of the Chosen plug in. It loads to the chosen plug in "view" finally. But for that few moments it looks bad with all the data showing as items in list box. For example, if we have a Chosen Plug in control linked to a list of States in US. When this page loads, for a split second, it shows a list box (not the chosen plug in) and it shows all the items in the list (list of states etc) .. then after the page loads completely, it will render the Chosen Plug in with blank items as its supposed to.
Is there any setting I can make use of to fix this? Any work arounds? Causes? Any one encounter this before? Thanks for the help.
You could potentially set the style display:none; on the element and then display it once chosen loads.

Special print style for different print buttons with after-print removal

I am working on a page which will have an area at the bottom listing out groupings of FAQs with a few different tab levels and then questions which can be expanded/collapsed by the user. We want to provide a way for the user to be able to nicely print
Just the questions/answers they have expanded
All the questions/answers in the sub-group they have selected
All the questions/answers in the primary group they have selected
All the questions/answers on the page
The plan is to have a drop down box with a print button (unhidden by Javascript) that would apply a class that when clicked that would hide the other content on the page and give us the display we want for the user selected option. This is all easy enough to do and we can apply a default print-style using #4 as a catch-all when javascript is disabled which can just be triggered via the normal print mechanism.
The problem is how to remove that special style when the printing is done so that if the user were to go and click the browsers print button, they get what they expect a print out of the whole page instead of the last selected "special" print view.
I have thought up a few potential solutions but I am not entirely happy with any of them:
We could replace our planned in page print with a link to another page which formats itself without interfering with the rest of the page content. I don't like this idea because it breaks the page into pieces and if possible I always prefer to keep the user on the page.
We could set a timeout when the print button is clicked to remove our special class after some period of time bringing the page back to a default state. I don't like this because it will produce unpredictable behavior from the user's point of view. If they take "too long" printing the first time they don't get the style they want. If they print the whole page "too quickly" after the special print they get an odd result
We can use the after-print trigger in IE to remove the style for those users, but as far as I can tell this sollution is only an option in IE and leaves all the other browsers in the cold.
We could make a general assumption that a user is very unlikely to come to the page and do a special formatted print followed by a desire to print the entire page and just let is go at that.
Any other solutions anyone can think of?
Your first solution is actually very good if you use target="_blank". This would keep the user on the page but avoid all the other problems.
However, I think the whole problem is moot if you make the page layout match the dropdown. In other words, if they're looking at Section 2, Subsection 3, Question 1, and they select
"print all questions in subsection", just expand the subsection and open the print dialog box. Then you only have to worry about setting a single class (noprint) and apply it to everything else.

Browser back button and dynamic elements

I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.
Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.
The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.
I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.
Is there a better way?
legenden - there are a number of possible solutions to this, I would check out these history plugins for one:
History Remote
jQuery History plugin
Deep Linking plugin
They are a little fidgety, but you should be able to hack up something positive. I will also add, that this can probably be done by storing the dynamically elements in a cookie(s) and somehow repopulating. Check out the jQuery Cookie plugin. Hope that helped you get started.
You need to manage history yourself if you want things to work in this way. You need Really Simple History.

Categories

Resources