Search code examples
jquerycsstwitter-bootstrapjeditable

How can I make Jeditable use the Bootstrap button classes for Ok/Cancel?


I know that I can style the "Ok" and "Cancel" buttons created by Jeditable with a css file like this:

form.editable > button {
color : #F00
}

I want Jeditable to use the existing Bootstrap classes btn btn-danger and btn btn-success.

I know I can just copy and paste the CSS from bootstrap into my custom css file but this seems disgusting.

What is the proper way to do this? I have googled around without much success and read the jeditable docs, but the solution is not obvious to me.


Solution

  • I just got interested in this and I found out that it is as simple as this :)

    $('.edit_area').editable('http://www.example.com/save.php', {
         type: 'textarea',
         cancel: '<button class="btn btn-danger" type="cancel" >Cancel</button>',
         submit: '<button class="btn btn-success" type="submit" >Ok</button>'
    });
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//rawgit.com/tuupola/jquery_jeditable/master/jquery.jeditable.js"></script>
    
    <div class="edit_area">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae officiis reprehenderit tempora rerum quaerat sed totam recusandae sint doloremque perspiciatis omnis illum facilis odio perferendis quibusdam sequi ab consectetur repudiandae.</div>