How to fire CoffeeScript/Javascript after user presses back button - javascript

Different parts of the UI on my Rails 4 application rely on a dynamically populated select controls, where the option selected in the first select determines the options available in the second select. The script that sets the options of the second select runs when the select's onChange event is fired.
Everything works fine, until the user clicks the browser's back button and returns to the form that contains the two select controls. The first select retains the user's selection, but the second select (which is dynamically populated by the script) reverts to default options.
Browsers don't seem to fire any event at all when the user uses the back button, so there doesn't appear to be anything for me to hang my script on. How can I get my script to run after the user presses the back button?
What are my alternatives if I can't get the actual script to run? Do I have to ditch dynamic selects in favor of a single, massive select that lists all options in one control?

This is an inelegant, but expedient solution:
Rather than recreating my own session history mechanism, I just added a javascript_tag to my form which included a copy of the script which runs on page load (including when the user hits the back button, whereas the script in my assets folder only ran when the page was newly loaded).
This solution isn't DRY by any means, but it works in this limited circumstance.

Related

How to ultimately disable a button with javascript?

I want to build an interactive page within a website. On this page i want to put a list of items, that people can choose from, in order to bring one of them to a certain event/party.
Once a user choses an item via a confirm pop up box, i want the button to be ultimately disabled, even if the user opens the page again or another user opens the page.
I want this event to happen within a conditional statement in JavaScript somewhat like this:
if (confirm("Do you really want to bring this item to the event/party?") == true) {
HERE I WANT TO PUT THE CODE THAT IS NECESSARY!
} else {
}
I don't think you can do this with pure JavaScript, because JavaScripts loads everytime the page gets refreshed. Are you getting your data from a database? If so, you could add another field to your table e.g. "party" with the name "active". If the user clicks on a button, the party would be inactive and not showing up anymore.
But as I said, I think it's not possible with only JavaScript.
PS: Greetings from Germany ;)
You can't do this with JavaScript alone. You will need to employ some server-side scripting and (ideally) a database to store who has selected what so that you can "prevent" someone else from selecting the same item.
Your system should also include a user registration process so that you can tie your products to events and then tie users to the products they have selected for the event.
Thus:
User registers -> they select an event -> they select a currently available product -> some confirmation occurs which then flags the database that anyone else is unable to select this product for the chosen event. The confirmation can be achieved with standard forms processing methods or AJAX...
Once a user choses an item via a confirm pop up box, i want the button to be ultimately disabled, even if the user opens the page again or another user opens the page.
Javascript can't preserve these types of states. It only runs in users browsers. You can't save it to cookie either. Saved cookie is only useful for certain users certain browser. You have to save this data in your server (preferably in database) from where you can read this item is chose by a user. And then you can decide from client when to disable the button.

How to record user actions and then re-execute them in JavaScript?

I have a web page (all done in client side code) where users can add certain page elements dynamically through different buttons.
For example, they can click a button called "Add Group" and input a group name. This will create a <div class="customGroup"> that displays the group as the "title" among some other buttons that let them add even more elements within that newly created <div>.
I want to be able to store what a user did and not have it lost if they do something like close & reopen the window or reload the page. So for example, if they add a group "Foo" and refresh the page, given that the page is all HTML/JavaScript, "Foo" is lost.
Is there some way I could record their actions and re-execute them using caching/cookies? Or do I need to do it some other way? Is this even possible?
I would suggest using localstorage to keep this data around, across windows opening and closing.
You can find out what the user clicks on by attaching an event listener to the elements you care about. The functions you pass in there can keep references to the clicked items by pushing them to an array. Then you can click them when you want to using .click().
As for text the users enter when the data is submitted, make sure its in localstorage as a string. On page load, you can put this data wherever you want to, so give it to an elements innerHTML and voila, you can reconstruct the page state.

Disable dependent picklist in visualforce page

I tried successfully to disable every input and select in my page:
$('input').prop('disabled',true);
$('select').prop('disabled',true);
But in my page I have two picklist, the second one is dependent from the first in SFDC.
And when I disable every select, the dependent is not disabled.
I try to hide it, but it doesn't work either!
It only works from the Console, but I need to put these controls in a Js function.
I've found that dependent picklists are not rendered on the page in time for code in a ready function to affect them. The only way I've been able to make changes to the dependent list is to do it in a setTimeout method that fires in 1000 milliseconds or so. It's not ideal, but it does seem to work.

Lotus Notes:Web page refresh restriction on attachment upload

I have a situation, in which I want to restrict my web page to refresh after I attach a document.
The secnerio is there is some hide when condition written on OnLoad of the Form using javascript, and as soon as the form loads the hide when is active but below that we have more hide when on the basis of selection of a drop down, that is also working, but if I attach a document the web page refreshes and the onload triggers, which further enables the first hide-whne and then again I have to select from drop-down to enable the next hide-when.
Please help if we can restrict web-page refresh after attachment upload.
It sounds like the problem might be more that you have to re-select the drop-down to get the hide-when on that to work after a refresh ? That is, the value is already selected, so there's no change, so the hide-when isn't triggered ?
If so, you probably need to package up the drop-down's hide-when code into a function (if it isn't aleready) and always call that during onload so that if the page refreshes, all hide-when is honoured.
That's assuming the hide-when resulting form the drop-down change is also in Javascript. If it isn't and you have "Refresh fields on keyword change" ticked in the Notes Designer field's properties, then that's what's causing the second refresh, and your best best would be to un-tick that peoperty and simulate the resulting hide-when using javascript, with an onchange event on the drop-down.

How do I fill a dropdownlist on mouse event with jQuery?

Lets say that I have a drop down list that I want to create "on the fly" when the user interacts with it.
For example: the drop down list only has the the option "Attach a file". When the user clicks/interacts on the drop down list, I need for it to generate, at that moment, all the available files they can attach (which depends on other interactions of the form... hence why I need an "on the fly" method).
My problem is trying to find the appropriate event as a trigger.
If I use onFocus, then IE tries to load the original drop down list and then generates the new drop down list, resulting in the user to essentially need to double click the drop down list to interact with it. In Firefox, there are no problems with this method.
I then tried switching to onMouseOver which works great in IE, but not so much in Firefox. The difference in the two is that in IE onMouseOver only triggers on the drop down box and not the drop down list and in Firefox it triggers on both (so you are trying to select an option from the list and it keeps re-generating the list on the fly, which is preventing you from interacting with it).
Any ideas?
Have you tried onClick?
Also you should put some logic into the code that fills in the options. If nothing has changed on the page, then there is no need to refill the drop down list. So if you store the state of the page somehow, you can check if the new state is different from the old state, and then fill in the dropdown if it is.

Categories