Forums

how to include a JS in a package. It inst find the path

Permalink
Hi,

I would like to use a timepicker widget for my current project.
I am using a JQUERY add-on ,timepicker, which adds a timepicker to jQuery UI Datepicker.
http://trentrichardson.com/examples/timepicker/...

I will use this add-on on a single_page within a package, i am trying to add the reference to the file on the on-view fucntion of the controller for the single_page, but it is working. The error that i am seeing on the browser dev tool is
Uncaught TypeError: Object [object Object] has no method 'datetimepicker'

So it looks like it is not finding the js file, how do i load the JS???
This isnt working


$this->addHeaderItem($html->javascript('jquery-ui-timepicker-addon.js'));
 
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Hello,
when you are doing it like this you are asking the system to load the file as if it belonged to the set of core js files.

You have to put your file in your package js folder and then call it like this:
$html = Loader::helper('html');
$this->addHeaderItem($html->javascript('name_of_your_script.js', 'handle_for_your_package'));
davyv replied on at Permalink Reply
I'm having trouble to implement this timepicker also.

I have created a custom block that loads the java into the header like so:

public function on_page_view() {
     $html = Loader::helper('html');
       $this->addHeaderItem($html->javascript('jquery-ui.js'));
      $this->addHeaderItem($html->javascript('datetimepicker.js'));
      $this->addHeaderItem($html->css('jquery-ui.css'));


and it actually works like i expect: in my html form i render the input like so:

<input type="text" id="date" name="date-input" readonly /><br />


and on my page it fires the following like it should:

$(function() {
   $('#date').datetimepicker();
});


The result is that i get a calender where i can choose a date, but it doesn't show the time -controls.

I know for sure that my form doesn't just use the normal datepicker, because datetimepicker has 2 extra buttons ('now' and 'done') and those are showing in the right place.

Also, the css is rendered correctly, it's the datetimepicker.js that is supposed to inject html, but it just doesn't for some reason..

I'm using concrete5 version 5.5.2.1
The version of jquery included in my build is jQuery v1.7.1
And i managed to squeeze in jQuery UI - v1.10.2 without a problem, if i simply try to replace the /concrete/js/jquery.js with a newer version concrete5 gives me a blanco editor's bar (so I guess that's not the way to do it :-) )

I can't help but think that jQuery v1.7.1 simply doesn't support the sliders or some other time-related function, but i can't find anything on it..

Anyone have an idea on this?