javascript - None of the jstree plugins are functioning -

-

this frustrating problem, 1 cannot seem find documentation for. i'm relatively new jquery (although grasp on developing), , new jstree plugin.

the problem cannot of plugins work. attracted because of drag , drop, context menu, , checkbox functionality, aren't happening. not getting errors, i'm getting no check boxes , default chrome context menu. , can't drag , drop anything.

the jstree populates using ajax: 

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jstree test</title> <link rel="stylesheet" href="styles/style.min.css" /> <script src="scripts/jquery-2.1.4.min.js"></script> <script src="scripts/jstree.min.js"></script> <script>     $(document).ready(function () {         $('#jstreetest').jstree({             'core': {                 'check_callback' : true,                 'data': {                     'url': 'temp/ajax.html',                     'data': function (node) {                         return { 'id': node.id };                     }                 }             },             'plugins' : [ "checkbox", "dnd", "contextmenu"]         });     }); </script>

and mark looks so:

<body>   <form id="form1" runat="server">   <div>       <div id="jstreetest">        </div>   </div>   </form> </body>

the html file ajax.html contains following: 

<ul> <li>test     <ul>         <li>subdir1             <ul>                 <li><a href='#'>file1.txt</a></li>             </ul>         </li>         <li>subdir2             <ul>                 <li>subsubdir1                     <ul>                         <li><a href='#'>file1.txt</a></li>                         <li><a href='#'>file2.txt</a></li>                     </ul>                 <li><a href='#'>file2.txt</a></li>                 <li><a href='#'>file3.txt</a></li>             </ul></li>         <li><a href='#'>file4.txt</a></li>         <li><a href='#'>file5.txt</a></li>     </ul> </li> </ul>

as aside, it's showing folder icon next it, thing don't understand. missing reference??

make sure include css file vastly change way things jstree plugin.

  $(document).ready(function () {          $('#jstreetest').jstree({              'core': {                  'check_callback' : true,                              },              'plugins' : [ "checkbox", "dnd", "contextmenu"]          });      });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>  <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default-dark/style.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/jstree.min.js"></script>  <body>    <form id="form1" runat="server">    <div>        <div id="jstreetest">  <ul>  <li>test      <ul>          <li>subdir1              <ul>                  <li><a href='#'>file1.txt</a></li>              </ul>          </li>          <li>subdir2              <ul>                  <li>subsubdir1                      <ul>                          <li><a href='#'>file1.txt</a></li>                          <li><a href='#'>file2.txt</a></li>                      </ul>                  <li><a href='#'>file2.txt</a></li>                  <li><a href='#'>file3.txt</a></li>              </ul></li>          <li><a href='#'>file4.txt</a></li>          <li><a href='#'>file5.txt</a></li>      </ul>  </li>  </ul>        </div>    </div>    </form>  </body>


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more