Why escape_javascript before rendering a partial?

by

It’s easier to understand if you split the code in two parts.

The first part $("#reviews").append("<%= ... %>"); is javascript with erb. This means that the <%= ... %> will be replaced by whatever the ruby code inside of it returns. The result of that replacement must be valid javascript, otherwise it will throw an error when the client tries to process it. So that’s the first thing: you need valid javascript.

Another thing to take into account is that whatever ruby generates must be contained inside a javascript string with double quotes – notice the double quotes around the <%= ... %>. This means that the generated javascript will look like this:

$("#reviews").append("...");

Now let’s examine the ruby part inside the <%= ... %>. What does render(:partial => @review) do? It is rendering a partial – which means that it could be rendering any kind of code – html, css … or even more javascript!

So, what happens if our partial contains some simple html, like this one?

<a href="https://stackoverflow.com/mycontroller/myaction">Action!</a>

Remember that your javascript was taking a double-quoted string as a parameter? If we simply replace the <%= ... %> with the code of that partial, then we have a problem – immediately after the href= there is a double quote! The javascript will not be valid:

// Without escaping, you get a broken javascript string at href
$("#reviews").append("<a href="https://stackoverflow.com/mycontroller/myaction">Action!</a>");

In order for this not to happen, you want to escape these special characters so your string is not cut – you need something that generates this instead:

<a href=\"/mycontroller/myaction\">Action!</a>

This what escape_javascript does. It makes sure that the string returned will not “break” javascript. If you use it, you will get the desired output:

$("#reviews").append("<a href=\"/mycontroller/myaction\">Action!</a>")

Regards!

More Related Contents:

  1. AngularJS- Login and Authentication in each route and controller
  2. Find DOM element by ID when ID contains square brackets?
  3. ExecJS::RuntimeError on Windows trying to follow rubytutorial
  4. Best way to add page specific JavaScript in a Rails 3 app?
  5. Rails – Could not find a JavaScript runtime?
  6. Adding an image within a circle object in d3 javascript?
  7. Object doesn’t support this property or method Rails Windows 64bit
  8. Rails 5: how to use $(document).ready() with turbo-links
  9. JavaScript file per view in Rails
  10. Uncaught ReferenceError: React is not defined
  11. angularjs: allows only numbers to be typed into a text box
  12. Rails javascript only works after reload
  13. How to pass Ruby variables to a JavaScript function in a Rails view?
  14. How to pass a javascript variable into a erb code in a js view?
  15. Rails js.erb file cannot find method “render”
  16. Facebook App: localhost no longer works as app domain
  17. Rails flash notice via ajax
  18. Rails, javascript not loading after clicking through link_to helper
  19. ExecJS::ProgramError: Unexpected token punc «(», expected punc «:» when running rake assets:precompile on production
  20. “Can’t find variable” error with Rails 3.1 and Coffeescript
  21. Detect browser character support in javascript?
  22. How to add jquery third party plugin in rails 6 webpacker
  23. Single Page Application and CSRF Token
  24. Why “Prevent this page from creating additional dialogs” appears in the alert box?
  25. Using Ruby variable in Javascript (In App View)
  26. Rails 5/6: How to include JS functions with webpacker?
  27. Like button Ajax in Ruby on Rails
  28. Ruby on Rails – Send JavaScript variable from controller to external Javascript asset file
  29. .js.erb VS .js
  30. rails and backbone working together

Leave a Comment