Inline Edits with Bootstrap Editable

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
 <div>
                  <span class="editable" id="city"> intial value </span>
                  <button  id="change">change value</button>
                   
	       </div>

JavaScript

$( document ).ready(function() {
           $.fn.editable.defaults.mode = 'inline';
           $.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
	   
	     $('#city').editable({
                type: 'text',
                name: 'FirstName',
                title: 'enter First Name',
                validate: function(value) {
                    if($.trim(value) == '') 
                      return ' First Name is required';
                    else if($.trim(value).length>30)
                      return 'Only 50 charateres are allowed';
                  }
                                         
            });
			
            
            
            $('#change').click(function(){
              $('#city').editable("setValue","changed value")  
            });
                             
        })