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.
Related
I looked on SO, here, a few other places & ... cluelessness set's in.
What is the structure of the Facebook " Like " Button found all over websites ?
Is it a Social Bookmarking, Browser Button kind ?
Is there a step by step process (without using FB Api) to make my own kind of button.
How to design & implement a Like Button ?
I want my own button with similar functionality as FB but NOT related or developed on their platform! I am trying to input this in iWeb'09 as a html widget.
I've done this successfully. Here's how i did it:
You have a table in a database called "likes" with fields username,postid (and date, id if you want too)
Each post/blog/article should have its own id.
When someone likes a post/blog/article, you take the id of the post/blog/article and the username who liked it and check the likes database to see if it already exists. If it already exists, you remove the like. If it does not exist you add a like.
For example with AJAX, this is how i did it specifically:
I have a blog post with id 6.
Jonathan likes this post.
These 2 variables are sent via a post form and wait for a response, likes logic checks database to see if this record already exists in likes table (username,postid) values ('Jonathan', 6) if the response is 1 (or true), then i update the div number for the likes button from whatever value was there originally and add 1. If the response is 0 (or false) then i take the original value in the likes counter and remove 1.
To answer your question consider what happens with buttons and then go into like buttons.
Pressing a button triggers an event on client which may or may not update a server somewhere to notify that a button has been pressed for such and such intention. You can send a lot of extra info with this event like when and where who and why etc
Like buttons usually have extra info on who liked it and what they like. In order to get that you might ask people to sign in or provide some kind of input to identify them.
Take a real world example of a like button you can implement in say javascript using any server side technology
Whoever install your script will be able to see the button. You may form it with any css or your javascript can simply load an iFrame from your server or append elements to DOM to show this button
When clicked it calls your server with person's info or at least the page url where it was called. For example google analytics uses a unique ID associated with domain url to track visitors.
when you recieve this call you can update your database/storage or anything with the tick mark that button on abc site has been pressed so lets update their likes or dislikes.
If you want your javascript can also increment the number on the same page either before or after updating your server.
When someone else visit that site the script again loads and send a request to your server so you can update the count on page but this time user does not click on like/dislike button so you dont update the record.
You may then show it as a pie chart to user on total visits to their site or page with division in people who liked it and people who did not report back (did not press the button)
If you are still wondering how you can create a button . Use CSS button generator to get one
You must first have a database where you can store various values.
Now, Whenever the user clicks the button, the value of the button stored in the database must be incremented. For this, you will need a backend language which connects you to SQL database.
So whenever the button has clicked the value of the likes in the database changes.
I want a script for Javascript where I want to display a particular record when a particular button will be clicked.
So, here is my requirement:
Here is a particular record where it governs through a 3 stage workflow process(Submit to assessor,reviewer and practice auditor). In this record there are 50 questions and when the user completes the assessment by attempting all 50 questions he'll click save and review button which is present by default at the bottom of the page.
So, i want when the user clicks the Save and Review button, after that an automatically the "Submit to reviewer" button will appear. Same operation I want to perform for assessor and practice auditor.
Can anyone please explain the script which I've to write to accomplish this scenario?
You just need to hide the button you wish to show, and reappear it when needed like this:
if(document.getElementById("element").click()){
document.getElementById("elemenet2").style.visibility = "visible";
}
This is the easiest way using pure java script.
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.
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.
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.