"x editable"
Bootstrap 3.3.0 Snippet by jefer23

<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> </tr> <tr><td><span class="badge">2</span> <span id="w2_t">w:120; h:96; a:90</span></td><td>door(w:36;h:86;)</td><td>dishwasher, sink</td></tr> <tr><td><span class="badge">3</span> <span id="w3_t">w:120; h:96; a:90</span></td><td>soffit(w:12;h:12;d:12 along the wall)</td><td>refrigerator(standard w: 36" h:71"</td></tr> </tbody> </table>
//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 = ''; if(!value) { $el.empty(); return; } checked = $.grep(sourceData, function(o){ return $.grep(value, function(v){ return v == o.value; }).length; }); $.each(checked, function(i, v) { html+= '<li>'+$.fn.editableutils.escape(v.text)+'</li>'; }); if(html) html = '<ul>'+html+'</ul>'; $el.html(html); } }); // ===== Wall Objects =======// // ===== Appliences =======// $('#add_apliences').editable({ type: 'checklist', source: [ {value: 0, text: 'Sink'}, {value: 1, text: 'Dishwasher'}, {value: 2, text: 'Range'}, {value: 3, text: 'Cooktop'}, {value: 4, text: 'Hood'}, {value: 5, text: 'Microwave'}, {value: 5, text: 'Refrigerator'}, ], pk: 1, title: 'Select wall objects', placement: 'right', display: function(value, sourceData) { var $el = $('#applience_list'), checked, html = ''; if(!value) { $el.empty();return;} checked = $.grep(sourceData, function(o){ return $.grep(value, function(v){ return v == o.value; }).length; }); $.each(checked, function(i, v) { html+= '<li>'+$.fn.editableutils.escape(v.text)+'</li><div id="'+$.fn.editableutils.escape(v.text)+'"></div>'; }); if(html) html = '<ul>'+html+'</ul>'; $el.html(html); } }); function make_appliences_editable(applience){ //alert("applinece = " + applience); switch (applience) { case "Range": var html; $("#Range").html('<ul><li>Type: <a href="#" data-type="select" id="range_type"></a></li><li>Size: <a href="#" data-type="select" id="range_size"></a></li></ul>'); var sources = { 1: [{value: 24, text: 24}, {value: 30, text: "30 standard"},{ value:33, text:33},{value:36, text:36},{value:"sustom",text:"custom"}], 2: [{value: 24, text: 24}, {value: 30, text: "30 standard"},{ value:33, text:33},{value:36, text:36},{value:"sustom",text:"custom"}] }; $('#range_type').editable({ url: '/post', pk: 1, source: [{value: 1, text: 'Gas'}, {value: 2, text: 'electric'}], title: 'Select type of range', success: function(response, newValue) { $('#range_size').editable('option', 'source', sources[newValue]); $('#range_size').editable('setValue', null); } }); $('#range_size').editable({ url: '/post', pk: 1, title: 'Select Range Size', sourceError: 'Please, select range type first' }); break; case 1: day = "Monday"; break; } }; // ===== appliences =======// $('.footable').footable(); }); //end doc ready

Related: See More


Questions / Comments: