CODEWITHSUNDEEP
phpjquerycodeignitertemplates
Paul Kar.
Paul Kar.

Reputation: 1324

Trying to display a calendar using jquery ui

I am using the framework codeigniter and trying to use jquery for the purpose of displaying and allowing the user to chose a time period in which he would like to preform his search. I have the date and the text field displayed but when I click on the text field I don't get any calendar to chose a date from. This is my view:

<html>
<head>
<script type="text/javascript" src="<?php echo $jquery?>"></script>          
<script type="text/javascript">
$(function() {
    $( "#datepicker" ).ui-datepicker();
});

</script>
</head>
<body>
<div class="demo">

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

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



<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

<a href="">www.msn.ca</a>
<?php echo form_open('search/submit'); ?>
</body>
</html>

It's been taken from the sample code: http://jqueryui.com/demos/datepicker/ FYI I am using jQuery UI 1.8.16 Not sure what's wrong here. If anyone thinks the controller is relevant then here it is:

<?php
class calendarController extends CI_Controller{

    public function index()
    {
        $this->load->helper('url');
        $data['jquery'] = base_url("jquery.js");
        $this->load->view("jqueryView", $data);
    }
}
?>

Upvotes: 0

Views: 943

Answers (3)

Andrei Drynov
Andrei Drynov

Reputation: 8592

I do not see links to jQuery JS and CSS files on you page. Try something like this:

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>    
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>

You can place them anywhere on your page. Better at the end so that your pages shows faster. Use datepicker() inside jQuery load function, like in your code to make sure that nothing is broken

Upvotes: 1

Luc Morin
Luc Morin

Reputation: 5380

Shouldn't you place your datepicker initialization inside the jquery ready event handler ?

Like so:

$(document).ready(function(){

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

 });

Upvotes: 0

Damien Pirsy
Damien Pirsy

Reputation: 25435

You're building your url wrong.

Should be:

$data['jquery'] = base_url().'jquery.js';

which gives in your view: http://www.yoursite.com/jquery.js.

I have some doubt on the actual true position of that script. Change it accordingly to your folder structure, just keep in mind that base_url() returns your url like this, with the trailing slash:

http://www.yoursite.com/

Also, you you're not loading jQuery UI, so add that too (same way as above)

Another thing, your input lacks the name attribute, you need it in case you want it to be fetched by php. AND, it's outside the form, so it won't work. This is just a note, maybe you don't want to use it that way, but just in case...

Upvotes: 0

Related Questions