Colorbox Syntax error: unrecognized expression - javascript

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?

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.

Related

Uncaught TypeError: all Spaces need to be clear for https?

I am creating a website with https: .
It always showing errors for all spaces within tags (in chrome developer console).
If I clear a space showing in error, it again points to the new line that containing a space/break/enter between every tags whenever I try to clear the error message.
I know it wants me to clear all the spaces between each of html tags, that unnecessary. But how can I remove for the whole thousands code containing website, text replacing is not also OK for attribute's spaces.
How can I escape that error catch. Thank you so much.
error line 239 is moved to line 236 for clearing spaces in this picture.
If I clear spaces in line 236 :It moved to 235
<div class="android-drawer mdl-layout__drawer">
<span class="mdl-layout-title">
<img class="android-logo-image" src="images/text.png">
</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link"><b style="color:black;align:center;">Your abc</b></a>
<!-- <a class="mdl-navigation__link" href="">Tablets</a>
<div class="android-drawer-separator"></div>
<span class="mdl-navigation__link" href="">Versions</span>
<a class="mdl-navigation__link" href="">Lollipop 5.0</a> -->
</nav></div><div class="android-content mdl-layout__content" style="overflow:hidden;"><a name="top"></a><div class="android-be-together-section mdl-typography--text-center"><div class="logo-font android-slogan ">
Please help me .
I think you are looking at it the wrong way.
The error clearly says
'cannot read property addEventListener of null'
SOLUTION 1:
This means that you are trying to add an evenLisener on a dom object which is not present. Please look at you javascript code which is adding even listener to a null object.
SOLUTION 2:
If you are not adding any event listeners and still the error is coming then some of your library is causing this problem. Please load the libraries after the html is loaded. That may help you debug and find which library is causing the problem.

JQuery Input[Name=""] not getting recognized on Firefox

I have a JavaScript code that reads the content of an html textbox and is working on IE and Chrome but is not being recognized by Firefox.
HTML Code:
<div id="SetInner_Form">
<form name="Set_Password" method="post" action="">
Email Address
<input class="Auth" name="SetPwd_Username" type="text"/><br/><br/>
New Password <input class="Auth" name="SetPwd_NewPwd" type="password"/><br/><br/>
Retype Password <input class="Auth" name="SetPwd_RetypePwd" type="password"/><br/><br/>
<div id="SetPwdResultWrapper">
<div id="SetPwdResult" class="Validation_2"></div><br/>
</div>
<div id="RedirectLink" align="center" class="NoDisplay">Click <a href='https://localhost/webapp/index.aspx'>here</a> to go to main page</div><br/>
</form>
<div id="SetPwdBtnWrapper">
<input id="SetPwdBtn" name="SetPwdBtn" type="submit" value="Confirm" align="center"/>
</div>
<img id="LoadingIcon_auth"/>
</div>
Javascript Code:
$("input[name=SetPwd_Username]").val()
Exception (on Firefox console):
Uncaught exception: Syntax error, unrecognized expression: input[name=SetPwd_Username
JQuery version is: jquery-1.6.4.min.js
The weird part is, Firefox can recognize the other html elements except for the SetPwd_Username
Am I missing something?
Based on your error message, you forgot the closing ] in the selector.
This:
"input[name=SetPwd_Username"
would not be valid, and produces that exact error message.
Chrome does not give an error for the invalid selector. It seems that its .querySelectorAll() implementation doesn't reject it as it should. That's the reason for the difference.
Because Firefox correctly rejects the selector, it defaults to the Sizzle engine, which then throws the error. Since Chrome doesn't reject it, you don't get the error.
Try putting the name of the field in single quotes.
$("input[name='SetPwd_Username']").val()
^ here ^ and here
You must notice : have a diffirence between css and jquery, that is sysmbon "'"
in jquery
$("input[name='SetPwd_Username']")
and in css
input[name=SetPwd_Username]{
}

Unhandled Error: Cannot convert 'document.getElementById(punkte_liste_titel_user)' to object

