Search code examples
javascriptjquerycodeignitercolorbox

Colorbox Syntax error: unrecognized expression

I'm working with new site that uses CodeIgniter and HTML5 layout.
I copied some code from my old website where this works, but when I try this on my new website, it gives me this error:

Error: Syntax error, unrecognized expression: http://localhost/new/#login  

Line: 4680  

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};

I'm using jQuery 1.8.3

My code: 

<a class="login" href="#login">login</a>
<section style="display:none">
    <section id="login">
        <h1>Login</h1>
        <p>Form here</p>
    </section>
</section>


<script type="text/javascript">
    $(document).ready(function(){
        $(".login").colorbox({inline: true, width:"50%", height:"50%"});
    });
</script>

Tested with Firefox and IE and both doesn't work...

I tested with Jsfiddle and it worked, like on my other site.

If I remove "inline: true", it works and tries to load new website with Colorbox.

Any ideas?

Solution

  • This would appear to be a bug in .colorbox.

    HTML links, when converted to a string, result in the fully-resolved URL that the link points to. In this case, #login is resolved to http://localhost/new/#login.

    It would appear that colorbox may be doing something that converts the element to a string and re-runs it through $(). Since the URL is clearly not a valid selector, Sizzle (the selector engine) throws the error.

    I'm afraid I can't tell you how to fix it, particularly since doing so would involve digging around the source code of many files. However, try using a <button> instead and see if that makes any difference.