0

単一ページのCRUDを作成しようとしています。今、show関数でエラーが発生しました。

アプリケーションの例はここにあります：http： //tryoutcreation.herokuapp.com/

正常に動作しているようです。作成後、ページが更新されていない場合、show関数は正常に機能します。

ただし、更新されると、ダイアログはダイアログとして機能しなくなり、divとして表示されます。

ユーザーを作成して表示機能をクリックすると、試してみることができます。次に、ページを更新してみてください。同じdivがダイアログとしてではなく、ページに表示されます。

ソースはここで見つけることができます： https ：//github.com/frozzie/ModalCrud

関連コード：

ダイアログはshow-formです。

  <tr id = "<%= dom_id user%>">
<td><%= user.user_name %></td>
<td><%= user.email %></td>
<td><%= user.password %></td>
<td><%= user.account_type %></td>
<td><%= link_to 'Show', user, :remote=>true%></td>
<td><%= link_to 'Edit', edit_user_path(user), :remote => true %></td>
<td><%= link_to 'Destroy', user, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %>
</td> 
<div id = "show-form" title="User Information">
  <p>
  <b>User name:</b>
    <%= user.user_name %>
  </p>

  <p>
    <b>Email:</b>
    <%= user.email %>
  </p>

  <p>
  <b>Password:</b>
    <%= user.password %>
  </p>

  <p>
    <b>Account type:</b>
    <%= user.account_type %>
 </p>
</div>
</tr>

表示ボタンがクリックされたときにのみ開く必要があります。$（ "＃show-form"）。dialog（ "open"）;

これがダイアログです。

   $( "#show-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        closeOnEscape: true,
        resizable:false,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    })

それが起こった理由についてのアイデアをいただければ幸いです。

4

1 に答える 1

2

これは、phpよりもjsとは関係がありません。

コードからこれを削除します。

      <div id = "show-form" title="User Information">
        <p>
        <b>User name:</b>
        <%= user.user_name %>
        </p>

        <p>
        <b>Email:</b>
        <%= user.email %>
        </p>

        <p>
        <b>Password:</b>
        <%= user.password %>
        </p>

        <p>
        <b>Account type:</b>
        <%= user.account_type %>
        </p>
        </div>

次に、ユーザー情報を正しく出力するようにします。これをページの上部に出力するだけではいけません。

        <tr id = "<%= dom_id user%>">
            <td><%= user.user_name %></td>
            <td><%= user.email %></td>
            <td><%= user.password %></td>
            <td><%= user.account_type %></td>
            <td class="click_me" data-id="<%= dom_id user%>"><%= link_to 'Show', user, :remote=>true%></td>
            <td><%= link_to 'Edit', edit_user_path(user), :remote => true %></td>
            <td><%= link_to 'Destroy', user, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %>
            </td> 
        </tr>
        <tr  style="display: none;" class="hidden_<%= dom_id user%>">
        <td colspan="8">

        <div class = "show-form" title="User Information">
        <p>
        <b>User name:</b>
        <%= user.user_name %>
        </p>

        <p>
        <b>Email:</b>
        <%= user.email %>
        </p>

        <p>
        <b>Password:</b>
        <%= user.password %>
        </p>

        <p>
        <b>Account type:</b>
        <%= user.account_type %>
        </p>
        </div>
</td>
</tr>

JS

今、

$('td').on('click','.click_me', function(){
      var id = $(this).data('id');
      $('.hidden_'+id).slideToggle();
});

これは完璧ではありません...どうしても笑、でも少なくともうまくいけばそれで作業できます。

于 2012-12-18T11:28:26.327 に答える