I have a html page (partly generated with PHP), and I have a JavaScript file included at the bottom of the page that provides some onclick functions. I was struggling to get the variables from PHP to JS, so I created two <span>s with unique ids and put the content of the variables there (numeric/int values). My idea was to use var php_get_userid = document.getElementById(punkte_liste_titel_user).innerHTML; to have JS read the values into variables, and then use them.
However the getElementById doesn't work although the <span> with the corresponding ID definitly does exist. In Opera it says
Unhandled Error: Cannot convert
'document.getElementById(punkte_liste_titel_user)' to object
Chrome says
Uncaught TypeError: Cannot read property 'innerHTML' of null
The HTML of the area looks like this
<body>
<div id="wrapper">
<div id="punkte_liste_titel">
Points <span id="punkte_liste_titel_datum">20130901</span>/<span id="punkte_liste_titel_user">3</span>
</div> <!-- Ende Punkteliste -->
<div id="punkte_liste">
...
the JS starts like this
$('.punkte_kategorie_element').click(function() {
var php_get_userid = document.getElementById(punkte_liste_titel_user).innerHTML;
var php_get_datum = document.getElementById(punkte_liste_titel_datum).innerHTML;
...
the JavaScript file is included right before the </body> tag
I tried to create a minimal version of this at http://jsfiddle.net/WRfh5/2/ which doesn't run either... what am I missing?
you forgot to enclose id in quotes
getElementById
document.getElementById('punkte_liste_titel_user').
^ ^
jsfiddle

jquery 1.9 .html() on div not working in Chrome ? Neither does innerHTML?

I'm using this code :
function updateList(searchStr){
$.ajax(getSearchURL(true) + searchStr).done(function(data) {
$("#div_list").html($(data).find("#div_list").html());
});
};
to update my div #div_list with new data.
When I'm doing that in FF, it works flawlessly. However, in chrome, it fails with the following message in the console :
Uncaught TypeError: Cannot call method 'replace' of undefined
I divided the code in 2, like so :
function updateList(searchStr){
$.ajax(getSearchURL(true) + searchStr).done(function(data) {
var test = $(data).find("#div_list").html();
$("#div_list").html(test);
});
};
Chrome tells me the var test line is the one at fault.
After playing around a bit, I discovered that
$(data).find("#div_list")
Is indeed defined, as an alert on this will give [object Object]
So I said, hell, i'll just use normal non-jquery methods then, and tried:
function updateList(searchStr){
$.ajax(getSearchURL(true) + searchStr).done(function(data) {
$("#div_list").html($(data).find("#div_list")[0].innerHTML);
});
};
This also failed, with the same TypeError.
Can someone point me in the right direction ?
Thanks a lot.
EDIT : A sample answer
<?xml version="1.0" encoding="UTF-8"?>
<html>
<div version="2.0" id="div_list">
<script type="text/javascript">
dojo.require('dijit.TitlePane');
</script>
<div id="XXX">
<table>
<thead>
<tr>//Some rows
</tr>
</thead>
<tr>More rows with data
</tr>
<tr class="footer">
<td colspan="7"><span class="new"><a href="/items?form"><img title="Create new Item"
src="/resources/images/add.png" alt="Create new Item" /></a></span></td>
</tr>
</table>
</div>
</div>
</html>
EDIT2: Using console.log for $(data).find("#div_list") gives
[div, prevObject: st.fn.st.init[1], context: document, selector: "#div_list", jquery: "1.9.0", constructor: function…]
Also, changing the datatype to "html" does nothing.
Ok, so I figured a simple way of doing what I wanted.
I turns out that using the $.load() method of jquery parses everything as HTML. That way, even if InnerHTML is not defined for XML in Chrome (which is I think the reason why the code wasn't working in chrome), it still works.
I got the same exception but in my case i were using the xml parse from jquery and what i wanted is to get the String from the parse to update the file/string.
$(xmlParsed).find(selector).text(value);
$root = $(xmlParsed).find('root');
where the exception appear in:
$root.html()
The way it works is:
xmlFile = (new XMLSerializer()).serializeToString($root.context)
Changing the class selector into ID selector works for me. Don't know the reason.
Ex.
<div class="abc"></div> to <div id="abc"></div>

Underscore template in HTML generating mysterious 404 errors

Okay, I have this underscore template (simplified version), rendered from _template.html.erb, in my Rails app, somewhere on the page:
<script type="text/html" id="mytemplate">
<div class="foo">
<img src="{{= my_variable }}" />
</div>
</script>
Then I render it like this, elsewhere, when required:
// change it to mustache-style because of defaults clashing with erb
_.templateSettings = {
interpolate: /\{\{\=(.+?)\}\}/g,
evaluate: /\{\{(.+?)\}\}/g
};
options = {
my_variable: '/foo/bar/baz.img'
}
compiled = _.template($("#mytemplate").html());
$(compiled(options)).appendTo("#wherever");
This, in theory should work just fine and it does, except errors like this started popping up in server logs and elsewhere, browsers 404-ing on URLs like: http://example.com/{{=%20my_variable%20}}, or http://example.com/foo/{{=%20my_variable%20}}.
Now, my hunch is that it has something to do with the fact that it's an img tag and somehow the browser tries to GET it from the page, even though it's wrapped in script tags, but I have no idea why on earth. This is one of the recommended methods by many people for embedding underscore templates into HTML. And I can't attribute it to older browsers and/or robots either because server logs show these are real people using the latest Chrome etc.
Edit: after a bit more investigating, 1. it only happens to a few people (unique IPs) 2. all of them are using the latest version of Chrome. So maybe it's an extension gone haywire?
Any ideas?
You must change the type="text/html" to something non-existent like type="x-template" (or anything really)
This normally works if the cache is cleared and all.
If nothing really does it, then you could use external templates (files that you load). But if you want to keep them inline, then escape the problematics chars (with internal JS char encoding). This will be parsed the same by JS, but won't get caught by HTML parser.
You can use this tool: http://mothereff.in/js-escapes (uncheck the "only escape non-ASCII and unprintable ASCII characters" box)
That's what it could looks like:
<script type="text/html" id="mytemplate">
<div class="foo">
\x3Cimg src="{{= my_variable }}" />
</div>
</script>

Categories