jQuery UI not working?

[DWilliams]

I'm not a very good JS developer but I'm muddling my way through creating a nice interface for my program with AJAX and jQueryUI. The AJAX part I have working fine, but I can't seem to get jQueryUI working.

 

I read some of the intros and thought it was pretty simple. I have this in my header:

 

<link type="text/css" href="http://example.com/myfolder/application/assets/css/redmond/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

 

I have verified that all those links work (i changed the actual path to my project to example.com/myfolder but the real one works).

 

In a test page I put:

	<script>
$(function() {
	$( "#datepicker" ).datepicker({
		changeMonth: true,
		changeYear: true
	});
});
</script>



<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->

 

I copied and pasted that from a demo on the jQueryUI website. On their website, when you give focus to the input box, you get a calendar. On my test, nothing at all happens.

 

What gives? It's probably something obvious since I'm so new to jQueryUI 

 

[Maq]

Have you run this with firebug enabled?  It will notify you of errors.

[DWilliams]

Firebug reports no JavaScript errors other than:

Unexpected token in attribute selector: '!'.

 

I googled that and it's a known issue, or rather a known non-issue. Apparently it doesn't cause problems.

 

There are, however, a bunch of CSS errors. I don't see a way to copy and paste them all at once in Firebug, though. Mostly they seem to be stuff like this:

 

Unknown property 'border-top-left-radius'.  Declaration dropped.

 

Which is strange, but even if there are CSS errors then at least SOMETHING should display, right?

 

I'm using firefox 3.6.13

[Maq]

I just ran your code in firefox and it worked fine.  Do you have other code that could be affecting it?

[DWilliams]

I just ran your code in firefox and it worked fine.  Do you have other code that could be affecting it?

 

Actually yeah I think that might be the problem. I put this in a completely separate file from my project and it worked. After some tinkering it looks like the Prototype JS framework I'm using conflicts with it. If I remove it then the calendar pops up fine. Are these two known to conflict or something?

 

Truth be told I don't even know what Prototype does, I just use it because it's required by the CodeIgniter AJAX library I'm using. If I remove the link to prototype.js then the jQueryUI stuff works, but my AJAX call do not 

[Maq]

After some tinkering it looks like the Prototype JS framework I'm using conflicts with it. If I remove it then the calendar pops up fine. Are these two known to conflict or something?

 

Yes there will be a conflict when using 2 separate JS libraries.  Read this link:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

 

Basically you will have to call jQuery.noConflict which will override the '$' and allow prototype to use it.  For JQuery you will have to use jQuery(...).

[DWilliams]

Aha that explains it!

 

I assume I can just change my header to something like this:

<link type="text/css" href="http://example.com/myfolder/application/assets/css/redmond/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>jQuery.noConflict();</script>

 

And then change $ to jQuery everywhere I try to use it? That header is common to almost all of my pages, the jQuery stuff is pieced together from other sources and dumped into the page (mostly pieces of forms retrieved with AJAX).

[Maq]

Aha that explains it!

 

I assume I can just change my header to something like this:

jQuery.noConflict();

 

And then change $ to jQuery everywhere I try to use it? That header is common to almost all of my pages, the jQuery stuff is pieced together from other sources and dumped into the page (mostly pieces of forms retrieved with AJAX).

 

$ gets changed to jQuery everywhere you're using JQuery.  Prototype shouldn't need any changed b/c it is already using.

 

The jQuery.noConflict() just gives up the '$' (which is actually an alias for jQuery) and allows the other libraries to use it.

[DWilliams]

Works beautifully now, thanks

[Maq]

Works beautifully now, thanks

 

Np, glad it's working.