|
JavaScript - Wait Until A Function Has Completed - No Timers
This is my first post and hope someone can show me how to have JavaScript wait until a function has completed before moving on? I tried a timer, but the database does not always came back with data durning the time alloted. Thank you for any help.
Code: function RunMerch()
//Reprompt script
{
var fW = (typeof getFormWarpRequest == 'function' ? getFormWarpRequest() : document.forms['formWarpRequest']);
if ( !fW || fW == undefined) {
fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
//fW._oLstChoicesMyFieldName.selectedIndex = 0;
var preFix = '';
if (fW.elements['cv.id'])
{
preFix = fW.elements['cv.id'].value;
}
setTimeout('oCV' + preFix + '.promptAction(\'reprompt\')', 1000);
{
//Call val () function -- This is where I want it to complete the reprompt
function before moving on
val();
}
}
// This will run the valtradselection() function
function val()
{
valtradselection();
}
Similar TutorialsHi, I'm having some issues turning this "Please Wait"/Disabled button into a function. Code: <input type="submit" value="Submit Form" onClick="this.disabled = 'true'; this.value='Please wait...';" /> Code: function pleasewait()
{
this.disabled = 'true';
this.value='Please wait..'
}
<input type="submit" value="Submit Form" onClick="pleasewait();" />
Thanks much Hello to all. I apologise if this question has been asked before, I am banging my head off a wall and am in need of some help. I am trying to find a script (and failed, even on google) to create a countdown timer on a website. The details are : a countdown timer that (a) runs off server time, not client time and (b) resets every 10 minutes. The only example i could give to clear up any questions would be something extremely similar to facebook app games : eg mafia wars etc energy refill timers so people visiting my web page would see a countdown timer that was counting down 10 minutes and then resetting itself, on the hour, 10 past, 20 past etc etc. And also, can the counter trigger a script, orwouldit be best to use a scheduled task for this? I do not want the timer to take the user from the web page. I am not sure of the exact name of a such counter, so maybe thats why google is not giving me the answers i need. Any help would greatly be appreciated. Also I know i maybe need php to run frrom a server time. I can code php half-competently, but javascript is out of my knowledge range at present (although i can usually see code and know how to adapt it to my needs etc) Thankyou to all who can help Hi guys, hope this is the right place to post my javascript query.... Basically, I want my countup timer to start from when the page is loaded so eg 0 in all fields... This is what i have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count?</title>
<style type="text/css">
.main {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 68px;
font-style: normal;
font-weight: 400;
color: #000;
background-color: #FFF;
text-align: center;
}
</style>
<script type="text/javascript">
function showElapsedTime()
{
var startYear = "0";
var startMonth = "0"; // must be between 0 - 11
var startDay = "0"; // must be between 1 - 31
var startHour = "0"; // must be between 0 - 23
var startMinute = "0"; // must be between 0 - 59
var startSecond = "0"; // must be between 0 - 59
var startDate = new Date();
startDate.setYear(startYear);
startDate.setMonth(startMonth);
startDate.setDate(startDay);
startDate.setHours(startHour);
startDate.setMinutes(startMinute);
startDate.setSeconds(startSecond);
var rightNow = new Date();
var elapsedTime = rightNow.getTime() - startDate.getTime();
var one_day=1000*60*60*24;
var elapsedDays = Math.floor( elapsedTime / one_day );
var milliSecondsRemaining = elapsedTime % one_day;
var one_hour = 1000*60*60;
var elapsedHours = Math.floor(milliSecondsRemaining / one_hour );
milliSecondsRemaining = milliSecondsRemaining % one_hour;
var one_minute = 1000*60;
var elapsedMinutes = Math.floor(milliSecondsRemaining / one_minute );
milliSecondsRemaining = milliSecondsRemaining % one_minute;
var one_second = 1000;
var elapsedSeconds = Math.round(milliSecondsRemaining / one_second);
document.getElementById('elapsedTime').innerHTML = elapsedDays + " Days " + elapsedHours + " Hours " + elapsedMinutes + " Minutes " + elapsedSeconds + " Seconds";
t = setTimeout('showElapsedTime()',1000);
}
</script>
</head>
<body onload="showElapsedTime()">
<p class="main"> COUNT: </p>
<div id="elapsedTime"></div>
</body>
</html>
Can't quite figure out where i have gone wrong! Thanks in advance! Carl Hello all, It's my first post. I have 0 javascript knowledge and desperately need your help. I need 5 countdown timers on my html site. I would like them to countdown from different minutes (i.e. 2:30, 5:15, 1:20, etc). Here is the script I found online: Quote: <!--countdown timer --> <div style="position:absolute; overflow:hidden; left:107px; top:390px; width:40px; height:20px; z-index:18"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> I pasted them in the div tags and it works perfectly. However, when I copy and paste them 4 times for a total of 5 timers to display, only 1 shows. Why is this happening and how can I fix it? Here is how I it looks on my index file after I pasted it 4 times: Quote: <div id="count1" style="position:absolute; overflow:hidden; left:107px; top:390px; width:45px; height:20px; z-index:29"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> <div id="count2" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:30"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> <div id="count3" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:31"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> <div id="count4" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:32"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> Please help!! Sincerely, George Anyone have a script that has multi timers that will loop; Sort of like the ones used in reverse auctions. First timer 1:24:59:59 (days/h/m/s) Second timer 1:00:00 (h/m/s) Third timer 1:59 (m/s) Forth timer 59 (s) I have one now that I found here and makes no sense to me; PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <font size="-4"><font face="bold"> <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ function zxctElsByClass(zxccls,zxcp,zxctag) { var zxcexa=zxccls.indexOf('=='); zxccls=zxccls.replace(' ==','').replace(/ss/g,' '); var zxcclss=zxccls.split(' '); zxcp=zxcp||document; zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp); zxctag=zxctag||'*'; var zxcels=zxcp.getElementsByTagName(zxctag),zxcary=[]; for (var zxc0=0;zxc0<zxcels.length;zxc0++){ for (var zxc0a=0;zxc0a<zxcclss.length;zxc0a++){ var zxcreg=new RegExp('\\b'+(zxcexa<0?zxcclss[zxc0a]:zxccls)+'\\b'); if ((zxcclss[zxc0a])&&zxcreg.test(zxcels[zxc0].className)){ zxcary.push(zxcels[zxc0]); break; } } } return zxcary; } function Upgrading(hrs,mins,secs){ hrs=zxctElsByClass(hrs); mins=zxctElsByClass(mins); secs=zxctElsByClass(secs); for (var zxc0=0;zxc0<hrs.length;zxc0++){ hrs[zxc0].oop=new UpgradingOOP(hrs[zxc0],mins[zxc0],secs[zxc0]) } } function UpgradingOOP(hrs,mins,secs){ this.time=[hrs,mins,secs]; this.cng(); } UpgradingOOP.prototype.cng=function(){ var hours=this.time[0].firstChild.data; var mins=this.time[1].firstChild.data; var secs=this.time[2].firstChild.data; secs=secs-1; if (secs<0){ mins=mins-1; secs=59; } if (mins<0){ hours=hours-1; mins=59; secs=59; } if (hours<0) { hours=0; mins=0; secs=0; this.time[0].firstChild.data=hours; this.time[1].firstChild.data=mins; this.time[2].firstChild.data=secs; window.location = document.URL; } if (mins>=0) { mins=mins-1; mins=mins+1; if (secs<10) secs="0"+secs; if (mins<10) mins="0"+mins; this.time[0].firstChild.data=hours; this.time[1].firstChild.data=mins; this.time[2].firstChild.data=secs; this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),1000); } } /*]]>*/ </script></head> <table align=\"left\" width=\"50\" height=\"50\" border=\"0\" bgcolor=\"ltblue\"> <tr> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours'>1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> </tr> </table> <br /> <table align=\"left\" width=\"50\" height=\"50\" border=\"0\" bgcolor=\"ltblue\"> <tr> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours'>1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> </tr> </table> <script type="text/javascript">Upgrading('uHours','uMins','uSecs');</script> </font></font> </body> </html> Hello, months when I want all the fields will be filled submit will be visible on all but I just do what has not n'arive test Note b: there is already invisible submit send # I hope the idea is clear Maintenon. here is my code jQuery: Code: $(document).ready(function() {
//------------------ validation champ email par blur -------------
$("#email,#objet,#message").blur(function() {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if ($("#email").val() !== "E-mail" && $("#email").val() !== "" && $("#email").val().match(filter)
&& $("#objet").val() !== "" && $("#objet").val() !== "Objet"
&& $("#message").val()!== "" && $("#message").val()!== "Votre message") {
$("#objet,#message,#email").css("border-color","#98D100");
$("#envoyer").fadeIn(2000);
alert('les champs valid');
return true;
}
else {
$("#objet,#message,#email").css("border-color","#FF0000");
$("#envoyer").fadeOut(2000);
alert('les champs not valid');
return false;
}
});
//--------------- animation de champ message -----------------
$("#message").focus(function(){
$("#message").animate({
height: "50px"
}, 1000 );
});
});
here is the html code: Code: <input id="email" type="text" value="E-mail" onFocus="if (this.value=='E-mail') {this.value=''}"/> <div class="cl"></div> <input id="objet" type="text" value="Objet" onFocus="if (this.value=='Objet') {this.value=''}"/> <div class="cl"></div> <textarea id="message" type="text" value="Votre message" onFocus="if(this.value=='Votre message') {this.value=''}">Votre message</textarea> <div class="cl"></div> <input id="envoyer" type="submit" value="Envoyer"/>
Regards. Hey there guys, I'm working with an AJAX request that returns some stuff to print in 2 boxes. All working great, so I decided to make something fluffy, when I click a result in the AJAX request, he filters the clicked result, so you only see that clicked row. When clicked again, the old results will return. All working great. Now, my problem, I wanted a checkbox after every row in the search results and when the user clicks twice on a result to filter it and than goes back to the old results to check the checkboxes again that were checked before filtering that component. I made the functions and it didn't work till I put some alerts in, when the return function got some time to finish printing (like with the user had to click on OK in the alert) it worked. When I deleted the alerts, it didn't work again... I searched on the internet, found a function to wait for an image to load or smth similar and I found some guys that used a function to wait for a specific time (1 sec for example) and that's not what I want. If I use a specific waittime it can still fail if the PC is slow, or whatever, it's just not nice coding. So, is there something I can do so it waits till my AJAX request has been printed? Thanks! 'x. Hey, 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? Hope that made sense. Thanks! Hey all, So this has been stumping me for the past couple days and I am hoping someone can give me a clue on how this can be done. I have this function that is called when a next button is clicked: Code: function navigateToPage(pageurl){
audfile = null;
pauseaudio();
jQuery("#coursecontent").attr("src", pageurl);
jQuery("#coursecontent").load(function() {
audfile = window.coursecontent.__backgroundaudio;
});
//WAIT HERE UNTIL audfile IS NOT NULL
playnextsound();
}
My problem is that I have content loading in an iframe (coursecontent). I can't call playnextsound() until that content is loaded. I know that I could just put the playnextsound() in the load function but that won't work as I am trying to find a workaround for audio autoplay on the ipad. That is why I am setting the audfile in the load function. I need to wait until audfile is no longer null before calling playnextsound(). The problem is that I can't call playnextsound() from inside any timer or anything because it will cause autoplay audio to not work. I thought maybe a while loop would do the trick but that seems to just create an infinite loop. I would be forever grateful if someone could give me any pointers. ok. so i have all these big images and i need to let the whole page load before the viewer sees it what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that. Help! I try to get data from database and display them onto a div, after all messages are shown on the div, then only it will know the scrollheight of the div, it will auto scroll to the bottom of div as default by function asd(). My problem is when there are too many messages on database, it took very long time to display them all onto the div, so asd() executed before all messages are displayed. Meaning the scrollheight of the div is incorrect at this point, thus auto scroll to bottom is fail. Code: $(function() { showMsg(); asd(); });
How to wait until showMsg() finish render the contents before execute asd()? I havejQuery.get(); .append(); .replace(); .innerHTML inside showMsg(). The problem is fixed when I use timeout to execute asd() after 3 seconds : Code: $(function() { showMsg(); setTimeout(asd();, 3000); });
That's why I sure asd() is executed when showMsg() is not yet finish loaded the contents. I guess I know where is the problem. If showMsg() is executed BEFORE the DOM is ready, and if asd() is executed AFTER DOM is ready (at this point all messages are rendered already), so the problem is fix. But now my situation is AFTER the DOM is ready, all messages still not yet finish rendered, because showMsg() and asd() are executed only AFTER the DOM is ready. "executed" doesn't mean "finish rendered". My question is how to make sure showMsg() finish rendered the contents into a div before execute asd() ? I have an embedded font in my CSS however somtimes the texts loads before the font loads (i.e. the text is loaded in a normal font the it changes after). Is there anyway i can say dont load page until the font file is loaded, or maybe dont show the div until the font is loaded?
Watching firebug on facebook, I noticed I'm able to receive chat messages and notifications without constantly polling the server. How is this achieved? Google gives me mixed (seemingly irrelevant) results. I read 3 different methods related to "reverse AJAX" but it doesn't seem to be exactly what I'm looking for - i.e., no constant polling and no "piggy-backing" (waiting for user to do something then send extra data).
Hi, I have php script that uploads a file. once i click upload it should display a animated GIF image or "Loading please wait" message with the backround transparent screen covering the whole page so that the user is not able to click anything during file upload. How can i do this? Could someone help me on this. Thanks in advance. Hi, I have a site that runs a javascript slideshow automatically when a user visits it. It is designed in such a way that I cannot pre-load individual images for aesthetic reasons. (Also the whole concept makes my brain hurt.) I therefore need 1 of 2 things: 1. A preloader that doesn't show the page or start the slideshow until all the images are loaded. or 2. I could start with the slideshow paused, and when the page is fully loaded, the play command (currently attached to a 'play' button) is 'sent'. (I'm not techy, so this is the best I can do as explanation.) The latter would probably be more elegant, especially if ultimately I could hide the controls for the slideshow with a loading bar until all the html is loaded, and then show them when the slideshow starts. I'm sorry if this is a really basic question. I tried searching the site but couldn't find anything. If you do feel like answering, can you imagine that you are speaking to a 5 year old. Then dumb it down a bit. I need all the explanation and clarity I can get! Thanks! I have been using a javascript code to display a "Please wait..." message on screen but it seems to work in some instances and not in others. Please assist me with javascript code that works in all instances Issue 1:- it doesnt pops up with d wait msg ven v click on buttons.. the buttons are not submit buttons.. instead on clicking dat button it calls a fnformsubmit() userdfnd funtion.. Issue 2:-- even after d response cums the wait msg window doesnt close.. it hangs in d backgrnd.. The foll code is used in the footer.jsp file... Please assist... <html> <head> <script type="text/javascript" src="/js/os/jquery-1.5.1.min.js" ></script> <script type="text/javascript" src="/js/os/jquery-ui-1.8.14.custom.min.js"></script> <link rel="stylesheet" type="text/css" media="all" href="/js/os/jquery-ui-1.8.14.custom.css"> <script type="text/javascript"> for (var i = 0; i < document.links.length; i++) { var attrib = document.links[i]; if (attrib.addEventListener) { attrib.addEventListener('click', attachModalDialog, false); } else if (attrib.attachEvent) { attrib.attachEvent('onclick', attachModalDialog); } } function attachModalDialog(evt) { //alert('for Click event.'); $(ModalDialog).dialog({ modal: 'true', title: 'Please Wait...', width: 400, height: 300, closeOnEscape: false }).dialog('open'); return true; } </script> </head> <body> <div id="ModalDialog" style="display:none;"> <pre> Server side process is in-progress. Please wait..... </pre> </div> </body> </html> Hii...i have created a Gallery for my website..now i want to add a Please Wait gif image between every picture until it loads completely..So Please Help..where to and what to add..? HTML Part : Code: <div id="gellary"> <center> <form name=slideform> <table cellspacing=1 cellpadding=4 bgcolor="#4b7b9f"> <tr> <td align=center bgcolor="white"> <font style="color:#24618e"><b>Our Gallery</b></font> </td> </tr> <tr> <td align=center bgcolor="white" width=960 height=540> <img src="gallery/gall1.jpg" name="show" height="540" width="960"> </td> </tr> <tr> <td align=center bgcolor="#88d6f0"> <select name="slide" onChange="change();"> <option value="gallery/gall1.jpg" selected >Image 1 <option value="gallery/gall2.jpg" >Image 2 <option value="gallery/gall3.png">Image 3 <option value="gallery/gall4.png">Image 4 <option value="gallery/gall5.png">Image 5 <option value="gallery/gall6.jpg">Image 6 <option value="gallery/gall7.jpg">Image 7 <option value="gallery/gall8.jpg">Image 8 </select> </td> </tr> <tr> <td align=center bgcolor="#1797c4"> <input type=button onClick="first();" value="<< First" title="Beginning"> <input type=button onClick="previous();" value="<<" title="Previous"> <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay"> <input type=button onClick="next();" value=">>" title="Next"> <input type=button onClick="last();" value="Last >>" title="End"> </td> </tr> </table> </form> </center> </div> =============================== JavaScript Part: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
Hello, I have been looking for a code which loads my content and images as well as my javascript and style before my visitor enters my site. I have been on a website before (I cannot remember the link) and it has: Quote: Please wait til we take our own sweet time to load this page with the content behind it, but slightly 'dimmed'. I think that this would be great for my site. If anyone would help me with this I will greatly appreciate it! Thanks. Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, |
|||||||