Rails 4 - Sizzle returning Uncaught Error: Syntax error, unrecognized expression: [path_name]

Question

Currently working on a Rails 4 project where we have the users log and sign in through modals.

When I click on the link to open the modal, I get an error like this:

As an example: This is the js code used to launch the modal

if($('.modal').length > 0) {
 $("#login").modal();
}
else {
 $("body").prepend("<%= escape_javascript(render "remote_sign_in", :formats => [:html]) %>");
 $("#login").modal();
}

This is the modal itself:

<!-- Modal Login -->
<div class="modal modal-login fade" id="login" tabindex="-1" role="dialog" aria-labelledby="modalLogin" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalLogin">Sign In</h4>
            </div>
            <div class="modal-body">
                <%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :remote => true, :format => :js, :html => {:class => "form-signin"}) do |f| %>

                    <div class="form-group">
                        <label for="" class="sr-only">Email</label>
                        <%= f.input :email, :autofocus => true, :label => false, :input_html => {:class => 'form-control'}, :placeholder => "Email" %>
                    </div>

                    <div class="form-group">
                        <label for="" class="sr-only">Password</label>
                        <%= f.input :password, :label => false, :input_html => {:class => 'form-control'}, :placeholder => "Password" %>
                    </div>

                    <div>
                        <%= f.button :submit, "Sign In", :class => "btn-credential btn btn-flat-alizarin btn-block" %>
                    </div>
                    <% end %>

            </div>
            <div class="modal-footer">
                <div>
                    <%= link_to "Forgot your password?", remote_recover_password_path, :remote => true, "data-dismiss" => "modal"  %>
                </div>
                    <%= link_to "Create an account", remote_sign_up_path, :remote => true, "data-dismiss" => "modal"  %>
                <div>

                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal

And this is the navigation bar code, which displays the link that is to be clicked:

<li>
    <%= link_to "Log in", remote_sign_in_path, :remote => true, class: "login", "data-toggle" => "modal" %>
</li>

And finally, this is the corresponding route:

match 'remote_sign_in', to: 'remote_content#remote_sign_in', via: [:get]

I have no idea what is going wrong.. I've even gone as far as examining the escape_javascript function to see what it is outputting, and it's working as it should. For some reason Sizzle.js is trying to select an element called "remote_sign_in"?

Any help appreciated!

score 0 · Answer 1 · answered Nov 07 '15 at 22:01

0

Your nested quotes are wrong. Try this:

$("body").prepend("<%= escape_javascript(render 'remote_sign_in', :formats => [:html]) %>");

answered Nov 07 '15 at 22:01

Jason

2,725
2
14
22

Thanks - but i'm still getting the same error with that – Jay M Nov 07 '15 at 22:05
I guess it's an error specific to Sizzle, because this code works on my app without Sizzle. Try storing `remote_sign_in` in a variable in your controller and using that variable in your view. – Jason Nov 07 '15 at 22:21

Rails 4 - Sizzle returning Uncaught Error: Syntax error, unrecognized expression: [path_name]

1 Answers1