Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

jquery is undefined..?

Hi

i am running demo 6 project but unable to do error jquery is undefined can you please tell me how to remove this error

 

i used  demo 6 from this link and integrate with my code.

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/

<!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" >
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
	<script src="jquery.min.js" type="text/javascript"></script>
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
    <style type="text/css">
       .demo6{
	border: 1px solid #B9E3FF;
	background: #0099FF;
	padding-left: 5px;
	color: #FFFFFF;
}
    </style>
   
    <script type="text/javascript">

$('.panel').hide();

$('.demo6').collapser({
	target: 'next',
	effect: 'slide',
	changeText: 0,
	expandClass: 'expIco',
	collapseClass: 'collIco'
}, function(){
	$('.panel').slideUp();
});
	
       
    </script>        
</head>
<body>
 <h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>



 

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: jquery is undefined..?

Hi ravi.

 

First you should add the .js JavaScript files to the <head> element of the <html> document to make sure it is working:

 

<html xmlns="http://www.w3.org/1999/xhtml">
  <!-- your libraries are here -->
  <head>
  <!-- your libraries should be here -->
  </head>
  <body>
  </body>
</html>

 

 

Then you should add the .js files starting with jquery.min.js and after that follow up with the jquery extensions like this:

 

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.collapser.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>
<script src="jquery.collapser.min.js" type="text/javascript"></script

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: jquery is undefined..?

yes sir you are right..one more problem

 

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: jquery is undefined..?

i want to implement this accordion.. can you please help me in .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
   
   <script src="jquery.min.js" type="text/javascript"></script>
 <!--script src="jquery.collapser.js" type="text/javascript"></script-->
    <script type="text/javascript">


	
 jQuery(document).ready(function(){
	$('.accordion.head').click(function() {
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});

      
    </script>        
</head>
<body>

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

</body>
</html>



 

 

http://jqueryui.com/demos/accordion/