Question

The task I’m trying to accomplish:

I have a Rails 3 application that processes work orders for a telecommunications company. The index page of the work orders controller displays paginated work orders in rows of up to 30 per page.

There are two fields that the client would like to be able to update from this page. They are Technician ETA and Work Order Status. I’ve written some code to use jquery dialog popups to serve partial forms (one for each field) for update.

So far I’ve been able to get the popups to serve the form partials but they only work for the first row. The links for subsequent rows on the page don’t work. I expect that this is because the divs containing the calls to the partials have to be uniquely named for each row (each work order in this case.)

At the moment I’m only trying to address the issue of getting the iterations of dialog popups for each row to work on the front end. This is what I have for code currently:

the .js:

$(document).ready(function() {
$('div#status-chg-form').dialog({ autoOpen: false });
$('#statuslink').click(function(){ $('div#status-chg-form').dialog('open'); });
});

$(document).ready(function() {
$('div#eta-chg-form').dialog({ autoOpen: false });
$('#etalink').click(function(){ $('div#eta-chg-form').dialog('open'); });
});

the divs to render the partials (in my index view):

<div id="status-chg-form" title="CHANGE WORK ORDER STATUS" style="display:none"><%= render :partial => 'statusform' %></div>
<div id="eta-chg-form" title="CHANGE TECHNICIAN ETA" style="display:none"><%= render :partial => 'etaform' %></div>

and the links (in my index view):

<a href="#" id="statuslink"><%= status_display %></a>

(note: status_display variable is populated correctly)

<% if work_order.soft_completion_datetime.blank? %>
    <a href="#" id="etalink"><%= "No ETA Entered" %></a>
<% else %>
    <a href="#" id="etalink"><%= work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p') %></a>
<% end %>

I’m thinking I can use the id from the work order row as a unique identifier for each occurrence of the dialog pop up, but I’m not a seasoned jquery coder so I am in need of a greater mind to point me in the right direction.

Answer 1

Ok, so I have a partial solution to this problem but I’m still having some difficulty with the jquery.

To uniquely identify the dialog div’s and the corresponding links I did this:

For Status:

            <% statusidname = "statuslink-" + work_order.id.to_s %>
            <%= link_to (status_display, "#", :id => statusidname, :onclick => "statusdialog('#{work_order.id.to_s}')") %>    
            <% statusdivname = "status-chg-form-" + work_order.id.to_s %>
            <%= content_tag :div, :class => statusdivname, :style =>"display:none" do %>
               <%= render :partial => 'statusform' %>
            <% end %>

and for ETA:

       <% etaidname = "etalink-" + work_order.id.to_s %>    
       <% if work_order.soft_completion_datetime.blank? %>
         <%= link_to ("No ETA Entered", "#", :id => etaidname, :onclick => "etadialog('#{work_order.id.to_s}')") %>
       <% else %>
         <%= link_to (work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p'), "#", :id => etaidname, :onclick => "etadialog('#{work_order.id.to_s}')") %>
       <% end %>
       <% etadivname = "eta-chg-form-" + work_order.id.to_s %>
       <%= content_tag :div, :class => etadivname, :style =>"display:none" do %>
          <%= render :partial => 'etaform' %>
       <% end %>

In summary essentially this code creates links that are named statuslink-999 and etalink-999 and divs named status-chg-form-999 and eta-chg-form-999 where 999 is the work_order.id thereby uniquely naming each link and div for each row.

This is my .js. It is currently not working. I can’t figure out what exactly I’m doing wrong here but the script is not receiving the rowid.

$(function statusdialog(rowid) {
$('div#status-chg-form-'+rowid).dialog({ autoOpen: false });
$('#statuslink-'+rowid).click(function(){ $('div#status-chg-form-'+rowid).dialog('open'); });
});

$(function etadialog(rowid) {
$('div#eta-chg-form-'+rowid).dialog({ autoOpen: false });
$('#etalink-'+rowid).click(function(){ $('div#eta-chg-form-'+rowid).dialog('open'); });
});