Html toggle image and save the last status - javascript

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

Related

JavaScript (background and sound change to all pages) help needed

For my final project for a course I want to make some kind of minimalistic, meditation/relaxation website but I'm struggling with coding the JS functions. I'll try to explain the steps for what I want to do:
The page starts out with a white background.
Text fades in. (i.e. "Welcome")
When a key is pressed or the screen is tapped on mobile, the previous text fades out and another text fades in, but still on the same page.
Another text later, with options below for the background. When an option is clicked, the background changes and again, the text fades out.
Same as #4, but with background music.
Then there are 3 routes to go to (so different pages), the codes for those are simple so I don't need a lot of help, but how do I make them so that the background image and the sound that the user has chosen, carries on?
Is this completely doable with only JavaScript?
Should I incorporate Flask in my program (i.e. HTML layout/template?)
I'm really lost :( Does anyone know which functions I could use? Help will be appreciated!
Yes you could achieve this result by using only javascript
You can send the user's selected background and music through query parameters and access them with url in your javascript of other pages.

Pass Range instance through different contexts on Opera Extension

I am developing an extension for Opera, which is an absolute first for me, and at some point I want to save the context where a user highlighted some text, so that when the user refreshes the site, or reopens it later, the highlighted text will be highlighted. I execute a js script that does the highlighting, and it sends it back to the background process, which stores it in an array (for now I want it to be persistent at least through a single session of Opera). Then, once any tabs finishes loading, the background process has it run a different js script that highlights any previously saved text from that webpage. To do this, I have a highlight object, that currently has the highlighted text, along with the source url, and an ID. I tried passing the range that I used for highlighting the text, but as soon as the range object gets sent to the background process, it is just received as a generic object, which I cannot use.
So the problem I am facing right now is that once a page loads, I know what pieces of text had previously been highlighted on that page, but I don't have a way to highlight them.
I guess what I was trying to do (passing the range, or the start and end containers) didn't really make a lot of sense, but I can't think of another way to do it, nor can I find anything online to help.

Solutions to allowing people to change their survey answer

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.

<Web Scraping>Elements not visible in HTML?

I'm trying to write a python web scraper that takes a pandora account and gets all the stations from it.
However, the stations do not immediately all show up, and i need to click the show all button to view all of the stations. Moreover, even after i click the show all, the source code remains unchanged!
My question is where is the html that displays these extra elements that are seemingly invisible?
Example)
if you go to http://www.pandora.com/people/nenadbach#tbl_stations_table,all
(the #tbl_stations_table,all makes all the stations show up; this is where the "show all" button takes you)
And view source, the stations after The Girl From Ipanema Radio arent stored in the immediate source
Thanks for the help!
If you view the source from Firebug (if you use Firefox) or Inspector (if you use Safari or Chrome) you can see that the data is there. It's most likely being pulled in via ajax (JavaScript).
You would either need a scraper that understands JavaScript or to find the http ajax calls its making and call them yourself. The call that you are probably looking for is:
http://www.pandora.com/favorites/profile_tablerows_station.vm?webname=nenadbach&countRowsOnBrowser=10&countRowsNeeded=25
Note that mostly likely this is using a cookie to detect who you are and what list to show.

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