Rails 4 nicht ausführen $ (Dokument) .ready (bereit);

Question

Funktion

SOLUTION

Ich hatte sowohl eine users.js und users.coffee in meiner Asset-Pipeline. Anscheinend users.coffee wurde verhindert, dass users.js geladen wird. Stellen Sie sicher, dass Sie es löschen!

---

Ich versuche this zu implementieren - here GitHub Repo.

Zum Starten von Chats sind zwei JS-Dateien erforderlich: chat.js und users.js. Beide enthalten $(document).ready(ready); Funktionen. Nur kann ich nur Rails chat.js auszuführen bekommen

Ich habe bestätigt, durch eine console.log("confirm"); nur innerhalb der beiden Funktionen hinzugefügt, wie so ...

var ready = function() { 
    console.log("success") ... 

ich beide diese von versucht haben ...

$(document).on("page:load", ready); 
$(document).on("page:change", ready); 

ich habe dies><%= javascript_include_tag "users", "data-turbolinks-track" => true %> zumZugabe

ich habe versucht, application.html.erb == versucht, das Hinzufügenbis application.js

Ich habe versucht, diese zu config/initializer/assets.rb ==>Rails.application.config.assets.precompile += %w(users.js)

Warum ist nicht die ready Funktion innerhalb users.js Ausführung?

Mein Code Repo ist here.

Hier chat.js ...

/** 
* Chat logic 
* 
* Most of the js functionality is inspired from anatgarg.com 
* jQuery tag Module from the tutorial 
* http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/ 
* 
*/ 


var chatboxFocus = new Array(); 
var chatBoxes = new Array(); 

var ready = function() { 
    console.log("success1"); 

    chatBox = { 
     // console.log("success"); 

     /** 
     * creates an inline chatbox on the page by calling the 
     * createChatBox function passing along the unique conversation_id 
     * 
     * @param conversation_id 
     */ 

     chatWith: function (conversation_id) { 
      console.log("success1"); 

      chatBox.createChatBox(conversation_id); 
      $("#chatbox_" + conversation_id + " .chatboxtextarea").focus(); 
     }, 

     /** 
     * closes the chatbox by essentially hiding it from the page 
     * 
     * @param conversation_id 
     */ 

     close: function (conversation_id) { 
      $('#chatbox_' + conversation_id).css('display', 'none'); 
      chatBox.restructure(); 
     }, 

     /** 
     * Plays a notification sound when a new chat message arrives 
     */ 

     notify: function() { 
      var audioplayer = $('#chatAudio')[0]; 
      audioplayer.play(); 
     }, 

     /** 
     * Handles 'smart layouts' of the chatboxes. Like when new chatboxes are 
     * added or removed from the view, it restructures them so that they appear 
     * neatly aligned on the page 
     */ 

     restructure: function() { 
      align = 0; 
      for (x in chatBoxes) { 
       chatbox_id = chatBoxes[x]; 

       if ($("#chatbox_" + chatbox_id).css('display') != 'none') { 
        if (align == 0) { 
         $("#chatbox_" + chatbox_id).css('right', '20px'); 
        } else { 
         width = (align) * (280 + 7) + 20; 
         $("#chatbox_" + chatbox_id).css('right', width + 'px'); 
        } 
        align++; 
       } 
      } 

     }, 

     /** 
     * Takes in two parameters. It is responsible for fetching the specific conversation's 
     * html page and appending it to the body of our home page e.g if conversation_id = 1 
     * 
     * $.get("conversations/1, function(data){ 
     * // rest of the logic here 
     * }, "html") 
     * 
     * @param conversation_id 
     * @param minimizeChatBox 
     */ 

     createChatBox: function (conversation_id, minimizeChatBox) { 
      console.log("success2"); 
      if ($("#chatbox_" + conversation_id).length > 0) { 
       if ($("#chatbox_" + conversation_id).css('display') == 'none') { 
        $("#chatbox_" + conversation_id).css('display', 'block'); 
        chatBox.restructure(); 
       } 
       $("#chatbox_" + conversation_id + " .chatboxtextarea").focus(); 
       return; 
      } 

      $("body").append('<div id="chatbox_' + conversation_id + '" class="chatbox"></div>') 

      $.get("conversations/" + conversation_id, function (data) { 
       $('#chatbox_' + conversation_id).html(data); 
       $("#chatbox_" + conversation_id + " .chatboxcontent").scrollTop($("#chatbox_" + conversation_id + " .chatboxcontent")[0].scrollHeight); 
      }, "html"); 

      $("#chatbox_" + conversation_id).css('bottom', '0px'); 

      chatBoxeslength = 0; 

      for (x in chatBoxes) { 
       if ($("#chatbox_" + chatBoxes[x]).css('display') != 'none') { 
        chatBoxeslength++; 
       } 
      } 

      if (chatBoxeslength == 0) { 
       $("#chatbox_" + conversation_id).css('right', '20px'); 
      } else { 
       width = (chatBoxeslength) * (280 + 7) + 20; 
       $("#chatbox_" + conversation_id).css('right', width + 'px'); 
      } 

      chatBoxes.push(conversation_id); 

      if (minimizeChatBox == 1) { 
       minimizedChatBoxes = new Array(); 

       if ($.cookie('chatbox_minimized')) { 
        minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/); 
       } 
       minimize = 0; 
       for (j = 0; j < minimizedChatBoxes.length; j++) { 
        if (minimizedChatBoxes[j] == conversation_id) { 
         minimize = 1; 
        } 
       } 

       if (minimize == 1) { 
        $('#chatbox_' + conversation_id + ' .chatboxcontent').css('display', 'none'); 
        $('#chatbox_' + conversation_id + ' .chatboxinput').css('display', 'none'); 
       } 
      } 

      chatboxFocus[conversation_id] = false; 

      $("#chatbox_" + conversation_id + " .chatboxtextarea").blur(function() { 
       chatboxFocus[conversation_id] = false; 
       $("#chatbox_" + conversation_id + " .chatboxtextarea").removeClass('chatboxtextareaselected'); 
      }).focus(function() { 
       chatboxFocus[conversation_id] = true; 
       $('#chatbox_' + conversation_id + ' .chatboxhead').removeClass('chatboxblink'); 
       $("#chatbox_" + conversation_id + " .chatboxtextarea").addClass('chatboxtextareaselected'); 
      }); 

      $("#chatbox_" + conversation_id).click(function() { 
       if ($('#chatbox_' + conversation_id + ' .chatboxcontent').css('display') != 'none') { 
        $("#chatbox_" + conversation_id + " .chatboxtextarea").focus(); 
       } 
      }); 

      $("#chatbox_" + conversation_id).show(); 

     }, 

     /** 
     * Responsible for listening to the keypresses when chatting. If the Enter button is pressed, 
     * we submit our conversation form to our rails app 
     * 
     * @param event 
     * @param chatboxtextarea 
     * @param conversation_id 
     */ 

     checkInputKey: function (event, chatboxtextarea, conversation_id) { 
      if (event.keyCode == 13 && event.shiftKey == 0) { 
       event.preventDefault(); 

       message = chatboxtextarea.val(); 
       message = message.replace(/^\s+|\s+$/g, ""); 

       if (message != '') { 
        $('#conversation_form_' + conversation_id).submit(); 
        $(chatboxtextarea).val(''); 
        $(chatboxtextarea).focus(); 
        $(chatboxtextarea).css('height', '44px'); 
       } 
      } 

      var adjustedHeight = chatboxtextarea.clientHeight; 
      var maxHeight = 94; 

      if (maxHeight > adjustedHeight) { 
       adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight); 
       if (maxHeight) 
        adjustedHeight = Math.min(maxHeight, adjustedHeight); 
       if (adjustedHeight > chatboxtextarea.clientHeight) 
        $(chatboxtextarea).css('height', adjustedHeight + 8 + 'px'); 
      } else { 
       $(chatboxtextarea).css('overflow', 'auto'); 
      } 

     }, 

     /** 
     * Responsible for handling the growth of chatboxes as they increase on the page 
     * Keeps track of the minimized chatboxes etc 
     * 
     * @param conversation_id 
     */ 

     toggleChatBoxGrowth: function (conversation_id) { 
      if ($('#chatbox_' + conversation_id + ' .chatboxcontent').css('display') == 'none') { 

       var minimizedChatBoxes = new Array(); 

       if ($.cookie('chatbox_minimized')) { 
        minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/); 
       } 

       var newCookie = ''; 

       for (i = 0; i < minimizedChatBoxes.length; i++) { 
        if (minimizedChatBoxes[i] != conversation_id) { 
         newCookie += conversation_id + '|'; 
        } 
       } 

       newCookie = newCookie.slice(0, -1) 


       $.cookie('chatbox_minimized', newCookie); 
       $('#chatbox_' + conversation_id + ' .chatboxcontent').css('display', 'block'); 
       $('#chatbox_' + conversation_id + ' .chatboxinput').css('display', 'block'); 
       $("#chatbox_" + conversation_id + " .chatboxcontent").scrollTop($("#chatbox_" + conversation_id + " .chatboxcontent")[0].scrollHeight); 
      } else { 

       var newCookie = conversation_id; 

       if ($.cookie('chatbox_minimized')) { 
        newCookie += '|' + $.cookie('chatbox_minimized'); 
       } 


       $.cookie('chatbox_minimized', newCookie); 
       $('#chatbox_' + conversation_id + ' .chatboxcontent').css('display', 'none'); 
       $('#chatbox_' + conversation_id + ' .chatboxinput').css('display', 'none'); 
      } 

     } 



    } 


    /** 
    * Cookie plugin 
    * 
    * Copyright (c) 2006 Klaus Hartl (stilbuero.de) 
    * Dual licensed under the MIT and GPL licenses: 
    * http://www.opensource.org/licenses/mit-license.php 
    * http://www.gnu.org/licenses/gpl.html 
    * 
    */ 

    jQuery.cookie = function (name, value, options) { 
     if (typeof value != 'undefined') { // name and value given, set cookie 
      options = options || {}; 
      if (value === null) { 
       value = ''; 
       options.expires = -1; 
      } 
      var expires = ''; 
      if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 
       var date; 
       if (typeof options.expires == 'number') { 
        date = new Date(); 
        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 
       } else { 
        date = options.expires; 
       } 
       expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE 
      } 
      // CAUTION: Needed to parenthesize options.path and options.domain 
      // in the following expressions, otherwise they evaluate to undefined 
      // in the packed version for some reason... 
      var path = options.path ? '; path=' + (options.path) : ''; 
      var domain = options.domain ? '; domain=' + (options.domain) : ''; 
      var secure = options.secure ? '; secure' : ''; 
      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
     } else { // only name given, get cookie 
      var cookieValue = null; 
      if (document.cookie && document.cookie != '') { 
       var cookies = document.cookie.split(';'); 
       for (var i = 0; i < cookies.length; i++) { 
        var cookie = jQuery.trim(cookies[i]); 
        // Does this cookie string begin with the name we want? 
        if (cookie.substring(0, name.length + 1) == (name + '=')) { 
         cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
         break; 
        } 
       } 
      } 
      return cookieValue; 
     } 
    }; 


} 

