Where to put JS in Rails?

advertisements

I want to know where to put javascript file in ruby on rails.

I am using jQuery dialogue box in my app. All jQuery and CSS files I put under assets/javascripts and assets/stylesheets.

Now I have some JavaScript code in my view page that is "my_event". Where to put this JavaScript code?

I googled for this and found something that suggested to make a my_event.js file and put this file inside the views/useraccount directory.

Seeking your valuable suggestion.

Controller useraccount.rb

View my_event.html.erb

<script>
    $(document).ready(function() {

        $('#calendar').fullCalendar({

            header : {
                left : 'prev,next today',
                center : 'title',
                right : 'month,agendaWeek,agendaDay'
            },
            // US Holidays
            events : '/useraccount/my_event',
            eventClick : function(event) {
                // alert (JSON.stringify(event,null,4)); return false;
                if (event.description) {
                    var a = '<button onclick="addToMycal(' + event.id + ')">UnJoin</button>'
                    $("#Successmes").empty();
                    $('#event-desc').html(event.description);
                    $('#add-to-my-cal').html(a)
                    $("#dialog-modal").dialog({
                        height : 350,
                        width : 600,
                        modal : true,
                        buttons : {
                            Ok : function() {
                                $(this).dialog("close");
                            }
                        }

                    });
                } else {
                    $('#event-desc').html("<h4>Oops!</h4> No Data Available");
                    $("#dialog-modal").dialog({
                        height : 300,
                        width : 363,
                        modal : true,
                        buttons : {
                            Ok : function() {
                                $(this).dialog("close");
                            }
                        }
                        // alert (event.description);
                    });
                }
            },
        });
    });

</script>

<script>
    function addToMycal(val) {
        $.getJSON("/useraccount/delete_event?d=" + val, function(data) {
            // alert (JSON.stringify(data,null,4)); return false;
            $("#Successmes").empty();
            $("#event-desc").html(data.msg)
            $("#add-to-my-cal").remove();

        });

    }

</script>
<style>
    #calendarbody {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    }

    #calendar {
        width: 900px;
        margin: 0 auto;
        background-color: #E7EAF6;
    }

</style>
<div id="calendarbody">
    <div id='calendar'></div>
</div>

<div id="dialog-modal" title=" Event Description">
    <p id="event-desc"></p>
    <div id="add-to-my-cal"></div>
    <p id="Successmes"></p>

</div>


Put it in assets/javascripts folder, and require it in your application.js file. If your application.js file has require_tree ., no need to require your js file again.