html remember the selected option from drop down navigate to selected option - javascript

hey i am working on a website that has multi language support in HTML I have different pages for each and every functionality Now say if the user select a particular language like say Chinese and is on the HOME page and wants to navigate to CONTACTUS page,but when the CONTACTUS page loads it load in ENGLISH which is a default language which is wrong if the user has selected Chinese the CHINESE's pages should only be loaded how can i go about

Save the Selection in SESSION['LanguageName'] and on different pages, retrieve the value in SESSION['LanguageName'] and load the dropdown and page accordingly.

An option would be using SESSION variables to remember the selection and then when the user opens a new page, check that variable and load the corresponding language.
Another option is to use a URL parameter to identify the language, like ?lang=ES. This is better for search engines indexing. Again, when the user enters on a page, check that variable and load the corresponding language. All links on the page should have this parameter too, to keep the language.

Related

Navigating back to Search Page with same state (JavaScript)

How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.
e.g.
HTML:
https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html
There are 5 elements that determine what is shown on the page:
What tags are clicked in the three filter menus, on the side
What search term is typed into the search menu bar, at the top
The pagination page that is selected, at the bottom
Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.
If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.
Any ideas on how to solve this? Would seem like a fairly common problem?
The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.
Pls do help!
Many thanks in advance.
Sachin
UPDATE: This has now been solved based on the answers given below
You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily.
Like this-
localStorage.setItem("tags",tagItemsInAnArray);
And laterlocalStorage.getItem("tags");
You can use localStorage to keep the search filter data. The concept is to keep all filter data in an array and keep that array in the localStorage of the browser before any redirection. Here is an official documentation with implementation of localStorage.
Here is a demo:
//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));
//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
//cache data exist
}
//when you need to delete cache
localStorage.removeItem("searchFilter");

Saving previous page parameters js, jsp

I'm currently working on one project which uses jsp, javascript, spring among others. I have a search page implemented where user can search by different criteria. (e.g. http://localhost:8080/service/timesheet/view?status=A&size=100&sort=startDate,asc&page=0&f_startDate_gte=2016-02-01&f_endDate_lte=2016-02-29)
When I click on some entry in this page I am redictered to the new page where a single item is shown. Now I want in this page to have a button which will bring me back to the search page but with the previous configured criterias. But the thing is that I can acces to those single item pages also from other points in application. What would be the best way to do this? Does it need to be done with passing parameters from jacaScript and checking out what was the previous visited page? Thank you for your help!
put it in user session object with a key that uniquely identify it. then you can make the decision based on that key/object pair.

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.

Conditional actions when an Oracle APEX navigation bar item is click

The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.

Show user information on mousehover

On Mouse-over i wish to show user information such as User Id, User Name, User Location, User Age etc. All this info would be coming from database. As well, this information would be in a rectangular block that would actually come-up on Mouse-over.
I am aware that JavaScript could be use to show div (in mouse-over) but don't know how to fetch from database?
Plus the application is a Windows Based Asp.net Application. I am not aware whether that could be possible in Windows based as i'm web based developer.
Thanks for all your inputs.
You could use the jQuery qtip plugin that can display dynamic content, see a documentation at
http://craigsworks.com/projects/qtip/docs/tutorials/#dynamic
and a demo at
http://craigsworks.com/projects/qtip/demos/content/loading
The url parameter should point at an aspx page that show the text that is loaded from database.

Categories