simplemodal passing additional param from the calling element - javascript

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");

Related

Bokeh dashboard: any way to save user selections for page reloads?

I have a Bokeh dashboard where the user can select a bunch of inputs using CheckboxGroup and Select type of selectors, e.g.:
category_select = Select(value='produce', options=['produce', 'grocery','clothes','shoes'])
The dashboard is supposed to show near-real-time data though, so it reloads every 10-15 minutes, and all user selections (such as "shoes" above, for example) of course vanish when the page reloads, which is annoying for the user as they have to start over. Is there any way to persist the values of all their selections from one reload to the next?
I've tried using localStorage within the template/index.html file, but I only know how to use localStorgage when I can refer to a document's html elements by name or id, and I don't know how to get the names or id's of all the Bokeh elements. For example, for that 'category_select' selector above, I have no idea how to "wrap" it into some kind of < something id = "something" > category_select </something> type of syntax.
Help would be appreciated!
Instead of entirely reloading the page, I would try streaming the data through a periodic callback in the bokeh document that runs every 10-15 minutes as needed. This way bokeh automatically handles the task of remembering all of your user's selections. Streaming also has the advantage that it doesn't reload the entire data set but just appends the latest data.

Can I create dynamic menu items using a form popup?

Would it be possible to use a popup form to handle parameters for a custom menu item in a spreadsheet? I'm not necessarily asking for someone to write the script. I just don't want to try only to discover I've been wasting my time.
In my spreadsheet, I want to be able to save a sheet to a new file/spreadsheet (that part is done) and then access/load that saved sheet again later through a custom menu command. The issue I'm running into is that I want to be able to call the same function every time, but be able to specify a parameter (which sheet to access). My thought is that the form would act like an alert with multiple choices populated by the array of available sheets.
Or is there a simpler way to offer a multiple choice without going through a series of YES/NO alerts?
Yes. You can use dialogs.
modeless dialogs
modal dialogs
Dialog Example

HTML using jQuery to send a postback?

I am creating a website for a clothing brand but am still getting started with my web dev work. I have an index page with several clothing items on it. When a user hovers over the picture of the item then a hover over effect comes into play and a small "View Item" appears over the item. When the user clicks this "View Item" text it opens a new page with that particular page's info.
The part I am struggling with is how I send the parameter to this item page as I will need some way of knowing what item was clicked. Can I write a jQuery function that will fire when the text is clicked and perform a .post() method to the item.php page passing along the item ID ?
So it would be something like
$.(document).ready( function() {
$("#itemText").click( function() {
$.post("item.php", parameters);
});
})
POST isn't the proper protocol for that. Use GET instead.
GET is vary easy to use with HTML links; it is what happens every time you click a link on a website. Say the page is "products." If the user clicked on product 1, than the URL for that page could potentially be "products/?id=1" (or products/1 if you are using mod_rewrite). The "id" variable with a value of "1" will be available to the PHP via $_GET['id']. With that variable, you can retrieve the proper information based on the id.
POST is for forms where users are submitting fields of data or images. http://html.net/tutorials/php/lesson10.php
If you are attempting to build a pure Javascript solution, then that is an entirely different matter. In that situation you would use Hash tags or HTML5 History API to change the URL. When the URL changes, Javascript is notified, and then whatever actions can occur. However, based on the fact that you specifically said "POST" I am assuming you are using a server-side language like PHP.
If you are opening a new page, you should not POST. If you must POST, you should POST then Redirect, although since you are not actually performing an action I recommend just sticking with a GET request. This way the newly opened page can easily be refreshed and shared by the viewer.
The most elegant way is to use rewrite rules or a router on your server so you can communicate which item to display, for example: http://example.com/item/1/
However you can also just use a GET parameter: http://example.com/item/?id=1
If you need to communicate to Javascript that will be executed on a page you can also use a hash: http://example.com/item/#1
There are several options using GET depending on how you display the item information, and what server-side technology you use.

Trigger an on-click overlay automatically once per user per ip

Like the title suggests, I have an overlay modal window on one of my websites. It fires every time a user clicks on a specific button. Am I able to somehow trigger that specfic button automatically once per user/ip so I can display that modal at least once for everyone, even if they don't click it? It's a good way to increase social-media fans and I noticed many websites are using this method. Is there any script that simply does that? I will provide code if necessarly although I don't see how it can help since this is more like a general matter.
Okay, looks like you want two things...
to trigger the modal to show regardless of whether the user clicks or not
window.load(function () {
//execute your modal popup here.
});
Note: You'll need JQuery for this.
to limit the window to only appearing once per user.
If your users are using a login, I'd suggest creating a new table for promos, possibly named, 'UserPromos' and create a bit field for this modal like, 'modalshown' and set it to false '0', for all users. Then, merely send that value to your page in a hidden input field, access that value from JS and if that value is '0' then show the modal with your script above and if it's '1' then don't.
Your server side code would update the value for the UserPromos.modalshown for that user in the db.
If your users are just visitors to the site, then you must use a JS cookie.

Fill and add select options and sync with database

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.

Categories

Resources