0

我有一个带有个人资料页面的 Rails 应用程序,允许用户发布关于他们自己的不同类型的信息。

例如,在页面的左侧,有一个显示“添加工作”的链接,单击该链接时会显示一个表单(最初通过 css 隐藏display:none;),该表单允许用户添加有关他们拥有的工作的详细信息。此链接位于下面 html 的“span2”列中。如果用户已经在数据库中输入了工作的详细信息,该信息将出现在中间的“span6”列中,然后,如果用户想要添加他拥有的另一个工作的详细信息,工作表单将在“右侧的 span3' 列。但是,如果数据库中没有作业,作业表单将出现在中间,因为没有内容将其推到右侧。

该站点使用 Backbone 将 css 从 更改display: nonedisplay: block,就像这样。

 "click .addjob": "showJobForm"

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

问题:当我单击“添加工作”链接时,表单在页面上闪烁然后消失。

影响这种行为的三个因素:

  1. 如果数据库中已经有一个条目(即中间列包含某些内容),则表单更有可能保持打开状态

  2. 如果 url 末尾没有“#”,则表单更有可能保持打开状态,当我单击“添加工作”时,它会放置在那里(这是 Backbone 的东西)。例如,如果我单击添加工作,表单可能会打开并保持打开状态,但是如果我下次想添加工作时不刷新 url(以清除 #)。我将此代码包含在我的主干代码(不使用路由器)中以尝试摆脱 # 但它不起作用

         if (window.history && window.history.pushState) {
            Backbone.history.start({pushState: true});
        }
    
  3. 这是一个 Rails 4 应用程序。我之前在 Rails 3 中构建了相同的应用程序,尽管存在上述两个因素,但我在 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 回答