DatePicker using CrossRider is not working?

Question

Using CrossRider, I want to add a DatePicker to page's DOM, here's my code:

appAPI.ready(function($) {
    appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
    appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
    $('<input type="text" id="datepicker" />').prependTo($('body'), function(){$( "#datepicker" ).datepicker();});
});

But it didn't work, I also tried

appAPI.ready(function($) {
    appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
    appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
    $('<input type="text" id="datepicker" />').prependTo($('body'));
        $( "#datepicker" ).datepicker();
});

And it didn't work too, and I tried

appAPI.ready(function($) {
    appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
    appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
    $('<input type="text" id="datepicker" />').prependTo($('body'));
    $('<script>$(function(){$("#datepicker").datepicker();});</script>').appendTo('head');
});

But none of them worked, meanwhile if we test this on simple page it will work ?! For example:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>$(function(){$("#datepicker").datepicker();});</script>
</head>
<body>     
    <p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

How to make the datepicker works using CrossRider ?

score 4 · Answer 1 · answered Dec 31 '12 at 13:51

4

The easiest way to include jQueryUI is to use Crossrider's native support for jQueryUI via the appAPI.resources.jQueryUI method.

answered Dec 31 '12 at 13:51

Shlomo

3,763
11
16

The method `appAPI.resources.jQuery` is also documented. Though, if i use `appAPI.resources.jQuery('1.8.3');` in `appAPI.ready` i get `Uncaught TypeError: appAPI.resources.jQuery is not a function`. Can you help me with this one? – James Cameron Jul 13 '15 at 19:37

score 3 · Accepted Answer · answered Dec 18 '12 at 10:42

For those who are interested, here's the solution:

appAPI.ready(function($) {
    appAPI.resources.includeRemoteJS("http://code.jquery.com/ui/1.9.2/jquery-ui.js") ;
    appAPI.dom.addRemoteCSS("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css");
    $('<input type="text" id="dateFrom" />').prependTo($('body'));
    $( "#dateFrom" ).datepicker();
});

DatePicker using CrossRider is not working?

2 Answers2