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>
                  <input name="city" readonly=true type=text class="editable" id="city" />
                  
                   
	       </div>

JavaScript

$( document ).ready(function() {
 city
           $.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';
                  }
                                         
            });
			
           $('#city').click(function(){

     var rBtnVal = $(this).val();

     if(rBtnVal == "yes"){
         $("#city").prop("readonly", false); 
     }
     else{ 
         $("#city").prop("readonly", true); 
     }
   });
            
                  
        })