我正在尝试在显示之前更改x-editable源数据,以便即使源更改,我的下拉菜单条目也始终保持新鲜.
这是一个解释的链接:http://jsfiddle.net/XN7np/3/
// my source that can change over time
var source = [{'value': 1, 'text': 'fine'}, {'value': 2, 'text': 'bad'}];
$('#my_select').editable({
'mode' : 'inline',
'source': source,
});
$('#my_select').on('shown', function(ev, editable) {
// now changing my source just before dropdown is shown
source = [{'value': 1, 'text': 'GOOD'}, {'value': 2, 'text': 'FU'}];
//$(editable).editable('option', 'source', source); NOT WORKING
//$('#my_select').editable('option', 'source', source); NOT WORKING
//$(this).editable('option', 'source', source); NOT WORKING
});
任何的想法？
基本上我试图使用ajax概念来玩编辑功能.
大家都知道,我现在处于起步阶段,现在我从这个网址下载了一些代码. http://vitalets.github.io/x-editable/docs.html
我的代码在这里
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Edit using PHP</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-editable.css" rel="stylesheet">
<script src="jquery-2.0.3.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-editable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#username').editable({
type: 'text',
url: 'post.php',
title: 'Enter username'
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost", "root", "password") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$result = mysql_query("SELECT * FROM books") or die(mysql_error());
?>
<div style="margin-top:100px;margin-left:40px;">
<?php while($row = mysql_fetch_array( $result )) { ?>
<a href="#" data-pk="<?php echo $row['book_id']; ?>" id="username"><?php echo $row['book_name']; …我最近在django项目中添加了x可编辑的功能。我有工作来填充组合框并提交我的选择。它保存到数据库，一切正常。但是我有一个div我想在成功提交/发布时进行更新。
在source:下面的行中，我可以指定成功获取组合框值后发生的情况。（success: function(data)....etc）
成功执行POST之后，我无法弄清楚该如何做。
Javascript（混有一些django）：
$('#issueResponse').editable({
disabled: true,
type: 'select',
url: '../ajax/post/issueresponse',
params: {
csrfmiddlewaretoken: '{{ csrf_token }}',
},
pk: {{ issue_obj.pk }},
{% if issue_obj.fk_issueresponseTypeName.id == null %}
//Do nothing
//Do not include value: variable if existing value is set!
{% else %}
value: {{ issue_obj.fk_issueresponseTypeName.id }}, //value = the default value (id) of the combobox
{% endif %}
showbuttons: true,
source: function() {
var result;
$.ajax({
url: '../ajax/get/responses', …我试图使用editable("destroy")打开和关闭xeditable.Xeditable关闭但不会重新打开.该函数如下所示:
$("#changeType").on("change", function () {
switch ($(this).prop("checked")) {
case true:
$("#status").editable("destroy");
$("#status").editable({
showbuttons: false,
onblur: 'ignore',
mode: 'inline',
send: 'never',
success: function (params) {
return false;
}
}).editable('show');
break;
case false:
("#status").editable("destroy");
("#status").editable();
break;
};
});
请看我的jsfiddle http://jsfiddle.net/ykay/vdoz07qz/3/
我正在使用x-editable,并想知道如何使用jquery和ajax填充我的select元素.
[编辑 - 为清晰起见]
这是我的代码:
jQuery(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'popup';
var getSource = function() {
var url = "/api/rpc/payments/status_options";
$.ajax({
type: 'GET',
async: true,
url: url,
dataType: "json",
success: function(responseObject){
}
});
};
//make status editable
$('.payments-click').editable({
type: 'select',
title: 'Select status',
placement: 'right',
value: 2,
source: getSource()
/*
//uncomment these lines to send data on server
,pk: 1
,url: '/post'
*/
});
});
我想获得消息来源:
source: getSource()
从函数但不是100%确定如何从Ajax调用返回数据.
我使用bootstrap 3和bootstrap-table.我想在这个例子中使用'tag'模式.
当我使用select2版本3.4.4(像在x可编辑的示例中)我的代码工作,但当我想使用最新版本4.0.0时,我的代码不起作用.
我收到错误消息:
未捕获错误:没有select2/compat/inputData
我试图用select2.full.js替换select2.js,但在这种情况下,可编辑框为空.
如何使可编辑单元格与最新版本的select2兼容？
HTML
<table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
<th data-field="name" data-editable="true">Name</th>
<th data-field="stargazers_count" data-editable="true">Stars</th>
<th data-field="forks_count" data-editable="true">Forks</th>
<th data-field="description" data-editable="true">Description</th>
</tr>
</thead>
<tbody>
<tr><td>ala</td><td>ele</td><td class="tag" data-toggle="manual" data-type="select2" data-value="na, an, sd">na,an,sd</td><td>asd</td></tr>
<tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
<tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
</tbody>
</table>
JavaScript的
$.fn.editable.defaults.mode = 'inline';
$('table').bootstrapTable({
editable: true
});
console.log($('.tag'));
var tagCells = $('.tag');
$(tagCells).each(function() {
var tags = …twitter-bootstrap jquery-select2 x-editable twitter-bootstrap-3 bootstrap-table
我有一个问题,当我在我自己的项目中尝试x-editable提供的示例代码时:当我尝试在我自己的应用程序中的JSFiddle中完美运行的代码时(只有像控制器名称这样的小修改),我得到了此错误消息:
Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required=""> angular.js:11707:18
Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses"> angular.js:11707:18
Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups"> angular.js:11707:18
Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-text="user.name" …我想了解在我的CodeIgniter第一个项目中使用x-editable.我试图阅读x-editable docs,但我也是JavaScript的初学者,所以我无法理解
我制作简单的控制器来从JavaScript收集数据,但我没有完成它或数据库中没有更新的数据.
$('#username').editable({
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
如何在控制器或模型中提交数据以处理数据库更新查询
我想将从x-editable提交的数据传递给模型以在数据库中更新它.
当焦点更改为其他内容时,如何防止关闭x-editable输入框的默认行为？
我的要求是保持输入框打开,直到点击勾选或交叉按钮.
我正在使用这个x-editable库,它工作得非常好.但我还有一个问题.
在这个可编辑x的页面中,在使用CDN部分中,您可以看到类似这样的内容
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
我测试了一些例子并且它有效.似乎以上两行指示浏览器从http://cdnjs.cloudflare.com获取css和js文件.我的问题是:http://和//这里有什么区别.
x-editable ×10
javascript ×5
jquery ×4
ajax ×2
angularjs ×1
codeigniter ×1
datagrid ×1
django ×1
html ×1
mysql ×1
php ×1