jquery editable ajax,使用X-editable jQuery库使用来自AJAX请求的数据填充Select2标记输入字段...
我迫切需要JavaScript专家的一些帮助 . 我花了最近7个小时尝试了数百种代码组合,以获得基本的标签选择输入字段,以便与库 x-editable 和 select2 一起使用 .
我正在构建一个项目管理应用程序,它将在弹出窗口模式Div中显示项目任务数据 . 在任务模式中,所有任务字段都可以使用AJAX使用内嵌编辑功能进行编辑 .
我在用:
我已经设置了一个基本的JSFiddle演示来试验这个StackOverflow问题 . 我没有从我的实际应用程序中获得数千行代码,但是我确实将大部分正在使用的第三部分库包含在页面中 . 原因是要确保它们都不会干扰结果 .
The Goal:
在字段上设置 X-editable 和 Select2 ,以允许用户选择并输入 Tags 作为项目任务 .
从后端服务器获取可用的 Tag 条记录,这些记录将返回带有 Tag ID number 和 Tag Name 的JSON响应,并使用此数据填充 Selection2 输入字段以允许用户选择多个标记 .
允许用户也输入新标签,它也会将新标签发布并保存到后端!
当选择标签并单击保存按钮时,它会将所选标签列表ID ID编号保存回数据库 .
Problems:
现在,我在过去7小时内尝试了数百种选项和代码组合 . 我似乎无法使用这个基本功能,我发现的大多数示例似乎都不能正常工作!
在这个库的示例页面上 x-editable http://vitalets.github.io/x-editable/demo-plain.html?c=inline靠近表格中示例的底部,它说 Select2 (tags mode) 这个功能就是我需要的!我只是需要它从AJAX请求加载可用的标签,并且所有文档声称它可以完全没有问题地执行此操作!
它还链接到 Select2 文档,并声称Select2中的所有选项都可以设置和使用,并且位于此处 - https://select2.github.io/options.html
我使用 MockAjax 库来模拟JSFiddle等页面中的AJAX响应进行测试 . 在我的JSFiddle演示中http://jsfiddle.net/jasondavis/Lusbqfhs/我设置了2个MockAjax响应....
$.mockjax({
url: '/getTaskTags',
responseTime: 400,
response: function(settings) {
this.responseText = [
{id: 1, text: 'user1'},
{id: 2, text: 'user2'},
{id: 3, text: 'user3'},
{id: 4, text: 'user4'},
{id: 5, text: 'user5'},
{id: 6, text: 'user6'}
];
}
});
$.mockjax({
url: '/getTaskTagById',
responseTime: 400,
response: function(settings) {
this.responseText = [
{id: 1, text: 'user1'},
{id: 2, text: 'user2'},
{id: 3, text: 'user3'},
{id: 4, text: 'user4'},
{id: 5, text: 'user5'},
{id: 6, text: 'user6'}
];
}
});
他们都应该为我的选择列表返回一个Mock JSON字符串来填充 .
这是我演示的代码......
$(function(){
//remote source (advanced)
$('#task-tags').editable({
mode: 'inline',
select2: {
width: '192px',
placeholder: 'Select Country',
allowClear: true,
//minimumInputLength: 1,
id: function (item) {
return item.CountryId;
},
// Get list of Tags from AJAX request
ajax: {
url: '/getTaskTags',
type: 'post',
dataType: 'json',
data: function (term, page) {
return { query: term };
},
results: function (data, page) {
return { results: data };
}
},
formatResult: function (item) {
return item.TagName;
},
formatSelection: function (item) {
return item.TagName;
},
initSelection: function (element, callback) {
return $.get('/getTaskTagById', {
query: element.val()
}, function (data) {
callback(data);
});
}
}
});
});
现在在演示中,当您单击该字段以选择标签时,它只是保持“加载”并且永远不会得到结果 . 看看控制台,似乎我的MockAjax请求不起作用,但是第二个请求正在工作,所以我不确定我的AJAX请求有什么问题?
如果有人可以帮助我开始工作,我真的可以帮助我,我会非常感激,我整晚都没有睡觉,甚至没有更接近工作的解决方案!请帮我!
谢谢
jquery editable ajax,使用X-editable jQuery库使用来自AJAX请求的数据填充Select2标记输入字段...相关推荐
- jQuery(2) jquery的动画,jquery的ajax,Ajax的全局函数,Jquery的多库共存,Jquery的扩展
文章目录 jQuery(2) jquery的动画(封装了许多的动画方法) 淡入淡出 fadeIn 淡入(display:none) fadeOut 淡出 显示隐藏 show(针对隐藏的元素 displ ...
- ajax中的让渡,jQuery必须掌握的API
这次给大家带来jQuery必须掌握的API,使用jQuery必须掌握的API的注意事项有哪些,下面就是实战案例,一起来看一下. 其中包括jQuery 核心函数和方法.jQuery属性参考手册.jQue ...
- 因为返回有true ajax提示进入错误,jquery ajax中error返回错误解决办法
转自:https://www.jb51.net/article/72198.htm 进入百度搜索此问题,发现有人这么说了一句 Jquery中的Ajax的async默认是true(异步请求),如果想一个 ...
- 流行的AJAX框架对比:jQuery,Mootools,Dojo,Ext JS
来源:http://developer.51cto.com/art/200906/129502.htm 本文介绍了四种流行的AJAX框架,包括简洁的jQuery,面向对象的 Mootools,拥有强大 ...
- Ajax(jQuery封装),表单form提交(Ajax),art-template模板引擎,原生Ajax,XML和JSON,axios,跨域和JSONP,防抖和节流,HTTP协议
目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
- jQuery是一个非常优秀的js库
若有侵权随时可以联系作者删除 jQuery学习目录 一.前言 二.学习目标 三.优点分析 四.jQuery基础知识 (一)jQuery(load和read的区别) (二)jQuery选择器 (1).j ...
- javascript之jQuery:一个轻松编写js的库
以下内容来自廖雪峰的js教程,整理了下作为笔记 1.简介 JavaScript世界中使用最广泛的一个库,我把它理解为轻松编写js的一个库 jQuery能帮我们干这些事情: 消除浏览器差异:你不需要自己 ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- jquery ajax 框架有哪些,jquery框架有哪些?jQuery框架介绍
做web开发的小伙伴们应该是经常会用到jQuery框架的,这是目前最流行的js框架之一,小伙伴们知道基于的jQuery框架都有哪些吗?下面小编就带你了解一下吧. 一.jQuery UI框架 Chico ...
最新文章
- php mysql 星级评分_jQuery+PHP实现星级评分
- win10用什么软件测试硬件,Win10系统下硬件设备检测工具的使用方法
- 使用jenkins自动化打包部署Vue项目。详细教程。
- Delphi 2010 安装及调试
- linux内核tor03,Linux内核x86架构引导协议4(翻译)
- 上传到SAP云平台CloudFoundry上的nodejs应用存储的绝对路径
- 腾讯正式开源高性能Hybrid框架VasSonic!
- 前端性能优化(慕课网笔记)-3-代码优化
- Mac下的Homebrew安装与使用
- mysql查询名字重复四次以上的人名_怎么查询数据库中重复字段的名字
- F轮融资3.6亿美元,Keep能撑起20亿美元的估值吗?
- Prometheus邮件报警设置
- [zt]再谈QQ自动登陆器:提供C#源码下载(下)
- python3 pdf下载无加密_如何实现使用python将pdf文档加密?
- 导出word文档生成docx格式 添加水印
- spring事务的传播行为的讲解(笔记 侵删)
- WC2015 冬眠营滚粗记
- Java 图书馆 管理系统
- CPU和GPU频率波动幅度
- WIN10笔记本偶然会出现插入USB设备的时候报错:无法识别的usb设备,前一个设备不正常......