Several Jquery functions on one page

LZ1
LZ1 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
try this..
you can call several JQuery from single document.ready function..

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

        $('#tbl1').colorize( {oneClick:true});

        $("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"});
        });
</script>
Tony O'ByrneSenior Web Developer
Commented:
A tip for JavaScript/jQuery...

Include all necessary files at the top of your document in the <head> tag. (You already have this done.)  This allows your page to load everything necessary at the beginning.

Then have the scripts that do stuff at the bottom...  So your above html should have the general form outlined below.

The idea behind this is that the DOM should be all rendered by the time your $(document).ready() function executes.  $(document).ready doesn't always run when the page has fully displayed - sometimes it runs when the document is in memory, but not rendered.  That could be why things aren't working in FF (I had similar issues not too long ago).

Another (better? more reliable?) way to do the $(document).ready is to bind the function to the load event...

$(window).load( function(){
    $.NiceJForms...
});

This waits until *everything* has loaded - including images.

or, the following should also work.

$(document).bind("load", function(){
    $.NiceJForms...
});

<!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>
</head>
<body>
    <!-- all your html here -->

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

        $('#tbl1').colorize( {oneClick:true});

        $("#hdr-srch").slideBox({width: "100%", height: "75px", position: "top"});
        }); 
    </script>

Open in new window

LZ1
Top Expert 2011

Author

Commented:
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?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

LZ1
Top Expert 2011

Author

Commented:
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
Top Expert 2011

Author

Commented:
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
Top Expert 2011

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial