JavaScript - Converting Javascript Function To Oop Function

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.

Hi!

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

<p>
<script type="text/javascript">// <![CDATA[
var metrics = {
"mm" : 1,
"cm" : 10,
"m" : 1000,
"inch" : 25.4,
"foot" : 304.8
};
function convert(num, dec){
var val = document.getElementById("fromVal").value;
if(isNaN(val)){
return
}


function roundNumber(num, dec) {
var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec);
return result;
}

document.getElementById("toVal").value = val *
metrics[document.getElementById("fromSystem").value]/
metrics[document.getElementById("toSystem").value];
}
var interval = null;
function watchChanges(){
interval == null ? setInterval("convert()", 500) :
clearInterval(interval);
}
// ]]></script>
</p>
<table>
<tbody>
<tr>
<td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td>
</tr>
<tr>
<td colspan="1" align="center">=</td>
</tr>
<tr>
<td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td>

i keep getting error Call to undefined function codeandurl()

below is my code
PHP Code:
<?php

$value= strip_tags(get_field('link',$post));
$resultid=get_field('resultid',$post);
codeandurl($resultid,$value); 
?>
<div id="result"></div> 

<script type="text/javascript">
function codeandurl(resultid,url){
$( "#result" ).text(resultid);        
      $( "#result" ).dialog({
    modal: true,
    buttons: {
    Ok: function() {
    $( this ).dialog( "close" );
    }
    }
});     
      window.open(url); 
      return false;
}
</script>

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

Hi,

Any one help me

In one variable i have some data ex: var data = document.getElementById("imageId").value;

I want to pass this data to another function inside another function ex:

var button1 = '<img src="images/Remove-button.gif" width="70" height="15" onclick="removeVerifyImageRow(this),saveLibData('+data+')"/>';

while running the application i am getting an error incase if the data is string ex:if data is 'image1' i am getting an error, but with number there is no problem ex: if data is '1122'.

this is very urgent to solve this problem plz any one help me

Thank you in advance if someone can help. I have been banging my head against the wall for hours now.

Here is the code:

Code:

for (var i = 0; i < BS_crm['activityTypes'].length; i++) {
        var clickFunc = function(){ activityList.showForm( -1, {blockType:[""+BS_crm['activityTypes'][i]['id'], "0"]} ); };
        var type = {
                value: BS_crm['activityTypes'][i]['id'],
                label: "Add New "+BS_crm['activityTypes'][i]['label'],
                css: BS_crm['activityTypes'][i]['css']+"_16",
                onClick: clickFunc
        };
        previewLinks.items.push( type );

}

Now, basically what I am doing here is running through one array to
create an array of objects, that will be used to create links that
will use whatever onClick function I pass it. The problem is that on
the second line I need the BS_crm['activityTypes'][i]['id'] to be a
value, not a reference. If that line was simply changed to:

Code:

var clickFunc = function(){ activityList.showForm( -1, {blockType:["3", "0"]} ); };

then everything would work as I need.

How can I make this happen? I would really appreciate any help.

Thank you again in advance.

I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE).

The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden.

However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case.

Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed?

Code:

<html>
<head>
	<title>TESTING</title>
	<script type="text/javascript">
	<!--
	document.write("<input type='submit' value='submit' onclick='func()'>");
	function func()
	{
		document.write("<input type='submit' value='New Button' onclick='func()'>");
		window.alert("THIS");
	}
	-->
	</script>
</head>
<body>
<!--input type="button" value="Read" onclick="ReadFiles()"-->
</body>
</html>

This is a very basic version of what I am trying to do. I have a dynamic list which is set in a table. When clicked, a function is run to set up a new list.. The reason I explain that, is that I need to keep it dynamic.
Now for the problem:
When I run this page, I have the button made right away, then when clicked it creates the new button. The new button should also run the function to create the new button again, but when I click it, I only receive "error on page".

I don't know if there is a better way to go about this, but as for this route, I am stuck.

Any help is greatly appreciated!

-Shane

Hello,
I have a php function
PHP Code:
function npclocs()
{
    $npcl=$db->query("SELECT * FROM npclocation WHERE npclong < {$ir['userlongitute']}+5 AND npclong > {$ir['userlongitute']}-5 AND npclat > {$ir['userlatitude']}-5 AND npclat < {$ir['userlatitude']}+5 ");
    /*$npcarray = mysql_fetch_array($npcl);*/
    $rows =0;
    while($row = $db->fetch_row($npcl))
  {
      $nloc[]=$row;
}
foreach($nloc as $n)
{
   echo "newpoints[" . $rows . "] = new Array(".$n['npclong'].", ".$n['npclat'].", ".$n['npciicon'].", ".$n['npclname'].", ".$n['npclname'].");
   ";
   
   $rows++;
  }
} 


