2012-04-19 4 views
0

私はこれを使用しようとしている:body.ejsだというはjqueryのUIののDateTimePickerを動作しません(Node.jsの+ EJS +表現)

<html> 
<head> 
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js">  </script> 
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script> 
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js"></script> 
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script> 
    <link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"> 

<script> 

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

</script> 

</head> 
<body> 
    <%-body%>  
</body> 
</html> 

:私のコードです http://trentrichardson.com/examples/timepicker/

<input id="dateTimePicker1" class="hasDatepicker"></input> 

私が得るのは簡単な入力です。クリックすると何も起こりません。私はコンソールにエラーは表示されません。私はその問題を解決する助けが必要です。

UPD(私は、ルーティングファイルを持っている):

exports.index = function(req, res){ 
    res.render('index', { title: 'index' }) 
}; 

私がチェックし、入力は、ページの読み込み後のコードです。私は著者のアドオン(この記事の最初のリンク)でサイトを開く:

しかし、奇妙なことがあることです。開発者ツールを開きます。サイトのhtmlを編集する - サンプル入力の近くに新しい入力を追加する。名前(およびID)はexample222です。コンソールで行うdo

$('#example222').datetimepicker(); 

彼の入力作品、私のNOT!どのような魔法がそれですか? :)

+0

あなたは、このためのソリューションを見つけますか?私は同じセットアップで同じ問題に直面しています(ノード+ ejs + express) – Vinoth

+0

解決策が見つかりましたか?バグがあるようです。 – spencerthayer

答えて

0

まず、私しかしDOMはそれが$に包まれています(...)とで包ま$ .ready(...)のように振る舞う必要がありますので、間違っているロードされた前に、あなたのスクリプトが実行されたこと。

あなたのコードは、あなたのテンプレートが適用されていないことを意味し、セレクタに一致する任意のDOM要素を見つけられないことを意味いずれかのエラーを取得していない場合。

あなたは(ブラウザで)ソースコードが<input id="dateTimePicker1" class="hasDatepicker"></input>を持っているか、まだEJSテンプレートが含まれていることを確認してくださいすることができます。

次に、あなたがnode.js.でのレンダリングを呼び出す方法を私たちに示してくださいすることができます

EDIT:問題はjQueryコードが実行されなかったことです。 this jsFiddleによって証明として

これは動作します:

<html> 
    <head> 
     <script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js">  </script> 
     <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script> 
     <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js"></script> 
     <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script> 
     <link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"> 
    </head> 
    <body> 
     <input id="dateTimePicker"></input> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#dateTimePicker').datetimepicker(); 
      }); 
     </script> 
    </body> 
</html> 
+0

私は投稿を編集しました。再度読んでください。 – kulebyashik

+0

私の回答を編集しましたが、スクリプトコードは実行されませんでした。 –

関連する問題