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>
2
Answers
Why not just trigger the click right after you make them editable?
https://jsfiddle.net/o6Lfv1kt/
EDIT: Actually, just looked at the docs, you can just do:
https://jsfiddle.net/j1r9ku2z/1/
How about to put your in one function and call that function from Enable button event handler. From disable button just destroy the event.
Fiddler: https://jsfiddle.net/summoncse/x4zLqbp1/