asked on

Several Jquery functions on one page

Hey Experts!!

I know very little about Jquery and Java so please go easy.
Is there anything I need to knwo when calling more than one jquery function on a single page?
The following works (other than the CSS) in IE, but nothing works in FF.

Thanks in advance!

<!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>HeartAED Intranet Home</title>
<style type="text/css">
@import url("css/reset.css");
@import url("css/main.css");
@import url("css/slidebox.css");
@import url("css/niceforms-red.css");
</style>
<script type="text/javascript" src="includes/jquery.js" ></script>
<script type="text/javascript" src="includes/jcolorize.js" ></script>
<script type="text/javascript" src="includes/slidebox.js" ></script>
<script type="text/javascript" src="includes/nicejforms.js"></script>
<!--Jquery Form start -->
<script type="text/javascript">
$(document).ready(function(){
	$.NiceJForms.build({
			imagesPath:"css/images/redtheme/"
		})
	});
</script>
<!--Jquery Form end -->


<!--table colorize start -->
<script> 
$(document).ready(function(){
		$('#tbl1').colorize( {oneClick:true});
});
 
</script>
<!--table colorize end -->
<!--slider start -->
<script> 
$(document).ready(function(){
				$("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"});
			});
</script>
<!--slider end -->


</head>

<body>
<div id="wrapper"> 
  <div id="header"> 
  		<h1>HeartAED Intranet  3.0</h1>
	<div id="hdr-srch">  
    <form id="gen-search" class="niceform"> Search: <br /> 
    <input name="" type="text" size="30" maxlength="255" />
    <input type="button"  value="Go" />
    <br />
    <input name="client" type="radio" value="client" /><label> Client</label>
    <input name="client" type="radio" value="client" /><label> Serial</label>
    <input name="client" type="radio" value="client" /> <label> Notes</label> 
    </form>   <!--gen-search end-->
      <form id="gen-search2" class="niceform"> Expirations: <br /> 
    <input name="" type="text" size="8" maxlength="15" /> And   <input name="" type="text" size="8" maxlength="15" />
<input type="button"  value="Go" />
    <br />
    <input name="client" type="radio" value="client" />
    <label> Adult</label>
    <input name="client" type="radio" value="client" />
    <label> Battery</label>
    <input name="client" type="radio" value="client" /> <label> Ped</label> 
    </form><!--gen-search2 end-->
    
        <form id="gen-search3" class="niceform"> Search: <br /> 
<select name="client-list">
<option value="1">Business - AAA</option>
      <option value="639">Business - Acheson Colloids Company</option>     
    <option value="640">Business - American Axle - Detroit</option>
    <option value="641">Business - American Axle - Three River</option>
      <option value="693">Business - AZ Automotive</option>
      <option value="675">Business - Bank</option>
      <option value="672">Business - Bank of America</option>
      <option value="2">Business - Business</option>
      <option value="654">Business - CLOSED</option>
      <option value="3">Business - CMS</option>
      <option value="642">Business - Cone Drive</option>
      <option value="643">Business - Detroit Tigers</option>
      <option value="644">Business - Dow Chemical</option>
      <option value="659">Business - Easter Seals of Eastern Michigan</option>
      <option value="4">Business - Environmental Quality Co.</option>
      <option value="645">Business - Florida</option>
        <option value="646">Business - Golling</option>
      <option value="670">Business - Granger III and Associates, LLC</option>
</select>
    <input type="button"  value="Go" />
    <br />
    <input name="client" type="radio" value="client" /><label> Client</label>
    <input name="client" type="radio" value="client" /><label> Serial</label>
    <input name="client" type="radio" value="client" /> <label> Notes</label> 
    </form>   <!--gen-search3 end-->
    
    

	</div><!--end hdr-srch-->
<br /> <br /> <br /> <div class="hdr-left">  
Welcome Lenny
</div><!--end hdr-left-->
  </div><!--end header-->		
        
        <div id="content">  
        <h2> Search Results </h2>
        <table width="100%" border="1" rules="rows" frame="box" id="tbl1">
   <tr class="sort">
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </th></tr>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
    <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
  </tr>
  <tr>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>

        </table>

        
  </div><!--end content-->


</div><!--end wrapper-->
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

rushShah

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Tony O'Byrne

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

ASKER

