Set focus on button that triggered page reload - javascript

I have a page with multiple buttons that can trigger a 'Add item to list'. This is a js function that after adding item to list will reload page so the total number of items is refreshed on shopping cart.
I need to set focus after reload on the button that triggered the refresh. (for accessibility)
How can I determine what triggered the refresh?

My suggested method for this:
As part of your JS procedure, get the id of the button in question. JavaScript - onClick to get the ID of the clicked button
Store the id of the button in a hidden variable (focusButton, etc) that persists on the page between refreshes (through being declared in the View and Model in question, and not wiped through the Controller method in question).
When loading the page, if that variable is set, set focus to the id listed in the variable, then set the variable to blank.

Related

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.

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 can I know when a new div is loading into my webapp

I am developing a webpage with different divs which are located in different files.
I have my index.html with several links. Every link is placing a different div from a file into the body of the main file.
OnLoad() event happens only when the page first loads.
My problem is that one div has a form with input fields. When I click on save, I open a confirmation page which is on another div.
I need to put the values inside the fields before the user is clicking to save the details but I don't have any event that triggers in order to perform the initialization of the elements.
To simplify my problem:
I have index.html with a link.
When clicking on the link it opens a div from a file named form_div.html.
form_div.html has a form with input fields and a continue button.
When clicking on the continue button it opens another div from a file named confirm_div.html.
The values from form_div.html need to be set into the labels in confirm_div.html
At this step I am not aware about any event that happens in order for me to set the DOM elements with the values from the URL.
Note: I am NOT looking for something with JQuery.
If what you're looking for is something like a kind of "rolling" on-load event, that will fire every time the DOM is injected with new content, I regret to tell you it doesn't exist. If you're already listening to the onclick event of the links (in order to retrieve and inject the new div) then why can't you just do what you need to do there as well?

partial ajax update with back button

I'm doing partial update to the page with Ajax which is a shopping cart that updates with Ajax as users add items to it. The problem is that if users move to checkout and then hit the back button the shopping cart looks empty as it was updated with Ajax. Refreshing the page make items appear again.
Is there a way to force updating the page on back button?
If you use the history.pushstate in your ajax app, you can keep the contents of the card in a variable in the global namespace (e.g. window.cartItems = { item1, item2, ... }), and after back button is pressed and the previous button is rendered again, get your items from that global object.
I would recommend against altering the behavior of the back button itself. Users expect the Back button to take them back a page, not to do anything else.
I would suggest a different approach. For example, you could have a piece of JS that runs on the cart page itself. This script would grab all the cart data from the backend. The script could run once when the page loads, ensuring that the cart is up-to-date.

Restore dynamic Telerik RadWindows on next postback

I'm doing some ASP using Telerik.
On my page there are 2 buttons called Create Window and Postback. The Create Window button created a new RadWindow dynamically on it's click event (client-side) by using window.radopen(). The Postback button simply does a postback. My problem is that, the windows get lost after every postback. What can I do to make my RadWindows to remain opened after a postback, including its content and position.
If there is no built-in function to restore my dynamic RadWindows, please tell me how to save current windows content to manually load it on the next postback. I thought of using a Hidden control to save my RadWindow position and content, but how can I do that (it's content is a user control with plentiful textboxes, and i don't want my customer to re-type all the textboxes).
The RadWindows are generated via JavaScript when they are first shown. You can easily check this via your developer plugin of choice. Once you show them they create their wrapper div as a direct child of the form element. This means that they have no server-side rendering and thus cannot be persisted on the server across postbacks.
What you can do is use AJAX - have the button perform an AJAX request that will update the needed content of the page, but will leave the RadWindows out of the update. Check out this help article where they explain how to use AJAX with a RadWindow: http://www.telerik.com/help/aspnet-ajax/radwindow-ajaxifying.html.

Categories