有没有人成功使用ajax 使x-editable与select2一起工作？
我已经成功使用ajax请求填充自动完成,但是当用户选择一个选项时,x-editable链接读取"空"onblur.
我的代码如下:
<a id='elem' data-type='select2'></a>
<script>
$('#elem').editable({
select2: {
placeholder:'provide a name',
allowClear: true,
minimumInputLength: 1,
query: function(query){
$.ajax({
url: '/usage/users',
dataType: 'json',
data: {
full_name: query.term,
select: ['id', 'first_name', 'last_name', 'middle_name']
}
}).done(function(data){
results = []
for (i in data)
results.push({
text: data[i].full_name,
id: data[i].id
});
query.callback({results:results});
});
}
}
});
</script>
我需要向集合添加新项目,使用ngrepeat呈现并使用xeditable使其自动编辑.
顺便说一下,我正在使用"手动触发"方法进行xeditable.
这是HTML
<h4>Angular-xeditable demo</h4>
<div ng-app="app" ng-controller="Ctrl" style="margin: 50px">
<div class="btn btn-default" ng-click="addNew()">+</div>
<ul>
<li ng-repeat="item in array | orderBy:'-value'">
<a href="#" e-form="itemForm" editable-text="item.field">{{ item.field }}</a>
<i ng-show="!itemForm.$visible" ng-click="itemForm.$show()">edit</i>
</li>
</ul>
</div>
在这里控制器:
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $filter) {
$scope.array = [
{value: 1, field: 'status1'},
{value: 2, field: 'status2'},
{value: 3, field: 'status3'},
{value: 4, field: 'status4'}
];
$scope.addNew = function(){
$scope.array.push({value:$scope.array.length+1, field: 'enter text here'});
//MAKE IT EDITABLE???????? …我嵌入了x-editable:
在HTML中:
<a class='doc_title editable' id='doc_title_12345' data-name="doc[title]" data-title="Enter doc title" data-type="text" data-url='/docs/12345' href='#doc_title_12345'>My Document<a>
在js中:
// turn to inline mode
$.fn.editable.defaults.mode = 'inline';
// turn on editable on title
$('.doc_title.editable').editable();
我可以在浏览器中编辑,但是当我点击时save没有任何反应(我的意思是我看到了新的值,但它没有通过AJAX请求发送到服务器)
可能有什么不对？
在我的应用程序中,我有一个dataTable来显示来自db的记录,我正在尝试使用x-editable编辑记录并且它正常工作.但问题是,如果提交的数据未成功更新到数据库中,我想显示错误消息.
我试过'success:'但它在提交表单后触发了无论数据是否到达db,但是我想在控制器返回true时触发成功.
谢谢
我在我的项目中使用角度x可编辑.http://vitalets.github.io/angular-xeditable/#editable-row
除验证错误显示外,任何工作都正常.这是我的HTML模板:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Width</th>
<th>Length</th>
<th>Sheets quantity</th>
<th>Low price</th>
<th>High price</th>
<th>Currency</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="material in sheetMaterials">
<td>
<span editable-text="material.name" e-name="name" e-form="form" e-required>
{{ material.name }}
</span>
</td>
<td>
<span editable-text="material.width" e-name="width" e-form="form" e-required>
{{ material.width }}
</span>
</td>
<td>
<span editable-text="material.length" e-name="length" e-form="form" e-required>
{{ material.length }}
</span>
</td>
<td>
<span editable-text="material.sheets" e-name="sheets" e-form="form" e-required>
{{ material.sheets }}
</span>
</td>
<td>
<span editable-text="material.priceLow" e-name="priceLow" e-form="form" e-required>
{{ material.priceLow }}
</span>
</td> …我有以下几个绑定多个锚元素与类'团队'是x可编辑的select2输入.每个a.team都有一个不同的数据源(传递给Web服务的ID不同,以便返回适用的团队列表),但不幸的是,一旦绑定了第一个a.team,就会使用该数据源URL对于页面上的所有后续a.team输入(因此,错误的团队列表将绑定到每个后续的x-editable select2输入).
是否可以"重置"select2的data属性,以便它尊重每个a.team元素的每个数据源？或任何其他解决方案？
$('a.team').editable({
ajaxOptions: {
dataType: 'json',
type: 'POST'
},
emptytext: 'TBD',
placement: 'bottom',
success: function (response, newValue) {
return editableResponse(response, newValue);
},
select2: {
allowClear: true,
placeholder: 'Select a team',
width: '200px',
id: function (item) {
return item.id;
},
ajax: {
dataType: 'json',
results: function (data, page) {
return { results: data };
}
},
}
});
多个a.team锚定在页面上,如下所示:
<a href="#" class="ur-team label label-inverse" data-type="select2" data-pk="@match.Id" data-source="@Url.Action("GetTeams", "Teams", new { scheduleId = match.ScheduleId })" data-value="@match.AwayTeamId" data-text="@match.AwayTeam" data-name="away" data-title="Update away …如果选中了另一个复选框,我希望显示一个复选框,但只在编辑表单时才显示此复选框.由于模型在编辑时没有得到更新,因此我不能ng-show根据模型的值来选择第二个复选框.
tl; dr:在编辑表单中获取xeditable复选框的值
这是我目前正在使用的html:
<div class="col-xs-1 pad-xs text-center">
<span editable-checkbox="field.left">
<span class="fa fa-check" ng-if="field.left"></span>
</span>
</div>
<div class="col-xs-1 pad-xs text-center">
<span editable-checkbox="field.right" ng-show="~~here~~">
<span class="fa fa-check" ng-if="field.right"></span>
</span>
</div>
我可以添加e-ng-change到第一个复选框以确定更改,但我无法正确检索值.
我有一个x-editable输入我的bootstrap应用程序,我用来编辑用户名.现在我需要使用jquery.maskedinput.min.js来获取蒙版格式,同时我输入文本框,当我点击跨度时,正如x-editable中那样.这是我的示例html代码
<div id="sZip" class="profile-info-value ">
<span class="editable" id="Dob">dob</span>
</div>
我通过应用这样的j查询获得了x editable
$('#zip').editable({
type: 'text',
name: 'zip',
tpl:' <input type="text" id ="zipiddemo" class="form-control input-sm dd" style="padding-right: 24px;">'
});
它工作正常现在我需要使该文本框可屏蔽,但当我调用这样的蒙版输入函数时
$(".dd").mask("99999-?9999");
它不工作,我不知道确切的原因.任何帮助将不胜感激
x-editable具有option()用于设置新选项的方法. params是其中一个选项,碰巧是一个对象,而不是替换params为一个新对象,我只想添加一个属性到现有params对象.以下是我的尝试,但我无意中覆盖params并且没有按照需要添加新属性.
$(function() {
$('#name').editable({
url: '/echo/json/',
pk: 123,
params:{a:1,b:2}
})
.on('shown', function(e, editable) {
editable.option('params', {c:3});
});
});
这是我的代码
<span editable-select="item.text" e-ng-options="p.id as p.name for p in products" e-form="rowform"
onbeforesave="checkName($data)" e-required e-name="name"
e-onChange="scopeFunction($data)">
{{ showProductName(item.text) || 'Enter Name of a product' }}
</span>
是否可以在e-onChange中访问控制器的$ scope？
如果我输入e-onChange ="scopeFunction(data)",则会抛出错误"ReferenceError:scopeFunction not defined"
我想要的是在选择一个新值后能够改变另一个字段的值.
x-editable ×10
angularjs ×4
javascript ×4
jquery ×3
ajax ×1
codeigniter ×1
datatable ×1
html ×1
maskedinput ×1
ng-repeat ×1
wysiwyg ×1