|
JavaScript - How To Make Sure A Function Completes Before Continuing Execution.
Hi,
I have a function that I'm trying to modify. It adds an element to the page. The problem is, I require that ClickGeocode() finishes executing before the rest of the code in the function completes. Currently that is not the case... Any ideas? Code: Event.add(window, 'load', function()
{
Event.add('addressSearch', 'click', function()
{
ClickGeocode();
var el = document.createElement('p');
el.innerHTML = " " + addressSearchAddress + " : [" + addressSearchRadius + "]";
Dom.add(el, 'AddressesVisited');
Event.add(el, 'click', function(e)
{
Dom.remove(this);
});
});
});
Similar TutorialsSo I have a spreadsheet he GoogleDocs The code I have is : Code: function addition() {
// Declare Variables
var inputCell, outputCell, tempValueHolder;
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
// Declare the range of the input numbers: Column C
var inputRange = sheet.getRange("C4:C41");
// Declare the Range of where you want the output numbers: Column D
var outputRange = inputRange.offset(0, 1);
// Calculate the column and row count. columns = 1, rows = 37
var colNum = inputRange.getNumColumns()-1;
var rowNum = inputRange.getNumRows()-1;
// Run the for loop
// There is only one column of data, C
for (var i=0; i<=colNum; i++);
{
// There are 37 rows of data, 4 through 41
for (var j=0; j<=rowNum; j++);
{
// Declare column and row info for cells
inputCell = inputRange.getCell(j,i); //from Column C
outputCell = outputRange.getCell(j,i); // to Column D
// Copy whatever is in Column D
tempValueHolder = outputCell.getValue();
// Set Column D's cell to be whatever is in Column C PLUS what WAS in Column D
// It's just adding Column C's value to Column D's
outputCell.setValue(inputCell.getValue()+tempValueHolder);
// Clear Column C
inputCell.clearContent();
// next row (supposedly)
}
}
}
What I'm trying to do is take Values entered in the C column and add them to the existing number in column D of the same row. I do this from the starting cell: C4 down the rows to C41. Again, taking the value in C4 and adding it to D4... or C4+D4=newD4, all the way down to row 41. So here's the problem. Whenever I run the function it only completes the last line in the loop, as in the last row (41). If I change the range from C4:C41 to C4:C#, it always only completes the loop with the # row. I can't figure out why. I have spent 6 hours JUST on this problem. Please someone with more knowledge help me. Thank you. I found this script, and it works great: Code: <script type="text/javascript">
function disable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","true");
}
}
</script>
I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript">
function enable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","false");
}
}
</script>
But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form>
<input type="radio" name="test" onclick="disable('D1')" /> disable<br/>
<input type="radio" name="test" onclick="enable('D1')" /> enable<br/>
<fieldset id="D1">
<input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/>
<input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/>
<input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/>
</fieldset>
</form>
Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form>
<input type="radio" name="test" onclick="disable('D1')" />
<fieldset id="D1">
<input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" />
</fieldset>
<input type="radio" name="test" onclick="disable('D2')" />
<fieldset id="D2">
<input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" />
</fieldset>
<input type="radio" name="test" onclick="disable('D3')" />
<fieldset id="D3">
<input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" />
</fieldset>
</form>
And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) {
x.style.backgroundColor="transparent"
}
Function ActivationFuction()
{
activate.function="unhighlight"
}
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. Is it possible to make a variable available to other functions outside a function So to make it global from within a function without using a callback Code: function() {
var something = 'hello';
}
function(something) {
document.write(something);
}
something like that possible?? i need to make a function that will send a string to my perl script then recieve the answer and set a div innerhtml to the answer.. i plan on sending the string from the div onload as i will have about 30 divs that need changing. Code:
<body>
<div name="example1" onload="javascript:retrieve('getstring1')">my retieved string1</div>
<div name="example2" onload="javascript:retrieve('getstring2')">my retieved string2</div>
</body>
<head>
<SCRIPT language="JavaScript">
function retieve('var') {
}
</SCRIPT>
</head>
im not quite sure where to go with this but i can easily make the perl script do if statements on the string and return the correct string to put into the div. the reason for this is that the string will be changed every couple weeks. there is probably a better way to do this but this would be more appropriate for me Hi, I have a webpage with a world clock. On the clock page are 12 buttons (World Cities). When the user clicks these buttons. The time for the relevant world city is displayed. (The time is updated by an on.click function for each individual button. That either subtracts or adds the hours from GMT. For example. If the time is GMT 18:00:00. The user clicks the Paris button and the function adds 1 hour to result in 19:00:00) However. If the GMT time is for example 21:00:00 and the user clicks the Tokyo button (GMT+9 hours). The time displayed is 30:00:00. So I have been trying to work out how I can stop the time adding past 23:59:59. This is probably so simple which is probably why I cant find any help online. It has stumped me and any help would be appreciated. I have copied and pasted my code below in the hope that helps. Thanks in advance if you can offer any advice. Code: <script>
function start() {
GMToffset = 0;
t=setInterval('digitalclock()',500);
}
function digitalclock()
{
var today=new Date();
var hours=today.getHours() + GMToffset;
var minutes=today.getMinutes();
var seconds=today.getSeconds();
minutes=checkTime(minutes);
seconds=checkTime(seconds);
hours=checkTime(hours);
document.getElementById('txt').innerHTML=hours+":"+minutes+":"+seconds;
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
function updatetime1() {
GMToffset = -3;
}
function updatetime2() {
GMToffset = -4;
}
function updatetime3() {
GMToffset = -7;
}
function updatetime4() {
GMToffset = -10;
}
function updatetime5() {
GMToffset = -11;
}
function updatetime6() {
GMToffset = -13;
}
function updatetime7() {
GMToffset = +9;
}
function updatetime8() {
GMToffset = +8;
}
function updatetime9() {
GMToffset = +7;
}
function updatetime10() {
GMToffset = +1;
}
function updatetime11() {
GMToffset = +0;
}
function updatetime12() {
GMToffset = +3;
}
</script>
<div align="center">
<input type="button" onclick="updatetime1()" value="Time in Buenos Aires" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime2()" value="Time in New York" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime3()" value="Time in San Francisco" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime4()" value="Time in Hawaii" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime5()" value="Time in Fiji" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime6()" value="Time in Sydney" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br><br>
<body onload="start()">
<div id="txt"></div>
</div>
<div align="center">
<input type="button" onclick="updatetime7()" value="Time in Tokyo" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime8()" value="Time in Hong Kong" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime9()" value="Time in Bangkok" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime10()" value="Time in Rome" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime11()" value="Time in London" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime12()" value="Time in Moscow" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice) var phrase = prompt("Enter a messate: ", 'Message'); var searchFor = prompt("Enter search text: ", 's'); var matchPhrase = ""; var searchIndex = -1; /* if there's a match, create a text string by * add the phrase text from before the match, * add <font> tags around the match text, * add the rest of the phrase from after the match */ searchIndex = phrase.indexOf(searchFor); if (searchIndex >=0 ) { // Copy text from phrase up till the match. matchPhrase += phrase.slice(0, searchIndex); matchPhrase += '<font color="red">' + searchFor + '</font>'; matchPhrase += phrase.slice(searchIndex + searchFor.length); phrase++ } else { matchPhrase = "No matches" } document.writeln(matchPhrase); Reply With Quote 01-31-2015, 09:08 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Use a regular expression. I've got this listbox full of hundreds of employee names. Clicking on a name executes a function using onchange. Because of the length of the list I decided a search function would be really handy and I finally found one that works. Now the search function, when you type in the input box, scrolls the list to the first matching entry. And that's good, that's what I wanted. The problem comes in when you try to click on the name the search function found. Nothing happens ofcourse because the onchange tag in the list reacts to changes, not direct clicks. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px; margin-bottom: 15px;"> <option selected="selected">Loading</option> </select> The list is populated by java but for testing I disabled the function that clears the "Loading" option and I set it to selected. That way the loading option is highlighted by default and the search function is free to highlight something else, then when I click on the search result it works like it's supposed to. But keeping a highlighted option at the top of the list for that sole purpose isn't very elegant, especially since if you click on it the onchange function tries to execute and generates errors. The only solution I can think of is to use java to generate another option way at the bottom of the list that has the selected attribute but I don't quite know how to do that. Does anyone have any thoughts on what I can do? it is my understanding that all lines of code are executed in a "top down" order. (exception: temporary exit/return on functions), even then, when return from function, top down continues on its way. simple enough. so why is this set of instructions jumping forward several lines of code and jumping back to continue execution? Code: 202. var statusIndex=0;
203. $('#cpqcSelect').click( function() {
204. alert('line 204: statusIndex ='+statusIndex);
205. $(this).css({'background-color':'#f00','border':'3px solid #000','color':'#000'});
206. alert('line 206');
207. $.get('getRangeStatus-server-script.php', {data:0}, processResponse );
208. alert('line 208');
209. function processResponse(data,status){
210. if (status == 'success') { statusIndex = data }
211. else { statusIndex = 'error' }
212. alert('line 212; value of statusIndex = '+statusIndex);
213. }; // end function processResponse(data,status)
214. alert('line214');
215. return false; // stop the link from reloading the page or traveling elsewhere
216. }); //end $('#cpqcSelect').click( function()
i'm using the alert() boxes to track how this code is being executed. oddly enough it does not go top down as i think it should. maybe something is forcing it to jump around? i don't know? line 204 fires. ok. line 206 fires. ok. line 208 fires. ok. but then execution jumps into line 214, before it goes into the function on line 209. thats odd? execution goes thru the function and spits out line 212 correctly. then it jumps to line 215. why the jump to line 214 before it goes into the function? i need execution to complete the function at 212 first and then go on. but it doesn't want to do that. possible error causing odd jumping around? would appreciate your eyes, please. thanks, Paul How to know the execution time of a function? For example, which of these functions run in less time? That is, which of these functions are more weightless to run? Code: document.getElementById("my_image").src = "images/picture.png";
//or
document.getElementById("my_image").style.webkitTransform = "rotate(45deg)";
Thanks in advance! I have code that I have written to clean up the value of a text box before submitting it to a database, the problem I have is that if the value is blank, I want to throw up an alert and halt the JS from continuing, normally I would put in a return false statement and be done, but since the function is already returning a value I was wondering if there was another way to stop code execution. So if cleanString is not blank after it processes code should continue, if it is blank it should stop everything after the alert message. I know I can code for it on the calling side but I was hoping to include it all in one function. If I return false after the alert the output box actually says false and code continues to process. Code: <script>
function cleanString(myString){
//Removes All Special Characters and Double Spaces and trims the text
temp = myString.replace(/[^a-zA-Z 0-9]+/g,'')
temp = temp.replace(/^\s+|\s+$/g, '');
temp = temp.replace(/\s+/g, ' ');
if(temp == ""){
alert('Input string cannot be blank, or contain special characters.');
//Halt Code execution here
} else {
return temp;
}
}
function testan(i){
document.getElementById('output').value = cleanString(i);
alert("still going");
}
</script>
Input: <input type="text" id="input" style="width: 500px;" value=" Test (Parens) [brackets] 1234 2 4 ,Comma "Quote "/><br />
Output: <input type="text" id="output" style="width: 500px;" /><br />
<input type="button" value="Go" onclick="testan(document.getElementById('input').value);" />
Hi, I have a javascript function that is formatting data before it is being passed along to an Ajax call. The same function is formatting data for two variables but it seems as though the first call to the is being preempted by the same function call for the second variable's data formatting. On top of that the function does not seem to finish execution by the time it reaches the Ajax call so none of the data seems to be passed along. Here's a condensed version at what I'm dealing with: Code: var data_group1 = FormatData('type_1');
var data_group2 = FormatData('type_2');
Ajax(data_group1, data_group2);
How can I ensure that the first call to FormatData is finished before the next call to it begins. Additional how can I prevent the Ajax function from executing until the first two lines have executed. Thanks a ton. Say that I've got the following XML Code: <document> <block key="block1"> <p>This is a <bold>paragraph</bold></p> </block> <block key="block2"> <p>Additional paragraph</p> </block> </document> Obviously the schematics of this data and the constraints placed upon them can be described using XSD. For example, the following rules would apply: * must be a document element as the top-level parent element * must be at least one block element as a child of document * each block must have a unique key value * blocks can have 1...n p child elements. * p elements can have 0...n bold child elements What I'm looking for is an engine that executes on the client-side (JavaScript / jQuery) that can parse the XSD and flag any errors. In addition I would also need to be able to interrogate the engine in order to determine what are valid child nodes at a particular level of the XML. For example, the following types of queries might be asked of the engine: * Q: Is the overall XML valid? A: yes / no + report * Q: I'm looking at the element block (key="block2"). What are the valid child elements of this element? A: p (1...n). * Q: I'm looking at the element p in the first block (key="block1"). What are the valid child elements of this element? A: #text, bold (0...n). Determining the valid child elements of a particular element is something akin to how Visual Studio e.g. 2010 uses Intellisense. For example, given a schema Visual Studio let's you know what the valid elements are at a particular position as you type enter the XML. Finally I've mentioned XSD / XML above but we do not necessarily have to be constrained to these technologies so alternative ideas will be appreciated equally as well. Thank you for taking the time to examine my post. I am developing a web page which contains a java script file. Java script file is created using excel tool. My problem is that the execution time of a java script function is very high,mainly in chrome browser. what will be solution to overcome this?
I have discovered a XSS vuln in a website and I'd like to use this as a cookie grabber. If you can help, <removed>.
Without elaboration plz see my code: Code: <body>
<script>
var b="s";
</script>
<button target="_blank" onclick="window.open('http://......php?b="javascript:document.write(b);"&id=2&q=<?php print $_GET['q']; ?>','1','');return false;">xyz</button>
</body>
i don understand why this javascript:document.write(b); doesnt work in url... i know its simple yet it make my hair out of my head. plz count it.. 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, I was working on a tutorial for some ajax uploading stuff and I ran across a new function syntax I don't recognize. I am not a Javascript pro, but I am not a newbie either. here is the code I am working on: Code: function handleFileSelect(e){
var files = e.target.files;
var output = [];
for(var i=0,f;f=files[i];i++){
if(f.type.match('image.*')){
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="',e.target.result,'" title="',theFile.nbame,'" />'].join('');
document.getElementById('list').insertBefore(span,null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('list').innerHTML = '<ul>'+output.join('')+'</ul>';
}
document.getElementById('files').addEventListener('change',handleFileSelect,false);
To be a little more clear, the code in question is that is the very middle. The syntax I don't understand is: Code: class.event = (function(arguments){
//stuff you put in a function...
})(more Arguments?);
I tried to customize a simple one to learn for myself and I wrote this: Code: var a = 'A';
var b = 'B';
test = (function(t){
alert(t);
alert(b);
})(b);
test(a);
The browser would alert 'B' and that's it. The console would tell me that 'test is not a function.' OK, so I am confused. The topmost code works. What I am wondering is what the syntax is called for creating a function (or event listener?) that way, and how it works. Although if I new what it was called I could just google how it works. |
|||||||