0

ユーザーが自分自身に関するさまざまな種類の情報を投稿できるようにするプロファイル ページを備えた Rails アプリがあります。

ページの左側には、たとえば、「ジョブの追加」というリンクがあります。これをクリックすると、フォーム (元々は css で非表示display:none;) が表示され、ユーザーはこれまでに行ったジョブの詳細を追加できます。このリンクは、以下の html の「span2」列にあります。ユーザーがすでにデータベースにジョブの詳細を入力している場合、その情報は中央の「span6」列に表示され、ユーザーが別のジョブの詳細を追加したい場合は、ジョブ フォームが「右側の span3' 列。ただし、データベースに求人がない場合は、右に押し出すコンテンツがないため、求人フォームは真ん中に表示されます。

このサイトでは、Backbone を使用して、このように css を から に変更していdisplay: noneますdisplay: block。

 "click .addjob": "showJobForm"

  showJobForm: function(){
       $('.jobform').css('display', 'block');
    },

問題: [ジョブを追加] リンクをクリックすると、フォームがページ上で点滅してから消えます。

この動作に影響を与える 3 つの要因があります。

  1. データベースにすでにエントリがある場合 (つまり、中央の列に何かが含まれている場合)、フォームが開いたままになる可能性が高くなります。

  2. URL の末尾に「#」がない場合、フォームは開いたままになる可能性が高く、[ジョブの追加] をクリックしたときにそこに配置されます (これはバックボーンのものです)。たとえば、クリックして求人を追加すると、フォームが開いて開いたままになることがありますが、次に求人を追加するときに URL を更新しないと (# をクリアするため)。このコードをバックボーン コード (ルーターを使用しない) に含めて # を取り除こうとしましたが、機能しません。

         if (window.history && window.history.pushState) {
        Backbone.history.start({pushState: true});
    }

  3. これは Rails 4 アプリです。以前に Rails 3 で同じアプリを作成しましたが、上記の 2 つの要因が存在するにもかかわらず、Rails 3 アプリでこの問題が発生したことはありません。Rails 4 では Javascript にいくつかの変更が加えられました。

質問: display:block が以前のように (Rails 3 アプリで) 機能しない理由を説明してもらえますか、またはこれをデバッグする方法を教えてください。

マークアップ

<div class="row employment">
    <div class="span2">
      <h5>Employment</h5>
   <a href="#" class="addjob">add</a>
    </div>
    <div class="span6">
       <table class="table table-striped">


                  <thead>
                    <tr>
                        <!-- <th> Category</th> -->
                  <!--     <th>Practice Areas</th> -->
                      <th>Company</th>
               <th>Title</th>
                <th>Start</th>
                 <th>End Date</th>
                 <th>Current Position</th>

                    </tr>
                  </thead>
 <tbody>
    <tr>
      <td>Esso </td>
       <td>gas pumper </td>
        <td>1966 </td>
         <td>1968 </td>

          <td>true </td>
      <td></td>
       <td><a class="editarea 2" href="/lawyer_profiles/22?job_id=2">edit</a></td>
      <td><a data-confirm="Are you sure?" data-method="delete" href="/employments/2" rel="nofollow">destroy</a></td>
    </tr>




</tbody>


  </table>
    </div>
    <div class="span3">

 <div class="jobform">
 <form accept-charset="UTF-8" action="/employments" class="simple_form form-inline" id="new_employment" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="faiGo6e1//1IkifVBfGHfd7lksBg+ZDUfjuRK05xs7M="></div>
  <div class="control-group string optional employment_employer"><label class="string optional control-label" for="employment_employer">company</label><div class="controls"><input class="string optional company" id="employment_employer" name="employment[employer]" type="text"></div></div>
   <div class="control-group string optional employment_jobtitle"><label class="string optional control-label" for="employment_jobtitle">job title</label><div class="controls"><input class="string optional job-title" id="employment_jobtitle" name="employment[jobtitle]" type="text"></div></div>
<div class="control-group select optional employment_startwhen"><label class="select optional control-label" for="employment_startwhen">Startwhen</label><div class="controls"><select class="select optional" id="employment_startwhen" name="employment[startwhen]"><option value=""></option>
..
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option></select></div></div>
                             <!--  order: [:month, :year] %> -->
  <div class="control-group select optional employment_endwhen"><label class="select optional control-label" for="employment_endwhen">Endwhen</label><div class="controls"><select class="select optional" id="employment_endwhen" name="employment[endwhen]"><option value=""></option>
...
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option></select></div></div>
  <div class="control-group boolean optional employment_currentposition"><label class="boolean optional control-label" for="employment_currentposition">current position?</label><div class="controls"><input name="employment[currentposition]" type="hidden" value="0"><label class="checkbox"><input class="boolean optional currentposition" id="employment_currentposition" name="employment[currentposition]" type="checkbox" value="1"></label></div></div>

  <input class="btn" input_html="{:class=&gt;&quot;special&quot;}" name="commit" type="submit" value="Create Employment">
   <a class="btn btn-inverse" href="/lawyer_profiles/22">Hide form</a>
 <!-- <a href="#" class="hideawardform">hide</a> -->
</form>
</div>


    </div>

</div>
4

1 に答える 1

0

「表示：ブロック」
を置き換えてみてください

showJobForm: function(){
       $('.jobform').show();
    },
于 2013-05-18T21:08:01.673 に答える