In Google Sheet, I like to create a general JS/GS function similar to the Hyperlink() function so that I can quickly create a Pop Up message without creating so many JS script.
While we can create all kinds of AppScript function that accept a text variable as the pop up content, the challenge is that we cannot trigger it unless we create some kind of buttons or add a menu option. Both adding button is cumbersome to create and it is not conveniently sized and fixed within a cell. If I have many of such pop up messages across the sheet, it will be pretty difficult to create so many buttons. I have searched all over the net and cannot even find someone asking a similar question not to mention a solution.
The most efficient way is a function which is similar to the hyperlink() function where I can just add the contents of the Pop Up dialog box. I can image the product will be something like the mock up image below.
Please help.
enter image description here
You can use an onEdit() trigger to show the alert. Inside this onEdit() you can set the conditions you want to be applied and set multiple alerts to show.
It is not a ton of code if you want to keep it simple.
I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.
I'm looking for a way to create CSS/Javascript based pop-up windows. I'm fetching information from my database depending on how many (example) cars there is. I want to be able to create an equal number of CSS/Javascript based pop-up windows to each car I have in the database to show more information about the car in the pop-up.
The trick is - of course - that I want the right information about a certain car to show up when you click on the related link.
How do I solve this?
If you only ever want a popup to be open for one car at any given time, you can have a single popup element that you show/hide and reposition when they click on a link, then load the content for the specific car using AJAX.
If you want them to be able to open popups for multiple cars at any given time, dynamically generate a new popup element when they click on a link, position it correctly and then load the content for the specific car using AJAX.
I'd suggest using a Javascript framework (such as jQuery) because it will make the process considerably easier. There are also a number of plugins that you could look into using that perform this functionality.
I am building a web application that will have a fair bit of forms. The html forms are generated using php.
One of the things I came across is this:
I have a drop down box for the user to select his country. Once he selects the country, a call is made to the server to fetch a list of states within that country and populate it in a drop down box.
Initially, I thought I could provide 2 options:
An enhanced jquery version where ajax is used to fetch the states and the populate it in a drop down.
Where javascript is not availiable, the whole page is submitted to the server and then rerendered with the new states in the drop down.
However, onChange() requires javascript. So if someone where to visit the form without javascript enabled, there's no way we can deal with the second option, since javascript is required to submit a form using onChange().
What are some ways to deal with this? My only solution at the moment is to just make javascript mandatory. Users without javascript enabled will see a message saying that the page will not work properly.
Some sites:
Hotmail.com - Refuses to show anything except a "javascript is required message"
Facebook.com - Tells us we should use the mobile version of the site.
Google Maps - Does not work. No message to say javascript is required.
Gmail - Falls back to basic html.
Google account - Does not work. No message to say javascript is required.
Is it acceptable to require users to have javascript enabled at the current state of the web (august 2011)?
Just came across this possible solution:
http://cita.disability.uiuc.edu/html-best-practices/auto/onchange.php
I could perhaps add a button which the user can use to select their country. This should allow us to reload and render the form with the states drop down without any javascript.
You can provide a drop-down of states and tell the user to leave it blank if not applicable. If JavaScript is enabled, it can remove the drop-down until a country where it is applicable is selected.
No, it is not acceptable to require JavaScript; many security-conscious users use NoScript, for example, and would prefer not to turn it off.
By default you should load all possible values into the second dropdown, then clear them out on page load with Javascript. That way people without Javascript enabled can still choose the correct option.
I'm guaranteed to take flak for this, but whether you support no-JS or not should be your call. If you think your userbase is likely to have a sizeable portion of people who disable JS, then you should give them a site that works, but not optimally. If you think most of them will be running with "normal" (air quotes are important there) browsers, then you may consider dropping support for no-JS users.
I am NOT a professional developer, so take my input accordingly. Here are my observations:
I support a website for a wedding cake vendor. Upon observing the competition, all the more appealing sites are embellished (tastefully) with slideshows, dropdowns, animations, interactive form validation, etc.
When scouting for methods to incorporate these features into our site, I found that mostly every classy method was based in javascript.
Figuring it was better to present ourselves as the classy act we are (humble smile), I have decided to require users to have javascript enabled. We've been up for 7 years, and I have not received any complaints. All work on mobile devices.
A compromise option is to start with your State drop-down populated with the states of whatever country your business is in, e.g., all US states, with an extra option (preferably at the top of the list) that says "Other, non-[yourcountrynamehere]". Next to the State drop-down have a text input where the user can type the name of their state if it's not in the list. If JavaScript is enabled then on document-ready you can hide the text input and go with your Ajax solution. Without JavaScript the user has a fully functional page that doesn't even need a reload.
What I ended up doing is to add a button beside the drop down that says "select country". Users without javascript will see this button. Upon clicking it, the page will reload with the list of states rendered.
For users without javascript, this button is hidden, and selecting a country will automatically render a new drop down containing the relevant states.
I am trying to set up a page that presents a grid with a sequence of times on it for a group of people. Essentially a calendar with rows for a specific time and columns for the person it relates to.
I intend to have a modal dialog box open when a user clicks on a time and load the current data via AJAX. This is very similar to the contact form example except of course that I will not know what the time and person are until the link is clicked. So I would like a way to pass this extra data to the dialog calling script.
Many thanks
A nice way of doing this is the new data-attributes in HTML5. Not to worry, they are supported by all browsers.
If your extra data is time and person, your link would look like this:
...
And you can access this data in the javascript-function:
var link = this,
time = link.getAttribute("data-time"),
person = link.getAttribute("data-person");