首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Select_tag不会从json响应中获取数据

Select_tag不会从json响应中获取数据
EN

Stack Overflow用户
提问于 2016-06-16 07:03:26
回答 1查看 109关注 0票数 0

问题

请阅读编辑,它有点干净。

select_tag使用Select2不接收/发送ajax请求。

我试图使用ajax为我的select_tag获取数据,因为表中有很多行。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<h3> Ajax send requests but I have Client.all </h3>
<%= invoice_form.collection_select :client_id, Client.all, :id, :name %>

<h3> Ajax not working </h3>
<input id="invoice_seller_id" />

这些标记与Select2库一起使用来替换复选框。

这就是它在浏览器中的样子:

首先,从input生成的<%= invoice_form.collection_select :client_id, Client.all, :id, :name %>发送正确的json请求,甚至得到正确的响应。

但是有信息没有找到结果。

在第二种方法中,浏览器甚至不发送ajax请求。

代码

发票/_form.html.erb

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<h3> Ajax send requests but I have Client.all </h3>
<%= invoice_form.collection_select :client_id, Client.all, :id, :name %>

<h3> Ajax not working </h3>
<input id="invoice_seller_id" />

invoice.js.coffee

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jQuery ->
  $('#invoice_client_id').select2
    theme: 'bootstrap'
    ajax:
      url: '/clients.json'
      dataType: 'json'
      results: (data, page) ->
        { results: $.map(data, (client, i) ->
          {
            id: client.id
            text: client.name
          }
        ) }

    $('#invoice_seller_id').select2
      theme: 'bootstrap'
      ajax:
        url: '/clients.json'
        dataType: 'json'
        results: (data, page) ->
          { results: $.map(data, (client, i) ->
            {
              id: client.id
              text: client.name
            }
          ) }

问题

为什么在第一次输入结果没有插入到select_tag。为什么第二输入不发送任何请求?

我试着重新创造这个:在Rails中使用Select2

编辑1

我只换了一个就把这两个田地换了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <h3> Ajax not working </h3>
  <%= invoice_form.collection_select :seller_id, [], :id, :name %> 

它现在正在发送ajax请求并得到正确的响应,但是不要插入数据来选择选项,仍然显示没有找到任何结果

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-16 08:07:24

Select2只适用于select输入标记。在第二个选项中,您只是在输入上应用select2,这不是select标记,这就是它不能工作的原因。

现在,为什么结果没有显示在select2中。

请注意,select2希望得到以下形式的答复:

[{id: 1,text: 'Option1'},{id: 2,text: 'Option2'}]如果响应与上述格式不同,则需要在客户端使用processResults。你正在尝试做这件事,但似乎你选择了错误的选择。您需要定义processResult,因此下面是执行此操作的脚本。你可以找到更多的细节Select2 Ajax常见问题

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jQuery ->
  $('#invoice_client_id').select2
    theme: 'bootstrap'
    ajax:
      url: '/clients.json'
      dataType: 'json'
      processResults: (data) -> 
        return {
        results: $.map(data, (client, i) ->
          {
            id: client.id
            text: client.name
          }
       )}

我希望这能行。

请注意,当您使用select2的远程选项时,预期您将在服务器端过滤结果,以便select2将显示所有返回的结果。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37862882