Thank you both so far for your help. I've condensed the Jquery code to 5 lines.
However now here's the thing. 2 out of the 3 functions (slideBox and colorize) work in FF but not IE. In IE the NiceJforms kind of works (weird positioning, some css works, etc.) but the other two do not.
Is there anything else you guys notice about my code that would throw it off that bad?

LZ1

ASKER

Here are the errors I'm getting in IE.

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
Timestamp: Sat, 30 Jan 2010 02:45:56 UTC

Message: Invalid argument.
Line: 906
Char: 30
Code: 0
URI: file:///C:/heartaed/includes/jquery.js

Message: 'jQuery.NiceJForms.radios[...].checked' is null or not an object
Line: 226
Char: 3
Code: 0
URI: file:///C:/heartaed/includes/nicejforms.js

Message: 'jQuery.NiceJForms.radios[...].checked' is null or not an object
Line: 226
Char: 3
Code: 0
URI: file:///C:/heartaed/includes/nicejforms.js

Message: 'jQuery.NiceJForms.radios[...].checked' is null or not an object
Line: 226
Char: 3
Code: 0
URI: file:///C:/heartaed/includes/nicejforms.js

Message: 'jQuery.NiceJForms.radios[...].checked' is null or not an object
Line: 226
Char: 3
Code: 0
URI: file:///C:/heartaed/includes/nicejforms.js

Message: 'jQuery.NiceJForms.radios[...].checked' is null or not an object
Line: 226
Char: 3
Code: 0
URI: file:///C:/heartaed/includes/nicejforms.js

LZ1

ASKER

Of note. The following code is the sample for the JNiceForm. It works perfectly in IE but does not work at all in FF

<!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>
<title>NiceJForms by Lucian Lature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/nicejforms.js"></script>
<link href="css/niceforms-red.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<h1 style="margin-bottom:30px; color:#900;">NiceJForms</h1>
<form class="niceform">
	<p>
	  <select size="1" id="mySelect1" name="mySelect1" class="width_320">
	    <option selected="selected" value="Test area no.1">Test area no.1</option>
	    <option value="Another test option">Another test option</option>
	    <option value="And another one">And another one</option>
	    <option value="One last option for me">One last option for me</option>
	    <option value="This is one really really long option right here just to test it out">This is one really really long option right here just to test it out</option>
      </select>
	  <br />
	  <select size="1" id="mySelect2" name="mySelect2" class="width_160">
	    <option value="Test area no.2">Test area no.2</option>
	    <option value="Another test">Another test</option>
	    <option selected="selected" value="And another one">And another one</option>
	    <option value="And yet another one">And yet another one</option>
	    <option value="One last option for me">One last option for me</option>
      </select>
	  <br />
	  <br />
	  <input type="radio" name="radioSet" id="option1" value="foo" checked="checked" />
	  <label for="option1">foo</label>
    </p>
	<p>
	  <input type="radio" name="radioSet" id="option2" value="bar" />
	  <label for="option2">bar</label> 
    </p>
	<p>
	  <input type="radio" name="radioSet" id="option3" value="another option" />
	  <label for="option3">another option</label>
	  <br />
	  
	  <br />
	  <input type="checkbox" name="checkSet1" id="check1" value="foo" />
	  <label for="check1">foo</label>
	  <br />
	  <input type="checkbox" name="checkSet2" id="check2" value="bar" checked="checked" />
	  <label for="check2">bar</label>
    </p>
	<p>
	  <input type="checkbox" name="checkSet3" id="check3" value="another option" />
	  <label for="check3">another option</label>
	  <br />
	  <br />
	  <label for="textinput">Username:</label>
	  <br />
	  <input type="text" id="textinput" name="textinput" size="12" /><br />
	  <label for="passwordinput">Password:</label>
	  <br />
	  <input type="password" id="passwordinput" name="passwordinput" size="20" /><br />
	  <br />
	  <label for="textareainput">Comments:</label>
	  <br />
	  <textarea id="textareainput" name="textareainput" rows="10" cols="30"></textarea>
	  <br />
	  <br />
	  <input type="submit" value="Submit this form" />
    </p>
</form>

</div>

<script type="text/javascript">
$(document).ready(function(){
	$.NiceJForms.build({
			imagesPath:"css/images/redtheme/"
		})
	});
</script>

</body>
</html>

Open in new window

LZ1

ASKER

Thanks for the advice guys. I needed it. I will have more questions since I actually am not using the niceforms right now.