Twitter Bootstrap Question posted in

How to disable by default this function on my page-Twitter bootstrap

So I’m working in this large project, I’m not that into Javascript / Jquery mostly I try to work with plugins since I can’t fully understand JS yet…that’s why probably my question it’s going to be basic or idk so:

In this project, the client want an editable input, so the usual customer can modify or set new data in all the fields, so I’m using this plugin called: X-Editable ([Ex-Editable DOcumentation][2]), the problem is that whenever someone load the page for the first time..it loads the page with the “editable state”, so everyone can edit the page before even clicking a button to enable the editing, so

I let you guys a jsfiddle so you can see my code ([JsFiddle][1])

#1) I want the page to be uneditable by default and jut being editable after I click the button

The other problem that I have is that..the same button does both things, enable and disable the “editable state”, so I want to have two differents buttons one to enable the editing and other to disable the editing.

$(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup'; 
    
    $('#enable').click(function () {
        $('#user .editable').editable('toggleDisabled');
    });  
    
    //make username editable
    $('#username').editable({
                url: '/post',
                title: 'Enter comments',
                rows: 10
    });
    
    //make status editable
    $('#status').editable({
                value: 2,
                    source: [{
                            value: 1,
                            text: 'Active'
                        },
                        {
                            value: 2,
                            text: 'Blocked'
                        },
                        {
                            value: 3,
                            text: 'Deleted'
                        }
                    ]
    });
});
   <!-- bootstrap -->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  

    <!-- x-editable (bootstrap version) -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
    
    <!-- main.js -->
    <script src="main.js"></script>


<div class="container" id="user">

      <h1>Test editable input text</h1>

      <div id="user">
        <span>Username:</span>
        <a href="#" id="username" data-type="textarea" data-placement="bottom" data-title="Enter username"
          class="editable editable-click editable-empty">superuser</a>
      </div>
      
      <div>
        <span>Status:</span>
        <a href="#" id="status"></a>


      </div>

      <button id="enable" class="btn btn-default">enable / disable</button>
Tags:

2

Answers


  1. 0

    Why not just trigger the click right after you make them editable?

    https://jsfiddle.net/o6Lfv1kt/

    $('#enable').click(function () {
    $('#user .editable').editable('toggleDisabled');
}).trigger('click');

    EDIT: Actually, just looked at the docs, you can just do:

    https://jsfiddle.net/j1r9ku2z/1/

    $('#username').editable({
            url: '/post',
            title: 'Enter comments',
            rows: 10,
            disabled: true
});
    Login or Signup to reply.
  2. 0

    How about to put your in one function and call that function from Enable button event handler. From disable button just destroy the event. 

    $(document).ready(function() {
  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'popup';

  $('#enable').click(function() {
    edit();
  });

  $('#disable').click(function() {

    $('#user .editable').editable('destroy');
  });

  function edit() {
     $('#username').editable({..});
     $('#status').editable({...});
  }
});

  <button id="enable" class="btn btn-default">enable</button>
  <button id="disable" class="btn btn-default">disable</button>

    Fiddler: https://jsfiddle.net/summoncse/x4zLqbp1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search