bootstrap怎么才能在点击链接时把那条记录的ID传给modal模态框?
请问怎么才能在点击LINK时把那条记录的ID传给模态框呢?链接&a&href=&javascript:void(0);&&class=&jq_link&&rel=&&?php&echo&$val['id'];?&&&link&/a&模态框&div&class=&modal&fade&&id=&Modal&&tabindex=&-1&&role=&dialog&&aria-labelledby=&myModalLabel&&aria-hidden=&true&&
&&&div&class=&modal-dialog&&
&&&&&div&class=&modal-content&&
&&&&&&&div&class=&modal-header&&
&&&&&&&&&button&type=&button&&class=&close&&data-dismiss=&modal&&aria-hidden=&true&&&&/button&
&&&&&&&&&h4&class=&modal-title&&id=&myModalLabel&jq_message&&TITLE&/h4&
&&&&&&&/div&
&&&&&&&div&class=&modal-body&&
&&&&&&&&&form&method=&post&&action=&index.php&id=???这里需要传值&&class=&form-horizontal&&role=&form&&
&&&&&&&&&div&class=&form-group&&
&&&&&&&&&&&label&for=&inputname&&class=&col-sm-2&control-label&&NAME&/label&
&&&&&&&&&&&div&class=&col-sm-8&&&input&type=&text&&name=&name&&id=&inputname&&value=&&&class=&form-control&&&/div&
&&&&&&&&&/div&
&&&&&&&&&div&class=&form-group&&
&&&&&&&&&&&label&for=&inputtel&&class=&col-sm-2&control-label&&TEL&/label&
&&&&&&&&&&&div&class=&col-sm-8&&&input&type=&text&&name=&tel&&id=&inputtel&&value=&&&class=&form-control&&&/div&
&&&&&&&&&/div&&&&&&&&&&
&&&&&&&/div&
&&&&&&&div&class=&modal-footer&&
&&&&&&&&&button&type=&submit&&class=&btn&btn-primary&&SUBMIT&/button&
&&&&&&&/div&
&&&&&&&/form&
&&&&&/div&
&/div&JS&script&
$(document).ready(function()&{
&&$(&.jq_link&).click(function()&{
&&&&var&id&=&$(this).attr('rel');
&&&&$(&#Modal&).modal();
解决方法 1:
$(document).ready(function()&{
&&$(&.jq_link&).click(function()&{
&&&&var&id&=&$(this).attr('rel');
&&&&$(&#Modal&.modal-body&&&form&).attr(&action&,&&index.php?id=&&+&id);
&&&&$(&#Modal&).modal();rails4使用bootstrap的模态框插件，结合ajax做出从弹出框选取内容返回给原页面的效果
rails4使用bootstrap的模态框插件，结合ajax做出从弹出框选取内容返回给原页面的效果
[摘要：1、起首新建一个rails项目，与名为example_modal吧 rails new example_modal 为了应用bootstrap,须要下载bootstrap编译后的CSS、JS战字体文件，中文网地点/getting-started/，解压后把boots]
1、首先新建一个rails项目，取名为example_modal吧
rails new example_modal 为了使用bootstrap,需要下载bootstrap编译后的CSS、JS和字体文件，中文网地址/getting-started/，解压后把bootstrap.min.js放到example_modalvendorassetsjavascripts下，把bootstrap.min.css放到example_modalvendorassetsstylesheets下，把整个fonts文件夹放到example_modalvendorassets下。
然后修改application.js和application.css文件
example_modalappassetsjavascriptsapplication.js
// Read Sprockets README (/sstephenson/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery_ujs //= require bootstrap.min //= require turbolinks //= require_tree .example_modalappassetsstylesheetsapplication.css
* file per style scope.
*= require bootstrap.min
*= require_self
*= require_tree .
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../assets/glyphicons-halflings-regular.eot');
src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../assets/glyphicons-halflings-regular.woff') format('woff'),
url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
2、创建控制器users，带有index页面
rails g controller users index现在可以看到example_modalappviewsusersindex.html.erb和example_modalappcontrollersusers_controller.rb两个文件了。
3、设置项目启动默认页面为这个index页面
打开example_modalconfigroutes.rb，可以看到
Rails.application.routes.draw do
get 'users/index'
... end 添加一行
root 'users#index'最终看到的example_modalconfigroutes.rb如下
Rails.application.routes.draw do
root 'users#index'
get 'users/index'
end这时候可以输入启动服务器命令
rails s启动成功后，在浏览器中输入http://localhost:3000/，应该能看到以下页面
好了，在修改这个页面之前，确定一下目标：做出从弹出框选取内容返回给原页面的效果，那就需要有数据，我决定创建一个名为users的表，并创建一个初始化数据库数据的task任务。
4、新开一个命令窗口，建users表
rails g model user name:string age:integer生成example_modalappmodelsuser.rb文件，继续执行迁移命令
rake db:migrate迁移完成后，users表就建成了。
5、建task任务，初始化数据库
在example_modallibtasks下新建一个文件，取名 sample_data.rake
namespace :db do
desc &Fill database with sample data&
task populate: :environment do
10.times do |index|
User.create!(name:&user#{index}&,age:&#{index+1}&)
end end 执行此任务
rake db:populate此时数据库users表应该有10条数据。
6、数据有了，下面修改index页面，做出基本样式，实现如下效果
点击【选择】后效果
example_modalappcontrollers
class UsersController & ApplicationController
@users = User.all
example_modalappviewsusersindex.html.erb
&div class=&container&& &h1&rails4使用bootstrap的模态框插件，结合ajax做出从弹出框选取内容返回给原页面的效果&/h1& &br/& &br/& &br/& &br/& &br/& &div class=&row&&
&div class=&col-md-1 text-right&&姓名&/div&
&div class=&col-md-2&&
&%= text_field_tag :name %&
&/div& &/div& &div class=&row&&
&div class=&col-md-1 col-md-offset-3&&
&%= link_to &选择&, &#&, class: &btn btn-sm btn-primary&,&data-toggle& =& &modal&, &data-target& =& &#myModal& %&
&/div& &/div& &div class=&row&&
&div class=&col-md-1 text-right&&年龄&/div&
&div class=&col-md-2&&
&%= text_field_tag :age %&
&/div& &/div& &/div&
&!-- Modal --& &div class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog& aria-labelledby=&myModalLabel& aria-hidden=&true&&
&div class=&modal-dialog&&
&div class=&modal-content&&
&div class=&modal-header&&
&button type=&button& class=&close& data-dismiss=&modal& aria-hidden=&true&&×&/button&
&h4 class=&modal-title& id=&myModalLabel&&Modal title&/h4&
&div class=&modal-body&&
&table class=&table table-bordered&&
&th&ID&/th&
&th&姓名&/th&
&th&年龄&/th&
&% @users.each do |user| %&
&tr class=&select& data-user_id=&&%= user.id %&& &
&td&&%= user.id %&&/td&
&td&&%= user.name %&&/td&
&td&&%= user.age %&&/td&
&div class=&modal-footer&&
&button type=&button& class=&btn btn-default& data-dismiss=&modal&&Close&/button&
&button type=&button& class=&btn btn-primary&&选择&/button&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --& &/div&&!-- /.modal --&
7、弹出的选择框中，点击table的行是没效果的，下面实现，点击任意一行，改变该行背景颜色，其他行背景颜色变为默认颜色。
注意这几行代码
&tr class=&select& data-user_id=&&%= user.id %&& &
&td&&%= user.id %&&/td&
&td&&%= user.name %&&/td&
&td&&%= user.age %&&/td&
&/tr&现在就是要做到点击这里，这个js代码写在
example_modalappassetsjavascriptsusers.js.coffee
$(&tr.select&).click -&
$(&tr.select&).css(&backgroundColor&,&white&);
this.style.backgroundColor = &#357ebd&这里需要特别要注意的是，js.coffee 每行代码的缩进，不能不缩进。
效果图如下
8、下一步实现，点击弹出框的【选择】，将当前选中的user的id传给控制器，在控制器中处理，通过传来的id找到user的名字和年龄，然后调用js.erb文件，将值写入index页面。传送id思路是弹出框中添加一个隐藏文本框，位于一个表单中，当点击页面上不同的user行时，会触发js，将user的id值写入隐藏文本框中。点击【选择】时，会提交表单，将隐藏文本框中的值提交。
（1） 将example_modalappviewsusersindex.html.erb中的
&div class=&modal-footer&&
&button type=&button& class=&btn btn-default& data-dismiss=&modal&&Close&/button&
&button type=&button& class=&btn btn-primary&&选择&/button& &/div&
&%= form_tag users_choose_path , remote: true do %&
&div class=&modal-footer&&
&button type=&button& class=&btn btn-default& data-dismiss=&modal&&Close&/button&
&%= hidden_field_tag :user_id,params[:user_id] %&
&%= submit_tag &选择&, class: &btn btn-primary& %&
（2）& 增添choose的路由，root.rb文件中添一行
post 'users/choose'
（3） 控制器中添加action
def choose
user = User.find(params[:user_id])
@name = user.name
@age = user.age
render 'choose_user.js.erb'
（4） 添加点击user行，给隐藏文本框写入id的js代码
$(&#user_id&).val($(this).data(&user_id&));
（5） 添加choose_user.js.erb文件
example_modalappviewsuserschoose_user.js.erb
$(&#name&).val(&&%= @name %&&) //写入名称 $(&#age&).val(&&%= @age %&&)
//写入年龄 $('#myModal').modal('hide'); //关闭弹出框
完成了，当我选择user6后，index页面出现画面
附附附附附附附附附文件
下面我整理一下各个文件
1、 example_modalappcontrollersusers_controller.rb
class UsersController & ApplicationController
@users = User.all
def choose
user = User.find(params[:user_id])
@name = user.name
@age = user.age
render 'choose_user.js.erb'
end end2、 example_modalappviewsusersindex.html.erb
&div class=&container&& &h1&rails4使用bootstrap的模态框插件，结合ajax做出从弹出框选取内容返回给原页面的效果&/h1& &br/& &br/& &br/& &br/& &br/& &div class=&row&&
&div class=&col-md-1 text-right&&姓名&/div&
&div class=&col-md-2&&
&%= text_field_tag :name %&
&/div& &/div& &div class=&row&&
&div class=&col-md-1 col-md-offset-3&&
&%= link_to &选择&, &#&, class: &btn btn-sm btn-primary&,&data-toggle& =& &modal&, &data-target& =& &#myModal& %&
&/div& &/div& &div class=&row&&
&div class=&col-md-1 text-right&&年龄&/div&
&div class=&col-md-2&&
&%= text_field_tag :age %&
&/div& &/div& &/div&
&!-- Modal --& &div class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog& aria-labelledby=&myModalLabel& aria-hidden=&true&&
&div class=&modal-dialog&&
&div class=&modal-content&&
&div class=&modal-header&&
&button type=&button& class=&close& data-dismiss=&modal& aria-hidden=&true&&×&/button&
&h4 class=&modal-title& id=&myModalLabel&&Modal title&/h4&
&div class=&modal-body&&
&table class=&table table-bordered&&
&th&ID&/th&
&th&姓名&/th&
&th&年龄&/th&
&% @users.each do |user| %&
&tr class=&select& data-user_id=&&%= user.id %&& &
&td&&%= user.id %&&/td&
&td&&%= user.name %&&/td&
&td&&%= user.age %&&/td&
&%= form_tag users_choose_path , remote: true do %&
&div class=&modal-footer&&
&button type=&button& class=&btn btn-default& data-dismiss=&modal&&Close&/button&
&%= hidden_field_tag :user_id,params[:user_id] %&
&%= submit_tag &选择&, class: &btn btn-primary& %&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --& &/div&&!-- /.modal --&
3、 example_modalappviewsuserschoose_user.js.erb
$(&#name&).val(&&%= @name %&&) $(&#age&).val(&&%= @age %&&) $('#myModal').modal('hide');
4、 example_modalconfigroutes.rb
Rails.application.routes.draw do
root 'users#index'
get 'users/index'
post 'users/choose' end
5、 example_modalappassetsjavascriptsusers.js.coffee
# Place all the behaviors and hooks related to the matching controller here. # All this logic will automatically be available in application.js. # You can use CoffeeScript in this file: http://coffeescript.org/ $ -&
$(&tr.select&).click -&
$(&tr.select&).css(&backgroundColor&,&white&);
this.style.backgroundColor = &#357ebd&
$(&#user_id&).val($(this).data(&user_id&));注意行首的缩进
6、 example_modallibtaskssample_data.rake
namespace :db do
desc &Fill database with sample data&
task populate: :environment do
10.times do |index|
User.create!(name:&user#{index}&,age:&#{index+1}&)
感谢关注 Ithao123Ajax频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
Swift是Apple在WWDC2014所发布的一门编程语言，用来撰写OS X和iOS应用程序[1]。在设计Swift时．就有意和Objective-C共存，Objective-C是Apple操作系统在导入Swift前使用的编程语言
Swift是供iOS和OS X应用编程的新编程语言，基于C和Objective-C，而却没有C的一些兼容约束。Swift采用了安全的编程模式和添加现代的功能来使得编程更加简单、灵活和有趣。界面则基于广受人民群众爱戴的Cocoa和Cocoa Touch框架，展示了软件开发的新方向。
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。
IThao123周刊感谢本文作者
昵称：Linda
加入时间： 0:00:00
这家伙很懒，虾米都没写
以下内容也很赞哦您的邮件地址：错误详细描述：提交
自强学堂为提供的内容仅用于学习，测试和培训。实例可能为了更容易理解而简化。我们一直对教程，参考手册，在线实例保持修订，但是我们不能保证所有内容全部正确。通过使用本站进行学习随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款和隐私条款。自强学堂是以学习和分享知识为目的，对任何法律问题及风险不承担任何责任。版权所有，保留一切权利。
自强学堂是用
技术开发的站点，托管在ECS
Copyright &
Powered by 自强学堂 All Rights Reserved.
JavaScriptGraphics编程Server SideWeb数据库XMLJavaScript服务器相关XMLHTML 字符CSS浏览器脚本服务器脚本XML 语言