Kendall Weihe Kendall Weihe - 4 months ago 7
Javascript Question

Rails 4 not executing $(document).ready(ready); function

SOLUTION

I had both a

users.js
and
users.coffee
in my asset pipeline. Apparently
users.coffee
was preventing
users.js
from being loaded. Make sure you delete it!




I'm trying to implement this -- github repo here.

There are two JS files that are required to start chats --
chat.js
and
users.js
. Both include
$(document).ready(ready);
functions. Only I can only get Rails to execute
chat.js


I have confirmed by adding a
console.log("confirm");
just inside both functions like so...

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


I've tried both of these...

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


I have tried adding this to the
application.html.erb
==>
<%= javascript_include_tag "users", "data-turbolinks-track" => true %>


I have tried adding
//= require users
to
application.js


I've tried adding this to
config/initializer/assets.rb
==>
Rails.application.config.assets.precompile += %w( users.js )


Why isn't the
ready
function executing inside
users.js
?

My code repo is here.

Here is
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);


Here is
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
looks like this...

//= 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 .


I have this inside the
<head>
tag of
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 and here is the HTML page (for all code see repo)

<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

I downloaded your repo and deleted users.coffee file:

enter image description here

Comments