$(document).ready(ready); 
$(document).on("page:load", ready); 

ist hier users.js ...

var ready = function() { 
    console.log("success"); 

    /** 
    * When the send message link on our home page is clicked 
    * send an ajax request to our rails app with the sender_id and 
    * recipient_id 
    */ 

    $('.start-conversation').click(function (e) { 
     e.preventDefault(); 
     console.log("success"); 
     var sender_id = $(this).data('sid'); 
     var recipient_id = $(this).data('rip'); 

     $.post("/conversations", { sender_id: sender_id, recipient_id: recipient_id }, function (data) { 
      chatBox.chatWith(data.conversation_id); 
     }); 
    }); 

    /** 
    * Used to minimize the chatbox 
    */ 

    $(document).on('click', '.toggleChatBox', function (e) { 
     e.preventDefault(); 
     console.log("success1"); 

     var id = $(this).data('cid'); 
     chatBox.toggleChatBoxGrowth(id); 
    }); 

    /** 
    * Used to close the chatbox 
    */ 

    $(document).on('click', '.closeChat', function (e) { 
     e.preventDefault(); 
     console.log("success2"); 

     var id = $(this).data('cid'); 
     chatBox.close(id); 
    }); 


    /** 
    * Listen on keypress' in our chat textarea and call the 
    * chatInputKey in chat.js for inspection 
    */ 

    $(document).on('keydown', '.chatboxtextarea', function (event) { 
     console.log("success3"); 

     var id = $(this).data('cid'); 
     chatBox.checkInputKey(event, $(this), id); 
    }); 

    /** 
    * When a conversation link is clicked show up the respective 
    * conversation chatbox 
    */ 

    $('a.conversation').click(function (e) { 
     e.preventDefault(); 
     console.log("success4"); 

     var conversation_id = $(this).data('cid'); 
     chatBox.chatWith(conversation_id); 
    }); 


} 

$(document).ready(ready); 
$(document).on("page:load", ready); 

application.js wie folgt aussieht ...

//= require jquery 
//= require jquery_ujs 
//= require transition.js 
//= require alert.js 
//= require button.js 
//= require carousel.js 
//= require collapse.js 
//= require dropdown.js 
//= require modal.js 
//= require tooltip.js 
//= require scrollspy.js 
//= require tab.js 
//= require bootstrap.min 
//= require private_pub 
//= require chat 
//= require turbolinks 
//= require_tree . 

ich diese haben in der <head> Etikett von application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= stylesheet_link_tag '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 
<%= javascript_include_tag "users", "data-turbolinks-track" => true %> 

Oh, und hier ist die HTML-Seite (für alle Code-Repo sehen)

<div class="row"> 
    <!-- Not implemented on tutorial --> 
    <div class="col-md-4"> 
    <div style="height: 300px; overflow-y: auto;"> 
     <div class="panel panel-default"> 
     <!-- Default panel contents --> 
     <div class="panel-heading">Registered Users</div> 

     <!-- Table --> 
     <table class="table"> 
      <thead> 
      <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th></th> 
      </tr> 
      </thead> 
      <tbody> 
      <% @users.each_with_index do |user, index| %> 
       <tr> 
       <td><%= index +=1 %></td> 
       <td><%= user.email %></td> 
       <td> 
        <%= link_to "Send Message", "#", class: "btn btn-success btn-xs start-conversation", 
           "data-sid" => current_user.id, "data-rip" => user.id %> 
       </td> 
       </tr> 
      <% end %> 

      </tbody> 
     </table> 
     </div> 

    </div> 
    <hr> 
    <h3>Your Conversations</h3> 

    <div style="height: 400px; overflow-y: auto;"> 
     <% if @conversations.any? %> 
      <ul class="media-list"> 
      <% @conversations.each do |conversation| %> 
       <li class="media"> 
        <%= image_tag("http://placehold.it/50x50", class: "media-object pull-left") %> 
        <div class="media-body"> 
        <%= link_to "", conversation_path(conversation), class: "conversation", "data-cid" => conversation.id %> 
         <h4 class="media-heading"><%= conversation_interlocutor(conversation).email %></h4> 
         <p><%= conversation.messages.last.nil? ? "No messages" : truncate(conversation.messages.last.body, length: 45) %></p> 
        </div> 
       </li> 

      <% end %> 
      </ul> 
     <% else %> 
      <p>You have no conversations. Click send message with any user to create one.</p> 
     <% end %> 
    </div> 

    </div> 

    <div class="col-md-4"> 

    </div> 

</div> 

Answer 1

ich heruntergeladen Ihre Repo- und gelöscht users.coffee Datei: