JavaScript - Unrecognized Function Syntax: Class.event = (function(arg){[stuff]})(arg?);
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. Similar TutorialsHi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() { $( this ).toggleClass( "closed" ); }); $( "li.closed" ).click(function() { $( this ).toggleClass( "open" ); }); The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave uncaught exception: Syntax error, unrecognized expression:
Code: :([rel*=qnt_Rc]) I have this code: Code: grpDiv = $$('div:([rel*=' + txt_val + '])'); Which when operaterated on, we have: Code: grpDiv = $$('div:([rel*=qnt_Rc]) This error: uncaught exception: Syntax error, unrecognized expression: Code: :([rel*=qnt_Rc]) Is new. The code in question has been around for about a year and no issues with prototype 1.6.1. Yet we upgraded to 1.7, and this error started showing. any ideas what this could be and how to fix it? thanks Hello im trying to make a drop down for my store, so that onchange the price of the option is displayed and my paypal buttons variables are changed. I cant get the "total" function to call when the selection of the drop down is changed. please help iv'e been looking around for a week and still havent fixed it. My event handler sets on load <body onload="x.onchange=function(){total();}"> heres my script Code: <script type="text-JavaScript"> "use strict"; /*document.getelementbyid("ddm").onchange = total;*/ var price; var title; var x = document.getelementbyid("ddm"); var size_prices= new Array(); size_prices["cards"]=18; size_prices["5x7sm"]=20; size_prices["5x7dm"]=25; size_prices["8x10sm"]=30; size_prices["8x10dm"]=35; size_prices["16x20sm"]=45; size_prices["16x20dm"]=50; function total() { y = size_prices[x.value]; document.getelementbyid("total").innerhtml = "$" + y + ".00"; title = "image title" + (x.value); document.getelementbyid("title").setAttribute("value", title); document.getelementbyid("price").setAttribute("value", y); } function verify() { } </script> here is the code for the select and the paypal button Code: <form action=""> <select name="sizes" id="ddm"> <option value="_">Please chose a size</option> <option value="cards">cards</option> <option value="5x7sm">5x7 single mat</option> <option value="5x7dm">5x7 double mat</option> </select> </form> Code: <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="verify()"> <input type="hidden" name="business" value="kin@kinskards.tcom" /> <input type="hidden" name="cmd" value="_cart" /> <input type="hidden" name="add" value="1" /> <input type="hidden" id="title" name="item_name" value="Candle" /> <input type="hidden" id="price" name="amount" value="3.95" /> <input type="hidden" name="currency_code" value="USD" /> <input type="image" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="paypal" /> <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" /> </form> The following coding works in Konqueror 3.5.10 on Ubuntu 8.04.3 LTS but not on Firefox 3.0.10 Linux/3.5.7 XP, Opera 10.10 Linux or IE8 XP. I can't see why but it may be to do with the recursion (showtable calls onclick calls addit which calls showtable ...). Somehow it is not seeing the addit routine the second time round. It is meant just to add a line. Eventually it needs to be a complex table but this is for illustration. There are other ways to solve this but this would be the simplest - if it worked! What happens is that one line is added OK but then it chokes. This is what makes me think it is the recursion but I can't see otherwise how to make it write the updated text. I realise I should have a document.close() in it as well and I have tried adding <![CDATA[ ... ]]> as well. Other than in Konqueror, it gives an error message saying object not found (in IE8) or more explicitly: Code: function onclick(event){ addit(4); } with 'addit is not defined' in Firebug. In Konqueror it works sweetly. 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> <script language='Javascript' type='text/javascript'> if(typeof(sections) == 'undefined'){ var sections=['Text 0','Text 1','Text 2']; } function addit(ilocal){ sections.splice(sections.length,0,'Text '+ilocal); showtable(); } function showtable(){ var i,j,ip1; for(i=0;i<sections.length;i++){ ip1=i+1; document.write('Section ',i,': ',sections[i],'<br>'); } document.write("<input type='button' value='Add' onClick='addit(",ip1,")' /><br>"); for(j=0;j<sections.length;j++){document.write(sections[j]," ");} } </script> </head><body> <script language='Javascript' type='text/javascript'> showtable(); </script> </body> </html> Clues would be very much appreciated - my baldness coefficient is increasing daily! I'm writing an XML generating app here, and i have come across an interesting problem. When i click on any part of the body of the document, the function addRow() is being triggered. This is odd, because the only event handler that should ever fire this is a Button that much be clicked, and it is also triggered once when the document is Loaded. The biggest question is, ...why when i click anywhere on the document, is this even being triggered. here's my code (sorry it's a bit long..but copy and paste and you should be able to replicate what i'm getting) Some notes: 1. removing the script tabber.js does not change this error. It still happens 2. removing the onLoad= in the body, and manually adding in the first table cell, and row of the table seems to fix this, however, i need to eventually load a list of table cells from a CSV file. So that workaround won't be sufficient Code: <html> <title>Site Management</title> <script type="text/javascript" src="tabber.js"></script> <link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen"> <script type="text/javascript"> //document.write('<style type="text/css">.tabber{display:none;}<\/style>'); </script> <script type="text/javascript"> var HumidorInnerHTML = [8]; var IntroInnerHTML = [6]; var ImageInnerHTML = [6]; var OthersInnerHTML = [8]; var WatchInnerHTML = [10]; // Intro InnerHTML IntroInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>"; IntroInnerHTML[1] = "<input type='textbox' id='Intro_Caption" + IntroIndex + "'>"; IntroInnerHTML[2] = "<input type='textbox' value='85' id='Intro_Height" + IntroIndex +"'>"; IntroInnerHTML[3] = "<input type='textbox' value='56' id='Intro_Width" + IntroIndex + "'>"; IntroInnerHTML[4] = "<img src='delete.png' onClick=DeleteRow('" + IntroIndex + "','Intro_Table');>"; IntroInnerHTML[5] = "<img src='add.png' onClick=AddRow('" + IntroIndex + "','Intro_Table');>"; var MyTable; var IntroIndex = 0; var ImageIndex = 0; var WatchIndex = 0; var HumidorIndex = 0; var OthersIndex = 0; function AddRow(index, DIV) { MyTable = document.getElementById(DIV); var newCell; var newRow = MyTable.insertRow(index); for (var i = 0; i < IntroInnerHTML.length; i++) { newCell = newRow.insertCell(i); newCell.innerHTML = IntroInnerHTML[i]; } IntroIndex++; } function Init() { AddRow(1, "Intro_Table"); } function DeleteRow(index, DIV) { MyTable = document.getElementById(DIV); MyTable.deleteRow(index); } function WriteXML() { // Write All XML Files // Display Tab Variables var Display_Small_Image = document.getElementById("Display_Small_Src").value; var Display_Large_Image =document.getElementById("Display_Large_Src").value; var Display_Caption =document.getElementById("Display_Caption").value; var Display_Height = document.getElementById("Display_Width").value; var Display_Width = document.getElementById("Display_Height").value; //var XMLheader = "<?xml version="1.0" encoding="utf-8" standalone="yes"?><images><pic><image>"; var XMLdata = XMLdata + Display_Small_Image + "</image>" + "<caption><![CDATA[" + Display_Caption + "<width>" + Display_Width + "</width>" + "<height>" + Display_Height + "</height>" + "<detailimage>" + Display_Large_Image; var XMLfooter = "</detailimage></pic></images>"; // Write the XML File to the Disk } </script> </head> <body onClick="Init();"> <div class="tabber"> <div class="tabbertab"> <h2>Display</h2> <p> <div> <center><b><font size="5px">Display Options</font></b></center> <br> <table> <tr> <td> <table> <tr> <td>Small Image</td><td><input type="file" id="Display_Small_Src" onChange="SmallImageChanged('Display_Small_Src', 'Display_Image_Small');"></td> </tr> <tr> <td>Full Size Image</td><td><input type="file" id="Display_Large_Src" onChange="SmallImageChanged('Display_Large_Src', 'Display_Image_Large');"></td> </tr> <tr> <td>Caption</td><td><input type="textbox" id="Display_Caption"></td> </tr> <tr> <td>Width</td><td><input type="textbox" id="Display_Width"></td> </tr> <tr> <td>Height</td><td><input type="textbox" id="Display_Height"></td> </tr> </table> </td> <td> <table> <tr> <td> <img src="NoImage.gif" style="height:150px; width: 150px; border: 1px solid red;" id="Display_Image_Small"></td><td> <img src="NoImage.gif" style="height:150px; width: 150px; border: 1px solid red;" id="Display_Image_Large"></td> </tr> </table> </td> </tr> </table> </div> </p> </div> <div class="tabbertab"> <h2>Humidor</h2> <p> <div> <center><b><font size="5px">Humidor Options</font></b></center> <br> <table border="1" id="Humidor_Table"> <tr> <td>Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Picture 1</td><td>Picture 2</td><td>Remove</td> <td>Add</td> </tr> </table> </div> </p> </div> <div class="tabbertab"> <h2>Image</h2> <p> <div> <center><b><font size="5px">Image Options</font></b></center> <br> <table border="1" id="Image_Table"> <tr> <td>Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Remove</td> <td>Add</td> </tr> </table> </div> </p> </div> <div class="tabbertab"> <h2>Intro</h2> <p> <div> <center><b><font size="5px">Intro Options</font></b></center> <br> <table border="1" id="Intro_Table"> <tr> <td>Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Remove</td> <td>Add</td> </tr> </table> </div> </p> </div> <div class="tabbertab"> <h2>Others</h2> <p> <center><b><font size="5px">Others Options</font></b></center> <br> <div> <table border="1" id="Others_Table"> </tr> <td>Image</td> <td>Caption</td> <td>Height</td><td>Width</td><td>Image 1<td>Image 2</td><td>Remove</td><td>Add</td> </tr> </table> </div> </p> </div> <div class="tabbertab"> <h2>Watch</h2> <p> <center><b><font size="5px">Watch Options</font></b></center> <br> <div> <table border="1" id="Watch_Table"> <tr> <td>Preview Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Image1</td> <td>Image2</td> <td>Image3</td> <td>Image4</td> <td>Remove</td> <td>Add</td> </tr> </table> </div> </p> </div> </div> <br> <center> <input type="button" value="Save" onClick="WriteXML();"> </center> </body> </html> Hello! I'm working with nested functions and trying to pass a 'this' value to an anonymous being used in an assignment for an event listener. Here's the basics of my code: Code: <div id='abc'></div> <script type='text/javascript'> var abc = function () { this.myFunction = function() { var myObj myObj = document.createElement("input"); myObj.setAttribute("type", "button"); myObj.setAttribute("value", "Click Me"); myObj.addEventListener("click", function () { this.doDing(); }, false); document.getElementById('abc').appendChild(myObj); } this.doDing = function () { alert('ding'); } } var myInstance = new abc(); myInstance.myFunction(); </script> So, this should plop a button inside our DIV and when clicked I'd like it to run the alert-ding; unfortunately it seems to want to run the function as defined under the buttons object which doesn't work out too well. Any suggestions? Thanks! HTML CODE BELOW (JAVASCRIPT CODE FOLLOWS); Code: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Text Object value Property</title> <script type="text/javascript" src="../jsb-global.js"></script> <script type="text/javascript" src="jsb-11-02.js"></script> </head> <body> <h1>Text Object value Property</h1> <form id="UCform" action="make-uppercase.php"> <p> <input type="text" id="converter" name="converter" value="sample"> </p> </form> </body> </html> This program below switches what is entered into the text filed to caps when hitting the enter button or the tab button. Can someone explain to me why it is not working. The answer would be helpful to a newbie who's trying hard to learn the fundamentals... Code: // initialize when the page has loaded window.onload = initialize; var oInput; // (global) input field to make uppercase // apply behaviors when document has loaded function initialize() { // do this only if the browser can handle DOM methods if (document.getElementById) { // apply event handler to the button oInput = document.getElementById('converter'); if (oInput){ var event = oInput.onchange; upperMe(event); } // apply event handler to the form var oForm = document.getElementById('UCform'); if (oForm) { var event = oForm.onsubmit; upperMe(event); } } } // make the text UPPERCASE function upperMe(evt) { // consolidate event handling if (!evt) evt = window.event; // set input field value to the uppercase version of itself var sUpperCaseValue = oInput.value.toUpperCase(); oInput.value = sUpperCaseValue; // cancel default behavior (esp. form submission) // W3C DOM method (hide from IE) if (evt.preventDefault) evt.preventDefault(); // IE method return false; } why does my javascript function run right away when the page loads? but not wen the button is clicked? its working the opposite to how i want it to i didnt include the other html tags to help focus on this. Btw im tryna avoid the method of having the onclick="funct()" method which would be written in the button tag. Thank you. <body> <button id="mybutton">Click me</button> </body> <script type = "text/javascript"> var b = document.getElementById("mybutton"); b.onclick = funct() function funct() { alert("Thanks for clicking me!"); } </script> In jquery-1.4.2.js I find the following - - - hide: function( speed, callback ) { ... } - - - Where is this syntax defined? ... and is it semantically different than - - - function hide( speed, callback ) { ... } - - - Hello, Is it possible to set an html element's (created through HTML DOM's createElement() method) 'onclick' attribute's value to a Javascript function which requires a parameter, passing a variable to it at the same time? I have the following Javascript code: Code: var parentDiv = document.getElementById("subscribers"); var stubSpan = document.createElement("span"); stubSpan.id = "opentok_subscriber_" + stream.streamId; stubSpan.onclick = showStreamInFullScreenMode(stream); parentDiv.appendChild(stubSpan); 'stream' in the bolded line is a parameter variable of the function that the above code is in, and I'm trying to pass it to another function using an onclick event. Can this be done, or am I crazy to be even trying to do this? Thanks in advance. I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv I have some javascript code that hides and unhides a menu when a link is clicked, and that is working just fine. What I also need the function to do is switch the CSS class of change_this in the code below to change_that when the link is clicked, and then switch it back to change_this when the link is clicked again. Can someone assist me? I have tried integrating/modifying other scripts I found with this one, but nothing has worked for me. It seems so simple, but I just cant get this thing working. Thanks to anyone who replies with help! Code: <script type="text/javascript"> function HideandUNhideObj(ThisObj){ nav=document.getElementById(ThisObj).style if(nav.display=="none"){ nav.display='block'; }else{ nav.display='none'; } } </script> Code: <li class="change_this"><a id="nav" href="javascript: void();" onclick="HideandUNhideObj('display');"></a> <ul id="display" style="display: none;"> <div id="container_div">stuff</div> Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great. Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function... Code: var srcpagParams = $H(); function buildPagi(param, currdsplyNum){ var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'), crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page ttl_lnks = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages data_template = new Hash(); data_template.set('total_display',srcpagParams.get('numFound')); bldImg = function() { var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>'; var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>'; data_template.set('prvImg',(crnt_link > 1) ? prvB : ""); data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB : ""); } bldLk = function(){ var holder = ""; if(ttl_lnks > 1){ var linkStr = new Template(' <a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a> '); $R(1,ttl_lnks).each(function(n) { var posit = {pos : n} holder += (crnt_link == n) ? " " + n + " " : linkStr.evaluate(posit); }); data_template.set('links',linkholder); } } bldRng = function(){ var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum); data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg); $('pages').update(temDsply.evaluate(data_template)).show(); } firesrc = function(cl){ var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1; var start = crnt_link * srcpagParams.get('paginateNum'); Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request } bldImg(); buildLnk(); bldRng(); }; Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class. But could I turn this into a class and if so - what I just use: var buildPagi = create.Class({ initialize: object.extend({ }) }) Call the function when we are passed some data: Code: buildPagi(somevalue, somevalue2) ** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc.. so, is there a more eloquent, or robust way to write what I did above? I have a question: look at the following html code: /****html***/ <div class='class1'>text1</div> <div class='class1'>text2</div> <div class='class1'>text3</div> ...... /**html***/ If I want to change the background color of the textn by clicking it, what should I do instead of inserting "onclick='someFunction()'" in every div? Ok...so here is what I have: Code: function myClass() { this.checkLogin = function(name,pwd) { if(name.length > 0 && pwd.length > 0) { $.ajax({async: false, type: "post", url: "url", dataType: "json", data: "data", success: this.parseData}); } } this.parseData = function(data) { this.status = data.status; alert(this.status); } this.getStatus = function() { alert(this.status); } } Everything works above. The first alert shows that this.status was set to 'error'. However, if I call myClass.getStatus(), I get undefined. How can I get the parseData function to set the variables in the parent function? Thanks! First of all, I must say that I am recently introduced to JavaScript and I am not fully aware of its complete functionality. So I have an HTML document which has defined within a its body a JavaScript function and I have also a JApplet class which is also loaded in the HTML and can call the JavaScript function. But I have also another Java class which is not an applet and I would like to find a way for this class to be able to call the JavaScript function (but it is essential for this class not to be an applet). I am aware that this would raise some security concerns but it is for local usage and I am interested to hear some ways if possible for this to be done. Thank You beforehand to all of you! Hello all, and thank you for your coments, I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height. As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it? Code: <html><head><title>Title</title><script languaje="javascript"> const c_ra=16/9; window.onresize = function WindowReSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE // myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' // myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } myWidth = Math.floor(myHeight*c_ra); window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler ! }; </script></head><body><p>Hello World</p></body></html> 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, Hi All, I'm trying to convert an anonymous function to a real function (nesting is getting out of hand), however the msg object becomes undefined after conversion. Here is the converted anonymous function which fails: https://gist.github.com/2587613 and here is the original anonymous function which works: https://gist.github.com/2587667 Any help would be greatly appriciated |