【问题标题】:trouble with turbolinks and ajaxturbolinks 和 ajax 的问题
【发布时间】:2014-05-22 13:33:38
【问题描述】:

我有以下作为 ajax 调用:

$.ajax(
        type: "GET"
        url: "/admin/requests"
        format: 'js'
        dataType: "script"
        data:
            type_of_function: type_of_function
            agents: agent
            payment_status: payment_status_array
            status: status_array
            priority: priority_array
            due_by_date: due_by_array
            services: services
            sources: sources
            created_at: created_at
            leads: leads
            widgets: widgets
            customers: customers
            types: types
            vendors: vendors
            groups: groups
            payment_modes: payment_modes
            delete_request: delete_request_array_val
            spam_request: spam_request_array_val
            pickup_request: pickup_request_array_val
            close_request: close_request_array_val
            assign_agent_request: assign_agent_request_val
            assign_agent_id: assign_agent_id
            bulk_request: bulk_request_array_val
            bulk_request_agent: bulk_request_agent
            bulk_request_ps: bulk_request_ps
            bulk_request_status: bulk_request_status
            bulk_request_priority: bulk_request_priority
            bulk_request_source: bulk_request_source
            bulk_request_type: bulk_request_type
            bulk_request_widget: bulk_request_widget
            bulk_request_lead: bulk_request_lead
            bulk_request_reminder: bulk_request_reminder
    )

现在以下是我拥有的 index.js.erb

$(".request_table_span").html('<%= escape_javascript(render "request_table",requests: @requests,model_class: "Request")%>' );

$('#paginator').html('<%= escape_javascript(paginate(@requests, :remote => true)) %>');

$(".search-free-chosen-select").select2({
minimumResultsForSearch: -1,
width: "150px"
});

$(".chosen-select").select2(width: "150px");

checkbox();

这是checkbox() 函数:

checkbox = ->
    $("#request_table_checkbox_main").change ->
        if $("#request_table_checkbox_main").is(":checked")
            $(".request_table_checkbox").prop('checked', true)
        else
            $(".request_table_checkbox").prop('checked', false)

read = ->
    checkbox();

$(document).ready read
$(document).on "page:load", read

这是视图文件。我正在使用kaminari 进行分页。

%table#datatables-requests.table.table-striped

  %thead
    %tr
      %th
        = check_box_tag '',1,false,id: "request_table_checkbox_main"
      %th Service
      %th Vendor
      %th Status
      %th Payment Status
      %th Due on
      %th= t '.actions', :default => t("helpers.actions")
      %th
  %tbody
    - requests.each do |req|
      %tr
        %td
          = check_box_tag '',req.id,false,class: "request_table_checkbox"
        %td
          = req.service.name
          %br
            %span{:style => "color:blue;"}= link_to "Create SOD/Invoice", new_admin_invoice_path(req: req.id)
        %td= req.vendor_service.name

        %td= select_tag "", options_for_select(Admin::FilterStatus.all.collect{ |u| [u.name, u.id]}, :selected=>req.admin_filter_status.id),class: "search-free-chosen-select status_column_val"
        %td= select_tag "", options_for_select(Admin::FilterPaymentStatus.all.collect{ |u| [u.name, u.id]}, :selected=>req.admin_filter_payment_status.id),class: "search-free-chosen-select payment_status_column_val"

        %td= l req.due_on.to_date
        %td
          -if req.due_on < DateTime.now 
            %span.subject_style.overdue Overdue 
        %td
          = link_to "View", admin_request_path(req), :class => 'btn btn-primary'
          = link_to t('.edit', :default => t("helpers.links.edit")),edit_admin_request_path(req), :class => 'btn btn-mini'
          = link_to t('.destroy', :default => t("helpers.links.destroy")),admin_request_path(req),:method => :delete,:data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) },:class => 'btn btn-mini btn-danger'
        %td 
          = render "last_column_in_table", req: req
#paginator
  = paginate requests,remote: true
%br

我正在将 Kaminari 制作为基于 ajax 的页面加载。如果我使用 index.js.erb 中的当前代码,它不起作用。此外,如果我删除 checkbox 它工作正常。为什么会这样?


更新:

$(".request_table_span").html('<%= escape_javascript(render "request_table",requests: @requests,model_class: "Request")%>' );

$('#paginator').html('<%= escape_javascript(paginate(@requests, :remote => true)) %>');

$("#request_table_checkbox_main").on('change', function() {
return $(".request_table_checkbox").prop('checked', $("#request_table_checkbox_main").is(":checked"));});

$(".search-free-chosen-select").select2({
minimumResultsForSearch: -1,
width: "150px"
});

$(".chosen-select").select2({
    minimumResultsForSearch: -1,
    width: "150px"
});

在上面的代码中,(".search-free-chosen-select") 上面的所有内容都运行良好。这太奇怪了。

@MrYoshiji 你对 javascript 的改进奏效了。但是,如果我在index.js.erb 中调用该函数,它似乎不起作用。但是,如果我将复选框部分单独粘贴在那里,它就可以工作。

【问题讨论】:

  • 控制台有错误吗?无论如何,尝试添加$(document).on "page:change", read
  • 控制台中没有错误..该建议也不起作用。
  • 提示:您可以通过以下方式简化checkbox() 的实现:$(".request_table_checkbox").prop('checked', $("#request_table_checkbox_main").is(":checked") )

标签: jquery ruby-on-rails ajax turbolinks


【解决方案1】:

您可以尝试以下方法吗?

window.sync_checkboxes = ->
  $("#request_table_checkbox_main").on 'change', ->
    $(".request_table_checkbox").prop('checked', $("#request_table_checkbox_main").is(":checked") )

window.initialize_page = ->
  sync_checkboxes()
  true

$(document).ready initialize_page()
$(document).on 'page:load', initialize_page()

【讨论】:

  • 我更新了我的答案,我在window 上下文中限定了函数的范围。我不认为它会改变什么,但你应该尝试一下,以防万一@Aravind
  • 哦,太好了..这有什么改进?谢谢。
  • 还没解决..我更新了问题..你看到更新了吗?