x редактируемое изменение значения динамически не работает

у меня есть редактируемый файл x для приложения начальной загрузки. теперь у меня есть ситуация, когда мне нужно изменить значение в моем диапазоне нажатием кнопки. Значение меняется, но если я нажму на этот x редактируемый диапазон, предыдущее значение заполняется в текстовом поле, это мой пример кода

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Patient portal</title>
             <meta name="description" content="3 styles with inline editable feature" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
            <link rel="stylesheet" href="assets/css/bootstrap-editable.css" />

</head>

<body ><!-- #section:basics/navbar.layout -->
       <div>
              <span class="editable" id="city"> intial value </span>
              <button  id="change">change value</button>

       </div>
            <script type="text/javascript">
        window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
    </script>
    <script src="assets/js/bootstrap.min.js"></script>
            <script src="assets/js/x-editable/bootstrap-editable.min.js"></script>
    <script src="assets/js/x-editable/ace-editable.min.js"></script>

    <!-- inline scripts related to this page -->

    <script type="text/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>";
   $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
                                        '<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>'; 
     $('#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').text("changed value")  
        });

    })

   </script>

</body>

here city span is populated with 'intial value' first and while i am click on that span a text box will appear with value 'intial value' ,then if i click on change button span value will be changed to 'changed value'.then if i click on the span again text box is showing the previous value 'intial value' .how can i fix this issue any help will be appreciated

это ссылка jfiddle jfiddle


jquery twitter-bootstrap x-editable
person abhi    schedule 26.09.2014    source источник
comment
@divakar я добавил ссылку jfiddle   -  person abhi    schedule 26.09.2014

Ответы (2)


arrow_upward
29
arrow_downward

Чтобы установить новое значение для редактируемого объекта x, вы должны вызвать его метод setValue.

Документация здесь

Демонстрация: JSFiddle

Пример:

    $('#change').click(function(){
      $('#city').editable('setValue',"changed value");
    });
person Mysteryos    schedule 26.09.2014

arrow_upward
1
arrow_downward

Вот ваше решение. Вам нужно только установить значение при изменении нажатия кнопки. Вам нужно только добавить эту строку $('#city').editable('setValue', "changed value", true); при нажатии кнопки «#change». Для более подробной информации обратитесь к этому моему коду jsfiddle: http://jsfiddle.net/smvora_4u/epf7frz4/

person Sandip Vora    schedule 26.09.2014