All geek questions in one place

X editable value change does not work dynamically

I have x editable file for bootstrap application. now I have a situation where I need to change the value on my range by clicking the click.value button, but if I click on this x editable range, the previous value is filled in the text box this is my code example

<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 the area of ​​the city is filled with the first value "intial value", and while I click on this interval, a text box appears with the value "intial value", and then, if I press the change button, the range value will be changed to "changed value" 'then then if I click on the span field again, the previous value of 'intial value' is displayed. How can I fix this problem, any help would be appreciated

this is jfiddle link jfiddle

+6
source share
2 answers

To set a new value for an object edited by x, you must call its setValue method.

Documentation here

Demo: JSFiddle

Example:

  $('#change').click(function(){ $('#city').editable('setValue',"changed value"); });
+21
source

Here is your solution. You only need to set the value on the button change. You just need to add this line $('#city').editable('setValue', "changed value", true); to the "#change" button. For more details, refer to this jsfiddle code: http://jsfiddle.net/smvora_4u/epf7frz4/

+1
source

Source: https://habr.com/ru/post/975867/

More articles:


All Articles