PDA

View Full Version : Getting 2 jQuery function working


PrPrO
06-07-2012, 08:34 AM
Hello,

I have 2 jQuery functions on 1 page, those are: Lighbot 2.51 and a jQuery treeview.
The treeview itself works great, and so does lightbox itself
but whenever I input the lighbot jquery script, the treeview no longer works, only the lighbotx does. How can i get both functions working at the same time?

Thank you!

Here is the code:

<!-- This is the treeview -->
<link rel="stylesheet" href="../jquery.treeview.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript" src="demo.js"></script>
<!-- Treeview ends here -->

<!-- Here starts Lightbox -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<!-- Lightbox ends here -->

gentleone
06-07-2012, 09:58 AM
You load the jQuery library twice, so I'd recommend to change that first.

<!-- This is the treeview -->
<link rel="stylesheet" href="../jquery.treeview.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript" src="demo.js"></script>
<!-- Treeview ends here -->

<!-- Here starts Lightbox -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<!-- Lightbox ends here -->
You can delete <script src="js/jquery-1.7.2.min.js"></script>, but I don't know which jQuery version treeview uses, so lighbox might not work on that version.

Or you can delete the <script src="../lib/jquery.js" type="text/javascript"></script> but then I don't know if treeview works with 1.7.2. Also make sure if your paths are right or organize/tidy your folders a bit. You have scattered javascript files on 3 different locations. I'd recommend to make one 'js' folder and put all your javascript files in there.

I also don't see any jQuery functions to fire the plugins, but you might not copied and paste them here in the thread.

Load the jQuery stuff in the head in this order: First the jQuery library, then the jQuery plugins and then the jQuery functions.

PrPrO
06-07-2012, 10:36 AM
Hello,

thank you for your fast reply
I changed the soruce path and putted all the .js files in there
When i delete <script src="js/jquery-1.7.2.min.js"></script>, the lighbox doesnt work, but the treeview does
When i delete the <script src="js/jquery.js" type="text/javascript"></script> the treeview doesn't work, but the lighbox does

gentleone
06-07-2012, 11:50 AM
Can you put the page online somewhere? Its easier for us to debug like that.

PrPrO
06-07-2012, 12:07 PM
I am uploading the test webpage ATM... I will EDIT this post with the link

PrPrO
06-07-2012, 02:28 PM
So...
I had big problems uploading the files and i had to upload to other free web hosting site. But can't edit the previous post so here it is :D

http://clm-pro.zxq.net/

PrPrO
06-07-2012, 04:52 PM
I managed to solve this problem only with changing the script order
Thank you for trying to help
Here is the working code:
<!-- styles here if any -->
<link rel="stylesheet" href="../jquery.treeview.css" />
<link href="css/lightbox.css" rel="stylesheet" />
<!-- end styles -->

<!-- only one copy of jQuery, latest is probably best -->
<script src="js/jquery-1.7.2.min.js"></script>

<!-- scripts for treeview -->
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript" src="demo.js"></script>
<!-- treeview scripts ends here -->

<!-- script for lightbox -->
<script src="js/lightbox.js"></script>
<!-- lightbox script ends here -->