我有一个带有个人资料页面的 Rails 应用程序,允许用户发布关于他们自己的不同类型的信息。
例如,在页面的左侧,有一个显示“添加工作”的链接,单击该链接时会显示一个表单(最初通过 css 隐藏display:none;
),该表单允许用户添加有关他们拥有的工作的详细信息。此链接位于下面 html 的“span2”列中。如果用户已经在数据库中输入了工作的详细信息,该信息将出现在中间的“span6”列中,然后,如果用户想要添加他拥有的另一个工作的详细信息,工作表单将在“右侧的 span3' 列。但是,如果数据库中没有作业,作业表单将出现在中间,因为没有内容将其推到右侧。
该站点使用 Backbone 将 css 从 更改display: none
为display: block
,就像这样。
"click .addjob": "showJobForm"
showJobForm: function(){
$('.jobform').css('display', 'block');
},
问题:当我单击“添加工作”链接时,表单在页面上闪烁然后消失。
影响这种行为的三个因素:
如果数据库中已经有一个条目(即中间列包含某些内容),则表单更有可能保持打开状态
如果 url 末尾没有“#”,则表单更有可能保持打开状态,当我单击“添加工作”时,它会放置在那里(这是 Backbone 的东西)。例如,如果我单击添加工作,表单可能会打开并保持打开状态,但是如果我下次想添加工作时不刷新 url(以清除 #)。我将此代码包含在我的主干代码(不使用路由器)中以尝试摆脱 # 但它不起作用
if (window.history && window.history.pushState) { Backbone.history.start({pushState: true}); }
这是一个 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=>"special"}" 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>