代码之家 › 专栏 › 技术社区 › mayorsanmayor

使用jquery ajax获取rails check_box_标记中复选框的值

ajax ruby-on-rails jquery

mayorsanmayor · 技术社区 · 6 年前

我有这个表单表单的代码如下:

.form-group.form-item.row
=hidden_field_tag“test_method_id”,@test_method.id,id:'test_method_id'
CLS-SM-3
%标签签名标题
=text_field_tag'签名标题',nil,class:'表单控制',placeholder:'输入签名标题'
CLS-SM-3
%标签添加所需的证书类型
=collection_select:signature_requirement,:certificate_id,@certificates,:id,:name,selected:@test_method.certificate_id,include_blank:“select certificate type”,class:“form control select2 multi-select2”,multiple:“multiple”

COL-SM—2
%label.small强制签名
.表单检查.mt-2.文本中心
=check_box_tag'必选','必选',false,class:'表单检查输入'
COL-SM—2
%label.small在报告中显示签名
.表单检查.mt-2.文本中心
=check_box_tag'include_in_report'、'include_in_report'、false、class:'表单检查输入'
COL-SM—2
.icon.text-中心
%i create-signature-requirement-btn.fa.fa-plus-circle.add-icon
< /代码> 

主要关注的是复选框,我想把这个值发送到Rails,但是它们没有传递给参数,我不知道为什么。

阅读一些StackOverflow答案和文档,但我找不到正确的解决方案。

如何获得要传递给Rails的复选框的值,取消选中该复选框(在Ajax成功时),然后在附加到表后选中它?

下面是代码,它获取了当前附加到表中的标题和证书类型的值。

$('create signature requirement btn').on('click',function(event)'{
event.preventDefault();

let test method id=$('test_method_id').val();
让signatureTitle=$('signature_title').val();
let certificate ids=$('signature_requirement_certificate_ids').val();

$Ajax({
网址:
'/settings/test_methods/'+testmethodid+'/add_signature_requirement',
datatype:'json',
方法:“POST”,
数据:{
签名要求:{
签名标题:签名标题,
证书ID:certificate ids
}
}
成功:函数(数据){
console.log(数据);
附录签名要求(数据);
$('签名_标题').val('');
$('签名\要求\证书\ ID')
Var(空)
.trigger(“更改”);
}
(});
(});
< /代码> 

这是AppendSignatureRequirement()的代码


函数AppendSignatureRequirement(record){
行=$('签名_要求'+记录['id']);
文本=$('签名要求证书ID')。选择2(“数据”);
var html
'T&Gt';+
非空(记录['签名\u标题'])。+
'lt/t/gt;'+
'T&Gt';+
从多重选择中提取文本(文本)+
'lt/t/gt;'+
'T&Gt';+
“<a class='mr-2'href='javascript:EditSignatureRequirement(”“+
记录[ ID ] +
“”和“+”
“<i class='fa fa pencil text secondary'aria hidden='true'数据切换='tooltip'title='edit'></i>”“+
'l/a/gt';+
“<a href='javascript:DeleteSignatureRequirement(”“+
记录[ ID ] +
“”和“+”
“<i class='fa fa trash text danger'aria hidden='true'数据切换='tooltip'title='delete'></i>”“+
'l/a/gt';+
'& lt/td& gt;
如果(!)行,长度){
row=$('签名_要求').append(
“<tr id='signature_requirement_uu”+record['id']+”'>“+html+'</tr>”
;
}否则{
行。
row.append(html);
}
}
< /代码> 

这是我的数据库表:

=>signatureRequirement(id:integer,signature_title:string,mandatory:integer,include_in_report:integer,test_method_id:integer,created_at:datetime,updated_at:datetime)
< /代码> 

这是表的代码,显示值:

.col-sm-10
.表-响应.mt-5
%表.table.table-hover.table-valign-middle
%AD
%TR
第%标题
%th证书类型
%强制性
%在报告中显示
第%行动
%t车身签名要求
-@测试方法.签名要求.每个DO签名要求|
%tr:id=>“签名要求签名要求.id”
%TD
=签名\要求.签名\标题
%TD
-签名证书。每个DO证书|
%span.badge.badge-pill.badge-primary/主要
=证书名称
%TD
%a.mr-2:href=>“javascript:EditSignatureRequirement(签名要求.id)”
%i.fa.fa pencil.text secondary“aria hidden”=>“真”,“数据切换”=>“工具提示”,“标题”=>“编辑”
%a:href=>“javascript:DeleteSignatureRequirement(signature_requirement.id)”
%i.fa.fa垃圾桶。文本危险“aria hidden”=>“真”,“数据切换”=>“工具提示”,“标题”=>“删除”
< /代码> <
表单的代码如下:

.form-group.form-item.row
   = hidden_field_tag "test_method_id", @test_method.id, id: 'test_method_id'
   .col-sm-3
     %label Signature Title
      = text_field_tag 'signature_title', nil, class: 'form-control', placeholder: 'Enter Signature Title'
   .col-sm-3
     %label Add Required Certificate Types
      = collection_select :signature_requirement, :certificate_ids, @certificates, :id, :name, { selected: @test_method.certificate_ids, include_blank: "Select Certificate Type" }, { class: "form-control select2 multi-select2", multiple: "multiple" }

   .col-sm-2
     %label.small Mandatory Signature
     .form-check.mt-2.text-center
       = check_box_tag 'mandatory', 'mandatory', false, class: 'form-check-input'
   .col-sm-2
     %label.small Show Signature in Report
     .form-check.mt-2.text-center
       = check_box_tag 'include_in_report', 'include_in_report', false, class: 'form-check-input'
   .col-sm-2
     .icon.text-center
       %i#create-signature-requirement-btn.fa.fa-plus-circle.add-icon


主要关注的是复选框,我想把这个值发送到Rails,但是它们没有传递给参数,我不知道为什么。

阅读一些StackOverflow答案和文档,但我找不到正确的解决方案。

如何获得要传递给Rails的复选框的值,取消选中该复选框(在Ajax成功时),然后在附加到表后选中它?

下面是代码,它获取了当前附加到表中的标题和证书类型的值。

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();

    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    $.ajax({
      url:
        '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
      dataType: 'json',
      method: 'POST',
      data: {
        signature_requirement: {
          signature_title: signatureTitle,
          certificate_ids: certificateIds
        }
      },
      success: function(data) {
        console.log(data);
        appendSignatureRequirement(data);
        $('#signature_title').val('');
        $('#signature_requirement_certificate_ids')
          .val(null)
          .trigger('change');
      }
    });
  });


这是appendSignatureRequirement()功能:

function appendSignatureRequirement(record) {
  row = $('#signature_requirement_' + record['id']);
  texts = $('#signature_requirement_certificate_ids').select2('data');
  var html =
    '<td>' +
    non_null(record['signature_title']) +
    '</td>' +
    '<td>' +
    extractTextFromMultiSelect(texts) +
    '</td>' +
    '<td>' +
    "<a class='mr-2' href='javascript:editSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-pencil text-secondary' aria-hidden='true' data-toggle='tooltip' title='Edit'></i>" +
    '</a>' +
    "<a href='javascript:deleteSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-trash text-danger' aria-hidden='true' data-toggle='tooltip' title='Delete'></i>" +
    '</a>' +
    '</td>';
  if (!row.length) {
    row = $('#signature_requirements').append(
      "<tr id='signature_requirement_" + record['id'] + "'>" + html + '</tr>'
    );
  } else {
    row.empty();
    row.append(html);
  }
}


这是我的数据库表:

 => SignatureRequirement(id: integer, signature_title: string, mandatory: integer, include_in_report: integer, test_method_id: integer, created_at: datetime, updated_at: datetime)


这是表的代码,显示值:

    .col-sm-10
      .table-responsive.mt-5
        %table.table.table-hover.table-valign-middle
          %thead
            %tr
              %th Title
              %th Certificate Types
              %th Mandatory
              %th Show in Report
              %th Actions
          %tbody#signature_requirements
            - @test_method.signature_requirements.each do |signature_requirement|
              %tr{:id => "signature_requirement_#{signature_requirement.id}"}
                %td
                  = signature_requirement.signature_title
                %td
                  - signature_requirement.certificates.each do |certificate|
                    %span.badge.badge-pill.badge-primary
                      = certificate.name
                %td
                  %a.mr-2{:href => "javascript:editSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-pencil.text-secondary{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Edit"}
                  %a{:href => "javascript:deleteSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-trash.text-danger{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Delete"}

2 回复 | 直到 6 年前

stalinrajindian 6 年前

请尝试以下代码获取选中的复选框值。

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();
    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    let mandatory = $("input[name='mandatory']:checked") ? 1 : 0;

    let include_in_report= $("input[name='include_in_report']:checked") ? 1 : 0;

    $.ajax({
    url:
            '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
            dataType: 'json',
            method: 'POST',
            data: {
            signature_requirement: {
            signature_title: signatureTitle,
                    certificate_ids: certificateIds,
                    mandatory: mandatory,
                    include_in_report: include_in_report,
            }
            },
            success: function(data) {
            console.log(data);
            appendSignatureRequirement(data);
            $('#signature_title').val('');
            $('#signature_requirement_certificate_ids')
                    .val(null)
                    .trigger('change');
            }
    });
    });

