Login

11-03-2010, 11:44 AM

[eluser]Todlerone[/eluser]
Hello again to everyone and thank-you for any help/suggestions for this thread. I've tried to find a simple tutorial for installing jquery to work with CI but I haven't found anything worthwhile. I want to use jQuery datePicker for a site I'm making. The one tutorial lost me in where it was telling me to place the library. Does anyone know of a good site to help me with this.

Again TY in advance.

11-03-2010, 11:55 AM

[eluser]LuckyFella73[/eluser]
First download the needed files here:
http://jqueryui.com/download

Depending on the file location you could have something like this in your header:

Code:
&lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url(); ?&gt;javascript/jquery/css/jquery-ui.css"/&gt;

<scr+ipt type="text/javascript" src="&lt;?php echo base_url(); ?&gt;javascript/jquery/jquery.js"></scr+ipt>

<scr+ipt type="text/javascript" src="&lt;?php echo base_url(); ?&gt;javascript/jquery/jquery-ui.min.js"></scr+ipt>

In your view file you can have something like this:

Code:
&lt;input type="text" name="date" id="datepicker" value="&lt;?php echo set_value('datum'); ?&gt;"/&gt;

I took the code from a older project, but I think that should allready work.

More details you can find here:
http://jqueryui.com/demos/datepicker/

11-03-2010, 12:14 PM

[eluser]Todlerone[/eluser]
TY LuckyFella73. Where do place the downloaded files exactly. In a folder at the level of my index.php file, or in a folder at the system level or inside the application, or doesn't matter as long as I properly route it. Sorry for any simple shortcomings, I'm still getting use to CI.

TY again

11-03-2010, 12:42 PM

[eluser]Todlerone[/eluser]
I also see a link to the JS css. How do I handle my site css and the JS css?.

TY

11-03-2010, 01:27 PM

[eluser]Christophe28[/eluser]
Hello,

jQuery and jQuery UI are both hosted on Google Code, so if you put the following two lines in the <head> </head> of your website it will work.

Code:
<scr type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></scr> 

    <scr type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" ></scr>

Then you need to create a template using the jQuery UI themeroller: http://jqueryui.com/themeroller/

After you created and downloaded your theme, you have to upload it to your server. Put it for example in a folder next to index.php calling /css (you can locate all your css in this folder)

Then you have to put the following line in your <head> </head> (above all javascript)

Code:
&lt;link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.4.custom.css" /&gt;

Make sure the file location is correct!

At last you can put the following code in the <body> </body> of your webpage:

Code:
<scr>

    $(function() {

        $( "#datepicker" ).datepicker();

    });

    </scr>

<div class="demo">

<p>Date: &lt;input type="text" id="datepicker"&gt;&lt;/p>

</div>&lt;!-- End demo --&gt;

I have changed all the < script > to <scr> because of the XSS filter on this forum ;-) Change it back when you copy/paste to your website.

Have fun!

Christophe

11-03-2010, 02:26 PM

[eluser]Todlerone[/eluser]
TY for your post. About the css. Do I have to combine my site css with the JS css or does CI allow for multiple css calls?.

TY

11-03-2010, 02:31 PM

[eluser]Christophe28[/eluser]
As long as you include your CSS on your website (whether this is build in CI or not) the webbrowser will find it. It does happen the CSS is overwritten.

For example:

In your CSS a link is blue
a { color: #0000FF; }

But when you create a dialog on your website like ...
$('div').dialog();

... the links you create in this dialog will appear black because these are more specific set in the CSS of jqueryui. You can change this just like you change your own CSS.

Best,
Christophe

11-09-2010, 11:29 AM

[eluser]Todlerone[/eluser]
TY Chris I finally got it to work.

06-19-2011, 01:11 PM

[eluser]adityajoshi[/eluser]
i tried the above it detects my js and css folder but nothing happens this is what i did
please guide me where i went wrong
i am posting my code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Add an Event</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>javascript/jquery/css/jquery-ui.css"/>
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css"/>
<link type="text/css" href= "<?php echo base_url();?>ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<scrpt type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</scrpt>

</head>

<body>
div class="demo">

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

</div>
</body>

06-20-2011, 12:24 AM

[eluser]Atharva[/eluser]
I don't see jquery.js and jquery.ui.js file loaded. You need to load them, loading only css won't work.