I have jQuery loading correctly on Rails 3, and the $(document).ready() event never gets run. I know this because I tried running the code within the $(document).ready(); manually via Google Chrome’s Javascript Console and it ran just fine.
I’m not sure at all what’s wrong, so I thought I’d ask StackOverFlow
Please note that the ERB/HTML isn’t of good quality yet. I’m just learning this.
Here’s the ERB:
<html>
<head>
<style type="text/css">
#Agenda
{
background-color: #36175E;
width: 960px;
margin: 0 auto;
text-align: center;
}
#assignment
{
background: green;
width: 600px;
height: 500px;
float: right;
margin: auto;
}
#accordion
{
margin: auto;
width: 350px;
height: 500px;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#accordion').accordion();
SetupAccordionItems();
});
//This is probably not the best way to do it
$('li[id]').click(function(e)
{
SetupAssignment(this.id);
});
function SetupAssignment(Assignment_ID)
{
if (Assignment_ID != null)
{
$('#ShowAssignmentInstructions').fadeOut('slow');
document.getElementbyID(ShowAssignmentInstructions).visibility = "hidden";
var Assignment = "BAEGLS";
document.getElementbyID(Assignment_Name).InnerText = Assignment.name;
document.getElementbyID(Due_Date).InnerText = Assignment.due_date;
if (Assignment.image == null)
{
Assignment.image = Assignment.Unit.Image;
}
document.getElementbyID(Assignment_Image).src = Assignment.Image;
//Resets contents of the paragraph describing the assignment
document.getElementByID(basic_assignment_info).InnerText = null;
document.getElementbyID(basic_assignment_info).InnerText = "This assignment is worth " + Assignment.DefaultMaximumPoints + "points.";
document.getElementbyID(assignment).style.visibility = "visibility";
document.getElementbyID(Assignment_Status).src = Assignment.Status;
}
else
{
$('#ShowAssignmentInstructions').fadeIn('slow');
}
}
function SetupAccordionItems()
{
var AssignmentsDueNextSchoolDay = <%= GetByDueDateForCurrentUser(@nextSchoolDay) %>;
var AssignmentsDueNextNextSchoolDay = <%= GetByDueDateForCurrentUser(@nextNextSchoolDay) %>;
var AssignmentsDueNextNextNextSchoolDay = <%= GetByDueDateForCurrentUser(@nextNextNextSchoolDay) %>;
for (assignment in AssignmensDueNextSchoolDay)
{
AppendAccordionItem(Assignment, "DueInOneSchoolDay");
}
for (Assignment in AssignmentsDueNextNextSchoolDay)
{
AppendAccordionItem(Assignment, "DueInTwoSchoolDays");
}
for (Assignment in AssignmentsDueNextNextNextSchoolDay)
{
AppendAccordionItem(Assignment, "DueInThreeSchoolDays");
}
}
function AppendAccordionItem(Item, ID)
{
$("<li>", {id:Item.ID, text:Item.Name}).appendTo(ID);
}
</script>
</head>
<body>
<div id="Agenda">
<h1 id="Agenda_Title">Agenda</h1>
<div class="accordion" id="accordion">
<h3 id="TomorrowsDate"><%= @nextSchoolDay %></h3>
<ul id="DueInOneSchoolDay">
</ul>
<h3 id="DueDayAfterTomorrow_Title"><%= @nextNextSchoolDay %></h3>
<div>
<ul id="DueInTwoSchoolDays">
</ul>
</div>
<h3 id="DueDayAfterDayAfterTomorrrow_Title"><%= @nextNextNextSchoolDay %></h3>
<ul id="DueInThreeSchoolDays">
</ul>
</div>
<div id="assignment" display="hidden">
<h2 id="Assignment_Name"><center>Assignment Name</center></h2>
<h3 id="Due_Date"><center>Due Date</center></h3>
<img id="Assignment_Image" src="#"/>
<br>
<button id="Start_Assignment">Start Assignment</button>
<p id="basic_assignment_info">
</p>
<img id="Assignment_Status" src="#"/>
</div>
</div>
</body>
</html>
Here’s the HTML outputted by the ERB
<html>
<head>
<style type="text/css">
#Agenda
{
background-color: #36175E;
width: 960px;
margin: 0 auto;
text-align: center;
}
#assignment
{
background: green;
width: 600px;
height: 500px;
float: right;
margin: auto;
}
#accordion
{
margin: auto;
width: 350px;
height: 500px;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#accordion').accordion();
SetupAccordionItems();
});
//This is probably not the best way to do it
$('li[id]').click(function(e)
{
SetupAssignment(this.id);
});
function SetupAssignment(Assignment_ID)
{
if (Assignment_ID != null)
{
$('#ShowAssignmentInstructions').fadeOut('slow');
document.getElementbyID(ShowAssignmentInstructions).visibility = "hidden";
var Assignment = "BAEGLS";
document.getElementbyID(Assignment_Name).InnerText = Assignment.name;
document.getElementbyID(Due_Date).InnerText = Assignment.due_date;
if (Assignment.image == null)
{
Assignment.image = Assignment.Unit.Image;
}
document.getElementbyID(Assignment_Image).src = Assignment.Image;
//Resets contents of the paragraph describing the assignment
document.getElementByID(basic_assignment_info).InnerText = null;
document.getElementbyID(basic_assignment_info).InnerText = "This assignment is worth " + Assignment.DefaultMaximumPoints + "points.";
document.getElementbyID(assignment).style.visibility = "visibility";
document.getElementbyID(Assignment_Status).src = Assignment.Status;
}
else
{
$('#ShowAssignmentInstructions').fadeIn('slow');
}
}
function SetupAccordionItems()
{
var AssignmentsDueNextSchoolDay = <%= GetByDueDateForCurrentUser(@nextSchoolDay) %>;
var AssignmentsDueNextNextSchoolDay = <%= GetByDueDateForCurrentUser(@nextNextSchoolDay) %>;
var AssignmentsDueNextNextNextSchoolDay = <%= GetByDueDateForCurrentUser(@nextNextNextSchoolDay) %>;
for (assignment in AssignmensDueNextSchoolDay)
{
AppendAccordionItem(Assignment, "DueInOneSchoolDay");
}
for (Assignment in AssignmentsDueNextNextSchoolDay)
{
AppendAccordionItem(Assignment, "DueInTwoSchoolDays");
}
for (Assignment in AssignmentsDueNextNextNextSchoolDay)
{
AppendAccordionItem(Assignment, "DueInThreeSchoolDays");
}
}
function AppendAccordionItem(Item, ID)
{
$("<li>", {id:Item.ID, text:Item.Name}).appendTo(ID);
}
</script>
</head>
<body>
<div id="Agenda">
<h1 id="Agenda_Title">Agenda</h1>
<div class="accordion" id="accordion">
<h3 id="TomorrowsDate"><%= @nextSchoolDay %></h3>
<ul id="DueInOneSchoolDay">
</ul>
<h3 id="DueDayAfterTomorrow_Title"><%= @nextNextSchoolDay %></h3>
<div>
<ul id="DueInTwoSchoolDays">
</ul>
</div>
<h3 id="DueDayAfterDayAfterTomorrrow_Title"><%= @nextNextNextSchoolDay %></h3>
<ul id="DueInThreeSchoolDays">
</ul>
</div>
<div id="assignment" display="hidden">
<h2 id="Assignment_Name"><center>Assignment Name</center></h2>
<h3 id="Due_Date"><center>Due Date</center></h3>
<img id="Assignment_Image" src="#"/>
<br>
<button id="Start_Assignment">Start Assignment</button>
<p id="basic_assignment_info">
</p>
<img id="Assignment_Status" src="#"/>
</div>
</div>
</body>
</html>
First you need to import jquery file like this.