Событие $ (document) .ready () не выполняется - PullRequest
Новая
       29

Событие $ (document) .ready () не выполняется

0 голосов
/ 27 мая 2011

У меня правильно загружается jQuery на Rails 3, и событие $(document).ready() никогда не запускается. Я знаю это, потому что я пытался запустить код в $(document).ready(); вручную через консоль Javascript Google Chrome, и он работал нормально.

Я совсем не уверен, что не так, поэтому я решил спросить StackOverFlow

Обратите внимание, что ERB / ​​HTML еще не хорошего качества. Я только учусь этому.

Вот ЕРБ: 

<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>

Вот HTML-код, выводимый 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>

1 Ответ

4 голосов
/ 27 мая 2011

Сначала вам нужно импортировать файл jquery следующим образом. 

<script type="text/javascript" src="jquery-1.4.1.js"></script>
...