复制
相关文章
c#子窗口与父窗口_主窗体控制子窗体的显示
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170914.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/23
2.6K0
WordPress 主题教程 #5:主循环
调用博客日志的主循环(The Loop)是 WordPress 中最重要的 PHP 代码集,几乎所有的页面都会用到它,这也是从零开始创建 WordPress 主题系列教程的第五篇。
Denis
2023/04/15
3280
WordPress 主题教程 #5:主循环
WordPress子比主题版权美化
起因 因为我之前写过butterfly的版权美化 image.png 所以我一直想给子比的版权也做个美化,所以我就开始了紧张的移植(摸鱼)工作 更新日志 最新更新日期:3/29 3/29 更新FontAwesome导致的显示和加载问题 3/18 发布第一版 效果 其中URL颜色是根据主题色调整的! 代码 <head> <style type="text/css"> .post-copyright { box-shadow: 2px 2px 5px; line-height: 2;
小N同学
2022/03/31
8440
WordPress子比主题版权美化
WordPress子主题插件:Child Theme Configurator
Child Theme Configurator(子主题配置器)是一个快速且易于使用的实用程序,允许您分析任何常见问题的主题,创建子主题并自定义它超出自定义器的选项。子主题配置器专为希望直接自定义子主题样式表的 WordPress 用户而设计,可让您轻松识别和覆盖要自定义的确切 CSS 属性。分析器扫描呈现的主题并自动配置您的子主题。它正确设置主题和字体样式表以获得最佳性能,并处理特定于供应商的语法,使您能够无限制地控制子主题的外观和感觉,同时保持父主题不变。
星哥玩云
2022/08/13
6550
使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题
在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以修改一些简单的样式。修改的时候,却发现主题文件这么多,里面掺杂各种 PHP、HTML 代码,让人不知道在哪里修改。
Denis
2023/04/14
1.5K0
使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题
源自:https://elements.envato.com/gliu-creative-wordpress-blog-theme-ETK6QV2
AlexTao
2019/12/13
8.7K2
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题
wordpress子比主题更改首页样式全宽度[美化教程]
在主题目录下“func.php”下面添加下面代码,这是我修改后的“图文封面卡片”小工具
七辰
2023/10/06
1.7K0
wordpress子比主题更改首页样式全宽度[美化教程]
Wordpress 的实用插件与主题推荐
自己使用的一些关于 Wordpress 的插件与主题推荐。(以前爱折腾这些,现在已经转投 Hexo 啦。)
云游君
2021/05/21
9170
Vue子组件与父组件(看了就会)
<font color="red" size=4>另外,组件创建还有两种创建方式:
程序员海军
2022/02/15
1K0
git解决冲突与merge
git上传代码跟其他项目成员上传出现冲突: 我在这边修改了文件a,同事也修改了文件a。同事比我先提交到仓库中,那么我pull代码时就会报错: 而,我又不知道不一样,接着add和commit项目
benny
2018/03/06
2.4K0
git解决冲突与merge
zibll子比主题怎么样?资源类WordPress主题对比日主题哪个较好
zibll子比主题和日主题搭建资源类网站哪个适合?随着自媒体和短视频的兴起,我们原本的图文内容的PC端网站逐渐的流量被稀释甚至有些行业逐渐的被淘汰。对于个人站长而言,是时候需要转型或者是尝试改变流量模式的。最近几年看到有不少的网友站长开始转型做资源型网站。
老蒋
2022/09/23
2.8K0
zibll子比主题怎么样?资源类WordPress主题对比日主题哪个较好
多主复制下处理写冲突(1)-同步与异步冲突检测及避免冲突
如两个用户同时编辑wiki,如图-7。用户1将页面标题从A-》B,且用户2同时将标题从A-》C。每个用户的更改都成功提交到本地主节点。但当异步复制到对方时,发现存在冲突。正常的主从复制则不会出现此问题。
JavaEdge
2022/08/01
1K0
多主复制下处理写冲突(1)-同步与异步冲突检测及避免冲突
解决blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题,并提供了两种解决方案。
奋飛
2019/08/15
3K0
解决子级css float 浮动而父级高度没有自适应导致子级溢出父级的问题
出现问题的代码: .divcss5{ width:500px; border:1px solid #000; padding:10px } .divcss5-lf{ float:left; width:220px; height:100px; background:#000 } .divcss5-rt{ float:right; width:230px; height:100px; background:#
飞奔去旅行
2019/06/13
1.5K0
解决子级css float 浮动而父级高度没有自适应导致子级溢出父级的问题
解决blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题,并提供了两种解决方案。
奋飛
2021/08/30
1.8K0
解决SecurityEnvSDK与SGMain的冲突问题
虽然解决这个问题的方式很简单,但是每次 pod install 后都要做一遍该操作,这就很无语了 。
LinXunFeng
2020/03/20
1.2K0
WordPress子主题怎么保留修改的代码来避免升级覆盖?
WordPress子主题怎么保留修改的代码来避免升级覆盖?每次升级主题总是有人问都修改了什么,因为很多人根据自己的喜好对主题进行了个性化修改,虽然我也作了记录,但具体修改了什么文件以及修改了哪个样式属性还真没办法详细记录。那么如何将主题升级到最新版本,而又能保留自己个性的修改呢?答案很简单,使用WordPress子主题功能,升级后无需再次修改原主题,只需要启用并修改子主题就可以了,下面就以Ality主题为例,创建一个Ality主题的子主题。
主机教程网2bcd.com
2022/11/02
1K0
子组件传对象给父组件_react子组件改变父组件的状态
sendData = () => { let data = ‘1234’; this.props.getData(data); //这个this,props.xxx 后面的xxx是是在父组件那使用的名字; }, 然后可以在render函数后使用这个方法或者另外定义一个事件去触发该方法进行传值,
全栈程序员站长
2022/10/04
2.8K0
vue 父组件调用子组件的方法_vue子组件修改父组件值
我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法
全栈程序员站长
2022/11/09
2K0
vue 父组件调用子组件的函数_vue子组件触发父组件方法
项目里将element-ui的el-upload写成公共组件方便调用,官方的before-upload方法用于处理上传前要做的事,如:比较文件大小,限制文件类型等,通过返回true 或 false 控制是否上传。 当该组件调用父组件方法,并且要能获取到父组件方法的返回值,如何实现?
全栈程序员站长
2022/11/10
3K0

相似问题

Wordpress子主题jQuery与父主题的jQuery冲突

10

WordPress子CSS与父CSS冲突

134

具有冲突代码的wordpress主题上的悬停框

11

父主题到子主题- Wordpress

12

主题与画廊Javascript在Wordpress中的冲突

24
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文