Rails js template

Is that syntax definitely correct? I'm at a loss as to how to troubleshoot from here. I updated my answer to be more specific.

I believe trace should work but you could also use console. Make sure you are checking the browser JS log, not the rails server log.

Thanks for the update. Yeah, this had shed some light on the source problem: no js is being rendered inside the template at all. Nothing is logging in the console, there are no errors with the alert, and the final logging statment doesn't appear either. So I guess I'm left wondering how Rails can render this js template, but not process any javascript. JS is rendering in similar JS templates in other parts of the app. I'm not sure what makes this model different.

Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Podcast Making Agile work for data science. Rails shipped without jQuery as a dependency for the first time with version 5. Rails used to rely on jQuery for Unobtrusive JavaScript features but now ships with its own library rails-ujs with the same features.

So this little tutorial walks you through a few ways you can do so. However, when you're not using those methods, for example when you're building a React UI for a Rails app , then you will find this tutorial helpful.

A new Rails 5. Except for one thing! If you know, let me know. To create the home controller, you can use the rails generate command with the controller generator.

In this case, we will specify that we want an index view for our main landing page:. In this step, you will add Bootstrap to your project, along with the tool libraries that it requires to function properly. Inside the file, add the webpack library, along with a ProvidePlugin that tells Bootstrap how to interpret JQuery and Popper variables.

The ProvidePlugin helps us avoid the multiple import or require statements we would normally use when working with JQuery or Popper modules. Inside the file, add the following import statements to import Bootstrap and the custom scss styles file that you will create next:. This is an scss file, which uses Sass instead of CSS. Sass, or Syntactically Awesome Style Sheets, is a CSS extension language that lets developers integrate programming logic and conventions like shared variables into styling rules.

In the file, add the following statements to import the custom Bootstrap scss styles and Google fonts for the project:. You have added Bootstrap to your project, along with some custom styles. Now you can move on to integrating Bootstrap layout conventions and components into your application files. Our first step in integrating Bootstrap conventions and components into the project will be adding them to the main application layout file.

This file sets the elements that will be included with each rendered view template for the application. In this case, because our application root formerly mapped to the index shark view, this would have inserted the content from that view. This raises a couple of questions: Do we want the home view for the application to be the same as what users see when they view the shark application?

And if we want these views to be somewhat different, how do we implement that? The first step will be deciding what should be replicated across all application views. Within this section, however, we can also add a few things that will customize all of our application views. First, add the viewport meta tag that Bootstrap recommends for responsive behaviors:.

Next, replace the existing title code with code that will render the application title in a more dynamic way:. With this code in place, you can add a navigation partial to the layout. Now, if the :content block is set, the application will yield the associated layout.

Otherwise, thanks to the ternary operator, it will do an implicit yield of the view associated with the home controller. With the application-wide layout set, you can move on to creating the shared navbar partial and the sharks layout for your shark views. Before adding layout features, we will need to ensure that the content of the layout is set as the :content block that we reference in the main application layout. Add the following lines to the file to create the block:. Next, inside the block itself, add the following code to create a jumbotron component and two containers :.

Finally, at the bottom of the file, add the following render statement to render the application layout:. This sharks layout will provide the content for the named :content block in the main application layout; it will then render the application layout itself to ensure that our rendered application pages have everything we want at the application-wide level.

The structure of this view will match the layout we defined for shark views, with a main jumbotron component and two containers. Replace the boilerplate code in the file with the following:.