Solutions to allowing people to change their survey answer - javascript

For demonstration purposes, say I have an email that goes out weekly that has red, green and blue image tiles in them. The email ask them to choose a colour. When the email recipient clicks on a colour, say red, they are taken to my ajax site and a message appears saying thanks for choosing red. The database is updated via ajax so that 'red' is incremented by 1. The page also says that they can change their mind if they like, or simply close their browser. Below this message are the three coloured tiles to click.
If the user decides they actually wanted blue and click that tile, the database decrements red by 1 and then increments blue by 1.
Now my "issue" comes with the user changing their mind. What I am doing is when the page loads and the database is updated with their choice, I am sending the unique row_id back to the page via ajax. That way if they change their mind, I simply send their new selection up to the server along with the original row_id. I decrement the original row_id by 1, and increment their new choice.
My problem is this doesn't seem very secure as the row_id is visible to the browser and end user if they wanted to see it.
Is there a better way than this? I do not want them to have to hit submit when the page first loads, I want the one click from the email to be all they have to do to register their vote. And then change their mind if they want, or just leave the page.
This is a VERY simple example of what I am actually doing, but any advice would be appreciated.

Related

Script to fill a value automatically in the webpage input box

My job is to order diagnostic tests for patients and I need to write 6-7 characters value for each diagnostic test. I have 24 different values and I need to fill it many thousands of times. I am thinking to create 24 different scripts with Tampermonkey to speed up my job by clicking on the script box.
So the thing is that I need to fill this
box. Here are the input id and everything of that box in the console. Then I type the value manually, I get popup list which updates every time I type one character (same principle as google or youtube search box), here is the popup list after I type a value and if I want that diagnostic test, I need to click on it from the popup list, I cannot just simply click enter. So this is the code I have to fill the box by a value:
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '15002 '
})
The script fills the value, but the popup list doesn't appear and I need to click on the box, delete one character and write it again to get a list and then to choose a diagnostic test from it. Still, time-consuming.
I wonder, is it possible to make a script to add automatically a diagnostic test from the list like this example? If no, is it somehow possible to make that popup list would appear and I won't need to click on the box, delete one character and write it again? At least, could I make that the box is clicked after a value has been filled? I tried this code but doesn't work: document.querySelector("input#generic_test_order_search.ui-autocomplete-input").click()
Please help me to make it as automatic as possible, which would save me hundreds of hours in the long-term.
1 - As for the second part of the question. Picture 4.
It is pretty simple to make an auto-fill for the dropping parametres, we just might need the html-code of the elements.
For example,
document.getElementsByTagName('input')[0].click(); clicks the first input checkbox from the first input
document.getElementsByTagName('select')[0].selectedIndex = 1; selects the second value from the first select
document.getElementsByTagName('button')[0].click();clicks the first button
To make it more precise you might use class at first, at then tag:
document.getElementsByClassName('testClassDependingOnExistingClasses')[0].getElementsByTagName('button')[0].click(); for example.
Anything you do manually on a page like that can be done automatically with JS.
2 - As for the first part of the question. Picture 2.
Here is the part of the answer.
How to trigger arrow down press in js?
Maybe this code might help, but not enough information, since no data on html-code of the dropped elements.
document.getElementById('generic_test_order_search').clildren[0].click();

Pop-up, when data already saved

I have a problem with the pop-up:
This page is asking you to confirm that you want to leave - data you have entered may not be saved.
I am using JavaServer Faces and JavaScript, and after navigating away (and saving every data that I need) if on the next page I click on any button, I see the pop-up. So it doesn't even appear on the page when the data was given, but on the next one, where I have just a few buttons to select the next action.
Does any easy way exist, to find out which part of the data is not saved?

Html toggle image and save the last status

I am in the process of making a page for reporting street light faults, and I want this page to be open for contributions by public users.
I need to superimpose the locations of the lighting poles on a map image (not Google map)
The images will be like a bulb 💡 with two different images (on and off)
I want the user to have the ability to change the status of the light pole on clicking the image.
I need the page to save the last image selected by the user, so that when I get to open the page, i get the last status of the lighting pole on and off.
I am stuck in the last part, which is saving the last image selected by the user.
Any suggestions?
First of all this question kind of implies that you already have a working concept of the user making a selection of a bulb (maybe from a dropdown or something) and then can change the status to either on or off and then save the changed status.
If all that was working then you could come and ask the question of how to get this save process to happen during the click event , and also how to get the proper bulb images to show up as either on or off on initial page load.
Since it seems like you do not have even that much completed I think it may be best that you re-write your question to more specifically what exactly you need and how you are going about it , and what code you have so far.
do you have the appropiate bulbs showing up as on or off on the page load?
do you have the location of the bulb ( meaning which bulb on the map) accessible to you in the javascript on the click event?
do you have an api set up server side that you can send an id of the bulb and a status to perform the save?
after those are all either completed - or asked in another question then we can help with problems like keeping the map up to date when other users make an update. with getting the save to happen on the actual click, etc

history.js first step can't remind

I'm using history.js (https://github.com/browserstate/history.js - with the jQuery port) and I cant handle the "first step" (the origin one).
I.E. I'm from "/myPage", then I go to "/myPage/myContent2" and to "/myPage/myContent3" : it change, using AJAX, a part of the page. When I press the "previous" button, I come back to "/myPage/myContent2" and all is OK, but if I press it again, I'm back to "/myPage" (in adress bar) but my original content doesn't display :/. I've got an empty space in place of my content.
You could see live exemple here (it's not an Ad! But my online website - in french) : http://www.variance-auto.com/kits-film-teintes/vitre-teintee-Audi?choix_film=1 (that is equal to "/myPage")
Click one or more "modele" in the list on the left of the page.
In this live example I made a "hack" to avoid part of this problem : I double the first step using a "History.pushState" on the page load, that "save" the data of the first step. But you could see that you need two hit on the "previous" button to get back to the real previous page.
Thanks for your help.
I did an article on this a couple of days a go.
Have a look at it and if you need any further assistance let me know, I'll do by best to help.
The URL is:
http://www.codeproject.com/Tips/758486/Make-an-MVC-Application-into-a-SPA-with-AJAX-and-H

How do I efficiently write a "toggle database value" function in AJAX?

Say I have a website which shows the user ten images and asks them to categorise each image by clicking on buttons. A button for "funny", a button for "scary", a button for "pretty" and so on. These buttons aren't exclusive. A picture can be both funny and scary.
The user clicks the "funny" button. An AJAX request is sent off to the database to mark that image as funny. The "funny" button lights up, by assigning a class in the DOM to mark it as "on".
But the user made a mistake. They meant to hit the next button over. They should click "funny" again to turn it off, right?
At this point I'm not sure whats the most efficient way to proceed.
The database knows that the "funny" flag is set, but it's inefficient to query the database every time a button is clicked to say, is this flag set or not, then go on with a second database call to toggle it.
Should I infer the state of the database flag from the DOM, i.e. if that button has the class "on" then the flag must be set, and branch at that point?
Or would it be better to have a data structure in Javascript in the page which duplicates the state of each image in the database, so that every time I set the database flag to true, I also set the value in the Javascript data to true and so on?
I would keep the state of the element in the js on the page and just issue state-change requests via Ajax. On the server side it is reasonable to either process directly or introduce a state validation check.
This depends on various aspects of your system architecture, however. If the rating is shared between users or other similar scenarios you may need to enforce the round-trip to check what the current status is (or if you have additive nominal flags)...
The page state should be plenty. After all, the page state is what the user sees and manipulates; and they expect the result of their manipulations to reflect what they see.

Categories

Resources