mayorsanmayor 6 年前

我能解决这个问题。多亏了这个 answer for getting me started.

这是完整的实现:

从多选框中提取文本并从映射函数生成的数组中删除逗号

函数ExtractTextFromMultiSelect(record){
如果(record.length==0){
返回“”;
}否则{
让文本=$.map(记录,函数(obj){
跨度=
'<span class=“Badge Badge Pill Badge Primary”>'+obj.text+'</span>';
返回跨度;
(});
返回文本。join(“”);
}
}
< /代码> 

使用HTML的checked属性,选中复选框(如果选中),不选中则为空。

函数ExtractMandatoryCheckbox()。{
let mandatory=$('input[name=“mandatory”]').prop('checked')
“支票
无效;
return`<div class=“表单检查文本中心”>
<input type=“checkbox”class=“form check input mb-4”$必选>
&;
}

函数ExtractShowInReportCheckbox()。{
让include_in_report=$('input[name=“include_in_report”]').prop('checked')
“支票
无效;
return`<div class=“表单检查文本中心”>
<input type=“checkbox”class=“form check input mb-4”$在报告中包含>
&;
}
< /代码> 

追加到表

函数AppendSignatureRequirement(record){
行=$('签名_要求'+记录['id']);
文本=$('签名要求证书ID')。选择2(“数据”);
var html
'T&Gt';+
非空(记录['签名\u标题'])。+
'lt/t/gt;'+
'T&Gt';+
从多重选择中提取文本(文本)+
'lt/t/gt;'+
'T&Gt';+
ExtractMandatoryCheckbox()。+
'lt/t/gt;'+
'T&Gt';+
ExtractShowInReportCheckbox()。+
'lt/t/gt;'+
'T&Gt';+
“<a class='mr-2'href='javascript:EditSignatureRequirement(”“+
记录[ ID ] +
“”和“+”
“<i class='fa fa pencil text secondary'aria hidden='true'数据切换='tooltip'title='edit'></i>”“+
'l/a/gt';+
“<a href='javascript:DeleteSignatureRequirement(”“+
记录[ ID ] +
“”和“+”
“<i class='fa fa trash text danger'aria hidden='true'数据切换='tooltip'title='delete'></i>”“+
'l/a/gt';+
'& lt/td& gt;
如果(!)行,长度){
row=$('签名_要求').append(
“<tr id='signature_requirement_uu”+record['id']+”'>“+html+'</tr>”
;
}否则{
行。
row.append(html);
}
}
< /代码> 

创建并插入数据库(提取复选框值,然后在成功时取消)

$('create signature requirement btn').on('click',function(event)'{
event.preventDefault();

let test method id=$('test_method_id').val();
让signatureTitle=$('signature_title').val();
let certificate ids=$('signature_requirement_certificate_ids').val();
设为mandatory=$('input[name=“mandatory”]”)。prop(“checked”)?1:0;
让include_in_report=$('input[name=“include_in_report”]').prop('checked')
?一
:0;

$Ajax({
网址:
'/settings/test_methods/'+testmethodid+'/add_signature_requirement',
datatype:'json',
方法:“POST”,
数据:{
签名要求:{
签名标题:签名标题,
证书ID:certificate ids,
强制:强制,
包括在报告中:包括在报告中
}
}
成功:函数(数据){
附录签名要求(数据);
$('签名_标题').val('');
$('签名\要求\证书\ ID')
Var(空)
.trigger(“更改”);
//成功后取消选中
$('必选').prop('checked',false);
$('include_in砗report').prop('checked',false);
}
(});
(});
< /代码> 

Rails视图中的表

.col-sm-10
.表-响应.mt-5
%表.table.table-hover.table-valign-middle
%AD
%TR
第%标题
%th证书类型
%强制性
%在报告中显示
第%行动
%t车身签名要求
-@测试方法.签名要求.每个DO签名要求|
%tr:id=>“签名要求签名要求.id”
%TD
=签名\要求.签名\标题
%TD
-签名证书。每个DO证书|
%span.badge.badge-pill.badge-primary/主要
=证书名称
%TD
.form-check.text-center.mb-4格式
=check_box_tag'mandatory',nil,signature_requirement.mandatory==1,class:'表单检查输入'
%TD
.form-check.text-center.mb-4格式
=check_box_tag'include_in_report',nil,signature_requirement.include_in_report==1,class:'表单检查输入'
%TD
%a.mr-2:href=>“javascript:EditSignatureRequirement(签名要求.id)”
%i.fa.fa pencil.text secondary“aria hidden”=>“真”,“数据切换”=>“工具提示”,“标题”=>“编辑”
%a:href=>“javascript:DeleteSignatureRequirement(signature_requirement.id)”
%i.fa.fa垃圾桶。文本危险“aria hidden”=>“真”,“数据切换”=>“工具提示”,“标题”=>“删除”
< /代码> 

实施后的图像


全面实施:

从多选框中提取文本并从映射函数生成的数组中删除逗号

function extractTextFromMultiSelect(record) {
  if (record.length === 0) {
    return '';
  } else {
    let texts = $.map(record, function(obj) {
      span =
        '<span class="badge badge-pill badge-primary">' + obj.text + '</span>';
      return span;
    });
    return texts.join(' ');
  }
}


使用HTML的checked属性,选中复选框(如果选中),不选中则为空。

function extractMandatoryCheckbox() {
  let mandatory = $('input[name="mandatory"]').prop('checked')
    ? 'checked'
    : null;
  return `<div class="form-check text-center">
    <input type="checkbox" class="form-check-input mb-4" ${mandatory}>
    </div>`;
}

function extractShowInReportCheckbox() {
  let include_in_report = $('input[name="include_in_report"]').prop('checked')
    ? 'checked'
    : null;
  return `<div class="form-check text-center">
    <input type="checkbox" class="form-check-input mb-4" ${include_in_report}>
    </div>`;
}


追加到表

function appendSignatureRequirement(record) {
  row = $('#signature_requirement_' + record['id']);
  texts = $('#signature_requirement_certificate_ids').select2('data');
  var html =
    '<td>' +
    non_null(record['signature_title']) +
    '</td>' +
    '<td>' +
    extractTextFromMultiSelect(texts) +
    '</td>' +
    '<td>' +
    extractMandatoryCheckbox() +
    '</td>' +
    '<td>' +
    extractShowInReportCheckbox() +
    '</td>' +
    '<td>' +
    "<a class='mr-2' href='javascript:editSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-pencil text-secondary' aria-hidden='true' data-toggle='tooltip' title='Edit'></i>" +
    '</a>' +
    "<a href='javascript:deleteSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-trash text-danger' aria-hidden='true' data-toggle='tooltip' title='Delete'></i>" +
    '</a>' +
    '</td>';
  if (!row.length) {
    row = $('#signature_requirements').append(
      "<tr id='signature_requirement_" + record['id'] + "'>" + html + '</tr>'
    );
  } else {
    row.empty();
    row.append(html);
  }
}


创建并插入数据库(提取复选框值,然后在成功时取消)

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();

    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();
    let mandatory = $('input[name="mandatory"]').prop('checked') ? 1 : 0;
    let include_in_report = $('input[name="include_in_report"]').prop('checked')
      ? 1
      : 0;

    $.ajax({
      url:
        '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
      dataType: 'json',
      method: 'POST',
      data: {
        signature_requirement: {
          signature_title: signatureTitle,
          certificate_ids: certificateIds,
          mandatory: mandatory,
          include_in_report: include_in_report
        }
      },
      success: function(data) {
        appendSignatureRequirement(data);
        $('#signature_title').val('');
        $('#signature_requirement_certificate_ids')
          .val(null)
          .trigger('change');
        // uncheck upon success
        $('#mandatory').prop('checked', false);
        $('#include_in_report').prop('checked', false);
      }
    });
  });


Rails视图中的表

   .col-sm-10
      .table-responsive.mt-5
        %table.table.table-hover.table-valign-middle
          %thead
            %tr
              %th Title
              %th Certificate Types
              %th Mandatory
              %th Show in Report
              %th Actions
          %tbody#signature_requirements
            - @test_method.signature_requirements.each do |signature_requirement|
              %tr{:id => "signature_requirement_#{signature_requirement.id}"}
                %td
                  = signature_requirement.signature_title
                %td
                  - signature_requirement.certificates.each do |certificate|
                    %span.badge.badge-pill.badge-primary
                      = certificate.name
                %td
                  .form-check.text-center.mb-4
                    = check_box_tag 'mandatory', nil, signature_requirement.mandatory == 1, class: 'form-check-input'
                %td
                  .form-check.text-center.mb-4
                    = check_box_tag 'include_in_report', nil, signature_requirement.include_in_report == 1, class: 'form-check-input'
                %td
                  %a.mr-2{:href => "javascript:editSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-pencil.text-secondary{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Edit"}
                  %a{:href => "javascript:deleteSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-trash.text-danger{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Delete"}


实施后的图像