Bootstrap Snippet x editable using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
    <script src="https://raw.githubusercontent.com/fooplugins/FooTable/V2/dist/footable.min.js" type="text/javascript"></script>
 
    
    <table class="footable table table-hover">
<thead>
  <tr>
    <th>Wall #</th>
    
    <th data-hide="phone">Wall objects </th>
    <th data-hide="phone,tablet">Appliences</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>
          <span class="badge">1</span> 
          <a id="add_wall_measurements"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add wall measurements: </a>
      </td>
      <td>
          <a href="#" id="add_wall_objects"><span class="glyphicon glyphicon-plus"></span> Add wall objects: </a>
          <div id="wall_objects"></div> 
      </td>
      <td>
          <a href="#" id="add_apliences"><span class="glyphicon glyphicon-plus"></span> Add Appliences: </a>
          <div id="applience_list"></div> 
      </td>
      
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    //turn to inline mode
    
    
    $(document).ready(function() {
     
        
        $.fn.editable.defaults.mode = 'inline';
        $('#username').editable();
        
        $('#username').editable({
        type: 'text',
        pk: 1,
        url: '/post',
        title: 'measurements'
        });
        
        //tooltips
        $("#add_wall_measurements, #w2_t, #w3_t").attr("title",'Click to edit: Width = 120" Height = 96" Angle b/n wall 1 and 2 = 90"').tooltip().editable();
        
        // ===== Communication with server=======//
         //ajax call simulation
       
        // ===== Wall Objects =======//
            $('#add_wall_objects').editable({
                type: 'checklist',    
                source: [
                         {value: 0, text: 'Window'},
                         {value: 1, text: 'Door'},
                         {value: 2, text: 'Obsticle/Soffit'} 
                       ],
                  
                pk: 1,    
                title: 'Select wall objects',
                placement: 'right',
                display: function(value, sourceData) {
                    var $el = $('#wall_objects'),
                        checked, html = '';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"x editable"
Bootstrap 3.3.0 Snippet by etsigankov

Related: See More

Questions / Comments:

"x editable" Bootstrap 3.3.0 Snippet by etsigankov

Related: See More

Questions / Comments:

"x editable"
Bootstrap 3.3.0 Snippet by etsigankov