Two snippets of javascript, only one works??

[galvin]

I'm using these two snippets of javascript (JQuery) in the HEAD of my page.  Each one works if it's by itself in the code, but when they are both there (like below) neither of them work.  How should I be writing this so that each fires when both are on the same page?

 

<script type="text/javascript">
$(document).ready(function() {

$("a#inline").fancybox({
	'hideOnContentClick': true
});


});

</script>

<script type="text/javascript">
$(document).ready(function(){ 
					   
$(function() {
	$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
		var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
		$.post("updateDB.php", order, function(theResponse){
			$("#contentRight").html(theResponse);
		}); 															 
	}								  
	});
});

});	
</script>

[haku]

It looks like it should be fine to me - maybe you have a collision somewhere that is causing the javascript to fail.

 

The easiest way to figure this out is to install the firebug plugin in firefox, open it, select the console tab, and reload the page. If you have any javascript errors it will let you know what they are.

[galvin]

Thanks for the tip, haku!  I did what you said and the error was ".fancybox is not a function".  It clearly is a function, so I experimented and found the following.  I have these four calls in my head tags to various Jquery files...

 

<!-- for a drag and drop -->
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.7.1.custom.min.js"></script>
<!-- for fancybox -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.fancybox-1.3.2/fancybox/jquery.fancybox-1.3.2.pack.js"></script>

 

If I leave them like above, then the fancybox script works (the scripts are in my original post), but the drag and drop does NOT and Firebug gives error ".sortable is not a function".

 

If I put the drag and drop calls AFTER the fancybox calls, like this...

 

<!-- for fancybox -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.fancybox-1.3.2/fancybox/jquery.fancybox-1.3.2.pack.js"></script>
<!-- for a drag and drop -->
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.7.1.custom.min.js"></script>

 

...then the drag and drop works, but the fancybox does not and Firebug gives error ".fancybox is not a function".

 

So clearly there is an issue with the source files of one messing with the other. 

 

Anyone have any ideas/suggestions to make these two scripts play nicely together?

[haku]

Yes. You are linking the jQuery library twice, this is what is causing you troubles. Change your script inclusion to this;

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="jquery/jquery.fancybox-1.3.2/fancybox/jquery.fancybox-1.3.2.pack.js"></script>

[haku]

Just to clarify, the reason for this problem is that you are adding the jQuery library, which defines the jQuery object. You are then including a plugin, which adds your plugin to the jQuery object.

 

Next, you are adding the jQuery library again, and it re-defines the jQuery object, without the original plugin. Then you are adding your second plugin to the new jQuery object. This means that whichever plugin you were adding first is always missing because it is lost when you include the jQuery library a second time.

 

If you add jQuery just once, then both plugins are added to the jQuery object, and you will have no troubles. By the way, you can combine the code you have into one $(document).ready() function, you don't need to do it twice.

[galvin]

Ahhh, thank you so  much for pointing out my mistake.  I'm still new to JQuery so I didn't realize two of those inclusions were doing the same thing.

Thanks again!