Question

在我正在研究的网站上发生了一件奇怪的事情。当第一次访问该站点时，它处于Bootstrap“响应”模式（对于iPhone屏幕，一切都很好而且很大。）但是，我试图创建一个事件，而JQuery Datepicker不起作用。也没有另一个功能，它允许用户在没有页面刷新的情况下将他们的姓氏缩短为初始名称（Tom Smith＆gt;＆gt; Tom S.）。后一个功能的代码在这里：

<div class="profile-present">
  <div id="profile-profile_name">
    <h1>
      <p>
        <%= @profile.user.full_name %>
      </p>
    </h1>
  </div>
  <hr />

  <strong>About</strong>
  <%= link_to "Edit", edit_profile_path(@profile) if @profile.user == current_user %>
  <p>
    <%= current_profile.about %>
  </p>

  <% if @profile.user == current_user %>
    <p>
      <div class="checkbox"><label><%= check_box_tag :toggle_profile_shorten_last_name, "1", current_profile.shorten_last_name? %> <%= Profile.human_attribute_name(:shorten_last_name) %></label></div>
    </p>
  <% end %>

  <% if @profile.user == current_user %>
    <%= link_to 'Edit Profile', edit_profile_path(current_profile) %> |
  <% end %>
  <%= link_to 'Back to Profiles', profiles_path %>

  <hr />
</div>

<script type="text/javascript">
  $(document).on('change', '#toggle_profile_shorten_last_name', function() {
    $.ajax('<%= toggle_shorten_last_name_path %>', {
      method: 'PATCH',
      success: function(data) {
        $('#profile-profile_name p').text(data.name);
      }
    });
  });
</script>

正如我所提到的，该网站从一开始就处于Bootstrap“响应”模式。但是，如果提交时出现任何错误，或者用户按下Safari上的后退按钮，则该站点将进入“桌面”视图。在“桌面”视图中，即使在移动Safari上，我们在所有主流浏览器中都能正常运行。只是没有处于“响应”模式。

也许这与响应模式下Bootstrap的不稳定性有关？（在我的实现中，因为它有时会恢复到桌面视图。）

因此，两个单独的页面无效，事件new.html.erb和profile.html.erb，在Bootstrap响应中。

我的意思截图：https://docs.google.com/document/d/1s7k9arftKgyMnzUFYmz4mUIhm6Z6bfxehtO9JL9Y-8w/edit

我必须修复一个，这将是缩短名称的功能。任何想法为什么两个都不起作用？

events.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(document).on('change', '.auto-submit', ->
  $(@).closest('form').submit()

).on('change', '.toggleable-trigger', ->
  trigger = $ @
  checked = trigger.is ':checked'
  targets = trigger.closest('.toggleable').find '.toggleable-target'

  trigger.closest('label').toggleClass 'grey', not checked
  trigger.closest('.toggleable').find('.toggleable-target-overlay').toggleClass 'hide', checked
  targets.prop('disabled', not checked).each ->
    target = $ @
    if checked
      target.val target.data('saved-value')
    else
      target.data('saved-value', target.val()).val ''

  target.filter(':enabled:visible:first').focus().select() if checked

).on 'click', '.toggleable .toggleable-target-overlay', ->
  $(@).closest('.toggleable').find('.toggleable-trigger').click()
  $(@).closest('.toggleable-target-wrapper').find('.toggleable-target:enabled:visible:first').focus().select()


jQuery ->
  $('#event_event_start, .event_invitation_expired_at').datepicker
    dateFormat: 'yy-mm-dd'

[...]

Answer 1

对于名称缩短组件，AJAX是不必要的（即使您以后需要POST全名）。

只要你始终以全名开头，你就可以这样做：

//store the full name at page load
var fullname = $("profile-profile_name > h1 > p").text();
//strip whitespace
fullname.replace(/^\s+|\s+$/g, "");

$("#toggle_profile_shorten_last_name").on("change", function(e) {
   var checked = $(this).is(":checked");

   $("#profile-profile_name > h1 > p").text(function(index, value) {
       if(checked) {
           return fullname.substring(0, fullname.indexOf(" ") + 2) + ".";
       } else {
           return fullname;
       }
   });
});

Mobile Safari，Rails 4，Bootstrap 3：JQuery Datepicker和单独的JS / Ajax代码无法正常工作

1 个答案: