Ruby on Rails script not being loaded

Question

In my ruby on rails application, I'm generating a view via an ajax call.

I'm using following piece of code.

$("#a_div_id").html("<%= escape_javascript(render 'index')%>");

And the view I'm trying to render is _index.html.erb:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
</div>

<script>

    alert('first');

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

        alert('second');

        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });

    alert('third');

</script>

When I render the view, I'm getting only first and third messages. However, when I add this piece of code into dashboard.html.erb rather than rendering it via the ajax code, it perfectly works.

In the first case, I'm getting the following error.

angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A20%3A274)
    at angular.min.js:6
    at angular.min.js:38
    at n (angular.min.js:7)
    at g (angular.min.js:37)
    at eb (angular.min.js:41)
    at c (angular.min.js:19)
    at yc (angular.min.js:20)
    at Zd (angular.min.js:19)
    at HTMLDocument.<anonymous> (angular.min.js:294)
    at fire (jquery.self-bd7ddd3….js?body=1:3233)

I'm be at my wits' end, I couln't decide what I'm missing,

Any suggestions,

Thanks. ​

Answer 1

Can you try without escape_javascript. Also put a debugger like this, this will put a break point when chrome executes the js.

debugger;
$("#a_div_id").html("<%= render 'index' %>");

That would help you see what exactly jquery is trying to add as HTML.

If this doesn't work,

Probably you should take the js in script tag and put it in some method and call that method after you have added index to dom.

$("#a_div_id").html("<%= render 'index' %>");
myMethodToRenderAngular();