0

一些 Jquery 脚本不在视图中运行，而另一些则在运行。我想隐藏某个 div "#all_lists" 并使其在单击 "#add_lists" div 时出现。字符计数器也不起作用！感谢所有帮助。

这是我的看法；

<%= provide(:title, 'Send Message') %> 
<div class="send_sms_form">

<%= simple_form_for(@message, :html => {:multipart => true}) do |f| %>
  <%= f.error_notification %>

<div class="form-inputs">
    <%= f.input :from, placeholder: "Max 11 characters" %>
    <%= f.input :to, :input_html => {:value => params[:to], :id => "to"}, placeholder: "Separate Numbers with Comma", hint: "Include atleast one number in this section" %>

    <div id="add_lists"> <span class="button"> Add List </span></div>

    <div id="all_lists"> <%= f.collection_check_boxes :lists,  @lists, :id, :name, as: :select %></div>
    <%= f.input :message, :as => :text, :input_html => {:cols => 60, :rows => 7, :onkeypress => "if (this.value.length > 160) { return false; }", id: "compose_message"} %>

    <div><span id="char_count">160</span></div>

    <%= f.input :user_id, :as => :hidden, :input_html => {:value => @current_user.id} %>
    <%= f.input :status, :as => :hidden, :input_html => {:value => "Queued"} %>
    <%= f.button :submit, "Send Message" %>
  <% end %>


</div>

这是在视图中运行的带有 jQ​​uery 的 message.js

$(document).ready(function () {
$('#to').tagsInput({
//        'autocomplete_url': '/contacts/autocomplete_contact_phone_number',
    'defaultText': 'Add a Number',
    'height': '50px',
    'width': '400px',
    'validator': function (value) {
        console.log(value.length, value);
        if (value.substring(0, 3) == "256" || value.substring(0, 3) == "255" || value.substring(0, 3) == "254") {

            if (value.length >= 11) {
                return true;
            }

        }
        return false;
    }
});

$(".listbox").click(function () {
    var numbers_string = $(this).data("numbers");
    numbers = numbers_string.split(",");
    if ($(this).is(':checked')) {

        for (var i = 0; i < numbers.length; i++) {
            $('#to').addTag(numbers[i]);
        }
    } else {
        for (var i = 0; i < numbers.length; i++) {

//                if ($('#to').tagExist(numbers[i])) {
                $('#to').removeTag(numbers[i]);
//                }

        }
    }


});

$('#messages_table').dataTable() ({
    sPaginationType: "full_numbers"
});

$('#compose_message').live('keyup keydown', function(e) {
  var maxLen = 160;
  var left = maxLen - $(this).val().length;
  $('#char_count').html(left);
});



$('#all_lists').hide();
$('#add_lists').click( function(event){
    event.stopPropagation();
    $('#add_lists').toggle();
});
$(document).click( function(){
    $('#all_lists').hide();
});


});

下面的脚本不起作用

 $('#compose_message').live('keyup keydown', function(e) {
  var maxLen = 160;
  var left = maxLen - $(this).val().length;
  $('#char_count').html(left);
});



$('#all_lists').hide();

$('#add_lists').click( function(event){
    event.stopPropagation();
    $('#all_lists').toggle();
});

$(document).click( function(){
    $('#all_lists').hide();
});
4

1 回答 1

0

你说：

一些 Jquery 脚本不在视图中运行，而另一些则在运行。

目前尚不清楚您在说什么正在运行，什么没有运行（所有 messages.js 代码都没有运行？还是只是其中的一部分？），所以这可能只是部分解决方案。

这个答案是关于这个声明的：

我想隐藏某个 div "#all_lists" 并使其在单击 "#add_lists" div 时出现。

但是您在底部的代码是：

$('#all_lists').hide();
$('#add_lists').click( function(event){
    event.stopPropagation();
    $('#add_lists').toggle();
});
$(document).click( function(){
    $('#all_lists').hide();
});

您需要更改$('#add_lists').toggle();为$('#all_lists').toggle();.

此外，如果您希望在all_lists页面加载时隐藏 div，则没有任何理由使用 jquery 隐藏它 - 您可以只使用 css，这将保证防止与它相关的潜在闪烁通过 JQuery 隐藏。

于 2013-09-19T16:09:45.237 回答