and I have a javascript function that I would like the results of this function to insert its results in the javascript here is the function in javascript

Code:

function addPoints() {


 
//newpoints[0] = new Array(-73, 46, icon0, 'monroe', 'monroepopup'); 
//newpoints[1] = new Array(-69, 52, icon0, 'jackson', 'jacksonpopup'); 
//newpoints[2] = new Array(-45, 39, icon0, 'Benton', 'bentonpopup');
    
	 

	for(var i = 0; i < newpoints.length; i++) {
		var point = new GPoint(newpoints[i][1],newpoints[i][0]);
		var popuphtml = newpoints[i][4] ;
		var marker = createMarker(point,newpoints[i][2],popuphtml);
		map.addOverlay(marker);
	}
}

The commented out //newpoints is the old js array. my php function queries mysql and uses whiles and foreach to create the same output, as the old js array.
I would like that php function result to insert its result into the js function.

Is this possible?

Thank you in advance.

Hi I have a JavaScript function that has leaves floating around the screen and I need a way to have a checkbox turn on and off the function. Or I need a way to have a button turn off the script. I have the code to start the function on-loading the site. Any ideas are greatly appreciated.

I got the falling leaves script from

http://javascript.about.com/gi/o.htm...tip62.htm%3Ffm

Hi,

I have a javascript code in my site which is similar to this:

var menu1=new Array()
menu1[0]='<hr style="color: \'#FFCC66\'; height: \'1\'; text-align: \'left\'; width: \'96%\'"><strong><font size=+2>text1</font></strong>'
var menu2=new Array()
menu2[0]='<hr style="color: \'#FFCC66\'; height: \'1\'; text-align: \'left\'; width: \'96%\'"><strong><font size=+2>text2</font></strong>'

The list goes on for hunders of records. What I need to do, is to use a function in which I will pass the text1, text2, text3 as variables, and have the html code returned, since it's always the same.

For example, I would need something like:
var menu1=new Array()
menu1[0]='display_html(text1)'
var menu2=new Array()
menu1[0]='display_html(text2)'

This would save me a lot of bytes in the output file, but I'm not very familiar with javascript so I didn't manage to make it work. I tried using the document.write command in a function, but that forced the text to be displayed on my page, even though it was supposed to be shown only when the user clicks on a link. I'm using the "AnyLink Drop Down Menu" script from www.dynamicdrive.com.

Any help would be highly appreciated!

Please I have been having sleepless nights for days and could not resolve why this codes will not work.

I will appreciate any assistance to resolve the coding reerroll
the main problem is the function calculate (), does work when called.

Please help
<HTML>
<HEAD>
<TITLE>Feedback</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
rate = new Array(4)
rate[0] = 8
rate[1] = 4
rate[2] = 6
rate[3] = 12

function calculate()
{
howmuch = eval("document.form1.InsVal.Value")

for(loop = 0; loop < document.form1.cover.length;loop++)
if (document.form1.cover[loop].checked)
level = loop + 1

where =document.form1.region.selectedIndex

cost = eval(10 + howmuch /100*rate[where]*level)
document.form1.guote.value =cost

}

function confirmPurchase()

{
if (confirm("Area you sure you wish to purchase insurance from us?"))

document.form1.submit()
}
</SCRIPT>
</HEAD>
<BODY>
<H1 ALIGN = CENTER>HotWheels</H1>
<H2 ALIGN = CENTER>Skateboard Insurance Specialists</H2>
<FORM NAME = form1 METHOD = post
ACTION = "mailto:ioduwa@yahoo.com">

<P><B> Value of board:</B>
<INPUT TYPE = text NAME = InsVal SIZE = 10>
<P> Region
<SELECT NAME= region>
<OPTION = london> London
<OPTION = southwest> South West
<OPTION = rest>Rest of England
<OPTION = wales>Wales
</SELECT>

<BR><INPUT TYPE = Radio NAME = cover> Third Party
<BR><INPUT TYPE = Radio NAME = cover> Third Party Fire and Theft
<BR><INPUT TYPE = Radio NAME = cover CHECKED> Comprehensive

<P><INPUT TYPE = "button" NAME = "calc" VALUE = "Get guote"
onClick ="calculate()">
<P><B> Your Quotation:<B>
<INPUT TYPE = "text" NAME = "quote" SIZE = 10>
<P><INPUT TYPE = "button" NAME = "done" VALUE = "Purchase"
onClick = "comfirmPurchase()">
</FORM>
</BODY>
</HTML>

I am very new at Javascript.

In using the search method, have search for "=" and "&" with no problem. But for some reason trying to search for "?" get no results. I have used the exact same line in testing the line and get results from"=" but not "?".

Code:

var a=str.search("?");
var b=str.search("=");

Can some tell me why and give a solution?