Using SetTimeout() To Wait Until User Stops Clicking On A Group Of Checkboxes?
Apr 27, 2009
I have been working on a JS program that will, among other thing, allow users to search for downloads, articles, videos, etc, by selecting various checkboxes grouped under different fieldsets. Basically, when a user selects a checkbox, the pages sends an xhr request to the server and returns a specific set of search results at the bottom of the page. If the user selects a second checkbox in the same group, the previous results are deleted, and the new results are added to the page. The same happens when a user deselects a checkbox and there are other checkboxes within the same group that are still selected. The problem I run into is with real-world users who most likely will not be patient enough to wait for the results for the first checkbox to load before selecting a second checkbox. The result of this is that the server quickly becomes overloaded with requests, and old results are not deleted, or new results aren't even added properly. Basically, I would like to group the checkboxes in such a way that the browser waits until the user stops selecting or deselecting checkboxes before sending the request to the server.
As you can see from the code segment below, when the user selects a checkbox, a loop checks to see if any other checkboxes are selected, and then accordingly adds their values to an array. I have tried using setTimeout() to control how this works, but to no avail.
Code:
addResults: function(inputCheck)
{
// reference to keyword array created in the clickListener function
var keyword = GroupPlan.keyword;
I'm trying to create a demo to display a new way of showing our data.I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working.
I need to be able to check all group 2 checkboxes and disable them from being unchecked when checkbox group1_3 is checked. Unchecking group1_3 checkbox will uncheck all group 2 checkboxes. Does this make sense? Is this possible with Javascript? If so, can anyone suggest how?
I have a page that has groups of checkboxes that are generated dynamically. The identifiers for all the text boxes are generated dynamically so i dont know what the name will be for any of the checkboxes before the page has loaded.Each group of checkboxes has a master checkbox and several child checkboxes. Each master checkbox has a unique ID. All child checkboxes have a 'class' element which is the ID of its master checkbox. I want to use the ID of the master checkbox to determine which checkboxes to check/uncheck. When the master checkbox is clicked, i want all its associated children (i.e where child.class=master.id) to be checked or unchecked. Here is an example of what i have so far
I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear.
I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes.
For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear.
I have the "master" checkbox. When clicked it should check all "list[]" checkboxes. When removing the check from "master" checkbox it should remove checkboxes from all "list[]" checkboxes. What asm I doing wrong with my code?[code]
I'm trying to create a group of radio buttons that enable user to select whether to maintain the current image, remove the image or upload a new image. If user selects maintain the current image or remove the image, the upload field will be disabled, when user select upload a new image, the upload field will be enable. My script is as below but I do not get it work correctly, do you have any advice for me?
HTML Code: <script type="text/javascript"> function Disab() { frm=document.forms[0] if(frm.change_voucher.checked) {frm.img_voucher.disabled=false} [Code]....
Currently I optimize my website. I would like to use php, javascript or ajax to implement the asynchronous action:
I have an array of checkboxes: <input type="checkbox" name="checkboxArray[]" value="checkboxValue" />I would like to add functions that when the user check a checkbox, diplay the checkbox value below the web page right after the action, if the user continues to check another checkbox, show both value.
so that the submition is made by the onclick event, not a submit button. How can I make it?
I'm trying to display an alert message (a div with text) that fades in, and after 6 seconds fades out automatically. That's easy, but I also want to allow the user to close the div by clicking on it if they so desire. The problem is, the delay() function overrides the click, or so it seems -- clicking does nothing unless I remove the delay().
Here's the code I'm using:
I've tried reordering and combining these into a single statement but it yields the same result.
As this forum has been so helpful before, this time it's a JS question:I have a list of checkboxes from which the user can select 1 or more to check and perform an action upon.Thus, all checkboxes have the same "name" (in ASP code, since it's DB-related):
response.write "<input type=checkbox name=""FieldName"" value="&obj("OrderID").value&">" I call JS using a button: <img src="images/TrashBin.png" border=0 onclick="Delete(document.FormName.FieldName)">
I am trying to allow a user to easily uncheck/check all checkboxes in a form by checking or unchecking a checkbox. The checkboxes would be in a form like so: <form action="" method="post"> <input type="checkbox" name="checked[]" value="1"> <input type="checkbox" name="checked[]" value="2"> <input type="checkbox" name="checked[]" value="3"> <input type="checkbox" name="checked[]" value="4"> </form>
I use an event handler to call a function: <input type="checkbox" name="checkall" onchange="checkall('checked[]', this.checked)">
And here is the function: function checkall(box_name, current_state) { all = document.getElementsByName(box_name); action = (current_state == "checked") ? "false" : "true"; for (i = 0; i < all.length; i++) { all[i].checked=action; }}
The event handler should pass the name of the checkboxes and whether the "check all" checkbox is currently checked or not to the checkall() function. Nothing happens when I check/uncheck the "check all" function.
I am using jQuery and blockUI to prevent the user from submitting a form twice by double clicking on the interface: This is in my global js file and is called on every pages
I have created a table that allows the user to edit specific cells by clicking on them. Their new entered values set the value on the table. They then should be able to submit a form which sets several hidden inputs equal to the values in the table then passing the information to a php page to process. However, the php page doesn't output anything when it is submitted. This is the form layout.
I'm a relative novice at java script. I've been working on a google map that can be found at: [URL](way too much code to post here). Each of the makers on the map has s particular set of information that pops up in a window when it is clicked, including a hyperlink called "join this group." Right now clicking on that link merely takes the user to the form at the bottom of the page.
What I would like the link to do is to both take the user to form at the bottom of the page and automatically select from the drop down menu the group associated with that particular "join this group" link. For example, if a user selected the marker representing the Neighborhood, Beverly group and then hit the join this group link, the drop down menu would automatically select the Neighborhood, Beverly (Pless) for them. I suspect this involves using java script to pass a value. I just have had no luck getting it to work.
I have a radio group that, when a certain option is selected, it makes the radio group disappear and a textbox appear. It works great in Firefox, but it appears to be glitchy in IE.
<script type="text/javascript"> function showRestaurantTextBox() {
I have the following function that's supposed to say "Please make a guess" 20 seconds after an initial confirmation is displayed. However, it's immediately displayed as soon as someone hits "Cancel". If I change it's time to 40000 (20 seconds after the initial function is called), it does do it 40 seconds total, so it kind of does what I want. So it seems that the second setTimeout is initiated from the time the script is called generally, but I'm looking for a way specifically to have the 20 seconds start only after the "cancel" button is hit.
I have a page that submits to a db then re-loads its self with new information. Unfortunately it goes wrong when the user double clicks on a one of many text links that provides the info for the display on reload. How do I stop users from double clicking on the page? Ideally I think I would like to call some sort of js function from body onload as I presume this would then cover the whole of the page, but have no idea if this is possible or how to go about writing it.
I am writing a chrome extension.In this extension i append a img tag to the dom. Then i read the width and the height of the picture to adjust it to the viewport size. The problem is that when i read the dimensions right after adding the img tag i get zero with and height. I could fix that if i make a setTimeout between adding img and read size.
Could anyone please tell me if there is any way i can have the text "Menu Loading Please Wait..." appear while the js menu loads and then disappear after it loads?
Now what i want to do is: i have a callajax() function. with in this function i will call do_login() function. this do_login() handles an ajaxrequest and returns the responsetext.
Now i want to do some validation on this responsetext(in case of onsuccess). so i am trying to return value to callajax() function for onSuccess case in ajaxrequest.submit();
That is(onsuccess response) supposed to be some string( but not true or false). but i am always getting false in ajaxcall() function. i know the do_login() function is returning false before ajaxrequest completes
So i want to stop this and make do_login wait until ajaxrequest completes and then i want to return it's response to callajax() function.
I'm trying to use Google's Translate API. I copied (and adapted) the example below from here. I would like to input the text to translate, instead of having value="I cannot input my text", but I do not know how to make the script wait for input.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>
[code]....
I know this should be very simple but I'm new to all this, so if anybody could indicate what changes I need to make to the html and/or script to translate the text I input.
I have a calculation system that uses ajax with php and xml and executes with onkeyup. The only problem with this is the result can be returned before the user finishes entering the entire number. My question is how can I give a delay prior to running the rest of the js.I know how to use setTimeout() but will it get reset out every time the function is called or for example if they enter 5 characters in the form, will the script be called 5 times with a second delay from each or will it only be called once? Is there a performance degradation involved?
I'm calling a recursive function, and I want to display an alert after its done running, the thing the function is "done" after goes through it once.Here's the coles notes version....
Code:
function yay(n){ n = n-1; if(n=0){
[code]....
I don't want it to show the alert until its done all of it's recursive splendor.
