Creating a Rails variable with the value of an HTML element

Question

I've been working on a modal which contains a list of div's generated by a Rails loop. The list lets me select one of its items, and then displays that item on the side.

  <style>
      #feedback {
          font-size: 1.4em;
          border: none;

      }

      #selectable_<%=request.id.to_s %> .ui-selecting {
          border: none;
          background: #b5d4ee;
      }

      #selectable_<%=request.id.to_s %> .ui-selected {
          background: #a3e0f2;
          color: white;
          border: none;

      }

      #selectable_<%=request.id.to_s %> {
          list-style-type: none;
          margin: 0;
          padding: 0;
          width: 60%;
          border: none;

      }

      #selectable_<%=request.id.to_s %> li {
          margin: 3px;
          padding: 0.4em;
          font-size: 1.4em;
          height: 18px;
          border: none;

      }
  </style>
  <script>
      $(function () {
          $("#selectable_<%=request.id.to_s%>").selectable({
              selected: function(event, ui) {
                  var result = $("#select-result-<%=request.id.to_s%>").empty();

                  $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected").each(
                          function(key,value){
                              $(value).find('*').removeClass("ui-selected");


                          }

                  );
                  var index = $("#selectable_<%= request.id.to_s %> .ui-widget-content").html( );
                  result.append(( index ));
              }

          });
      });
  </script>
</head>

<p id="feedback">
  <span class="pull-right" id="select-result-<%= request.id.to_s %>">No one selected.</span>
</p>

<div class="" id="selectable_<%= request.id.to_s %>" style="width:175px;
        height:220px;
        overflow:scroll;">

  <% conversations.each do |reply| %>

      <% if reply.subject == request.title %>
          <div class="ui-widget-content" style="border: none">
            <div style="margin-left: 5px" class="round-image-50">
              <%= image_tag(reply.originator.logo.url(:small)) %>
            </div>
            <br>
            <%= link_to reply.originator.name, user_path(reply.originator), :id => 'select-result-' + request.id.to_s %>

            <%= reply.originator.email %>

            <div id="user_id"> <%= reply.originator %> </div>

          </div>
      <% end %>
  <% end %>

</div>

What I need to do now is store the user ID belonging to the selected item, so that I can submit a form which sends it to my database. I've put the Rails field which returns the ID in a separate div, .user_id, so that it's isolated from the other fields. Though I'm still not sure how to store it in a variable for use in a form. Should I use a method to get the text from the HTML element, and if so how would I do that? Any advice would help. Thanks.

EDIT: I've done some more reading and it looks like this is going to be a lot harder than I thought. I think I'm going to have to pass the value with AJAX once I've selected it. Anyone know how I could do that?

Answer 1

If you are not planning on loading all of the information required on page load (which is a perfectly valid approach), then yes, you'll need to use AJAX, which retrieves additional data from the server through javascript asynchronously.

Regardless, you'll want an onclick handler with javascript/jquery that gets the value of the user_id that you place in the div you specified.

This should be pretty easy DOM manipulation. Here's some example code. AJAX is a whole new world of its own, however, so I'd recommend reading up. There are also many JS/JQuery libraries and frameworks that may help you when it comes to the work you want done.

$(document).ready(function () {
    $('.ui-widget-content').click(function () {
        // The find method searches the element's children for the given selector
        // In this case, we're looking for the .user_id div under each
        // widget content, and getting the inner HTML content (which should be
        // the user id)

        var user_id = $(this).find('.user_id').html();

        // at this point you have two options:

        // either show a DIV you've preloaded by selecting it
        // NB: you may need to be able to select a div based on user_id,
        // perhaps give the divs an ID which is that specified user_id:
        $(this).find('#'+user_id).show();

        // or make an AJAX request to a URL. This URL should be configured in
        // your backend to return data usable by this javascript frontend
        $.ajax(mySiteURL, {
            data: {user_id: user_id}
        }).done(function(data) {
            // When the request is done, process the data -
            // perhaps construct an HTML element and show it?
        });

    });