Sending data from simple_form to javascript

Question

I have a working javascript:

 .search_client_users
    = form_tag admin_clients_path, method: "get", class: "search_form" do
      = label_tag 'search_term', 'Search for client users:'
      = text_field_tag 'search_term', nil, autocomplete: "off", size: "50"

    .client_list

- content_for :javascript do
  = javascript_include_tag 'admin/search_client_users'

which does a search of clients and lists out the clients that match the query.

I want to use this in a normal simple_form:

    .main_form.client_emails
      = simple_form_for(:domainNameSwap, url: { action: "update" }, html: { method: :put }) do |f|
        .input-row
          = f.input :oldDomain, :label => "Domain Name",wrapper_html: { id: 'search_term' }
        .submit-row
          .col-xs-5
            .submit
              = f.submit "Update domains", id: "submit", :class => "btn btn-primary submit"

    .client_list


- content_for :javascript do
  = javascript_include_tag 'admin/search_client_users'

But I can't figure out how to get the label to the javascript...

it appears that the part in the working code that is relevant is text_field_tag = 'search_term' That appears to be what associates the text field with javascript. But I can't figure out how to use that with simple_form...

coffeescript below, in case it's important:

class App.ClientUserList
  constructor: ->
    @incrementalSearchAttempts = 0

  search: (searchTerm, completeCallback) =>
    handleResponseWithOrderAwareness = (attemptNumber, response) =>
      if attemptNumber >= @incrementalSearchAttempts
        completeCallback(response)

    @incrementalSearchAttempts++
    onComplete = _.partial(handleResponseWithOrderAwareness, @incrementalSearchAttempts)
    $.get('/admin/manage_clients/client_list', { search_term: searchTerm }).complete(onComplete)

class App.Views.SearchClientUsers extends Backbone.View
  events:
    "keyup input[name='search_term']": "search",
    "click .profile_attribute": "showClientUserProfile"

  initialize: =>
    @clientUserList = new App.ClientUserList()

  search: =>
    searchTerm = $('.search_form input[name=search_term]').val()
    @clientUserList.search(searchTerm, @render)

  showClientUserProfile: (event) =>
    window.location = $(event.currentTarget).closest('tr').data('client-path')

  render: (response) =>
    @$el.find('.client_list').html(response.responseText)

$ ->
  new App.Views.SearchClientUsers(el: $('.search_client_users')).search()

ETA: simplified: I think I need two things:

I need to set the class of the simple_form to "search_form"
I need to do the equivalent of the text_field_tag line, but for the f.input line.

I'm pretty sure that the first SHOULD be just adding class: "search_form" in the html section of the simple_form.

However, I can't figure out how to set the "text_field_tag"

Brian Postow Brian Postow · Accepted Answer · 2018-07-18T21:22:14

For future searchers: it appears that I was correct, I need to set the class of the simple_form, and I need to set the "name" of the f.input.

adding the input_html: {name: 'search_term'} option to the f.input line solves this.

HOWEVER, it also means that instead of, in the controller, the value being in params.domainNameSwap.oldDomainName, it's in params.search_term Which is a problem that I can live with...

Sending data from simple_form to javascript

1 Answers