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]{
}
Related
I am facing a strange issue which take my 4 to 5 hours but i am still unable to find a solution.
The error is i am getting is my code is just working fine on chrome and firefox safari all browsers but when i am running it on IE11 it throw me this error:
[Vue warn]: Error compiling template: <div class="floating-chat lh-2-0" id="chat-app"> <span class="title pull-lef col-md-12"> <span class="chat-notification-icon" v-if="this.unreadChatOfUsersCount.count > 0"> {{this.unreadChatOfUsersCount.count}} </span> Messaging </span> <div class="pull-righ col-md-"> </div>
Please someone give me a solution for this.
I converted my all methods from method(){} to method: function(){} also add polyfill but cant reach to result.
I had such problem on my project. It can happen in case you are using IE incompatible code in the component template.
For me, it was string interpolation in the href attribute.
I am using jquery. If I have a div that looks like this:
<div class="container" title="Mark">
and I run:
find('div.container["title=Mark"]');
then it works. Which means, the element is found.
However, if I have another div that looks like this:
<div class="container" title="Mark Person">
then it doesnt work. Which means: the element is not found and jquery give an exception:
Error, Syntax Error: unrecognized expression.
It seems that when "title" is a string with no whitespaces or other characters like slash, then it works. In other case, jquery doesnt understand that tag.
is there a way to avoid changing in my code everywhere (it is a lot of changes) and make find-function to work with this elements?
You've got your " marks in the wrong place. Place them around the value:
var mp = $(document).find('[title="Mark Person"]');
mp.css('font-weight', 'bold');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" title="Mark Person">should be bold</div>
<div class="container" title="Mark">should not be bold</div>
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.
I'm using tinymce in Wordpress for some custom needs. It was working fine yet now seems to be throwing an error that I previously did not have.
From Firebug:
TypeError: tinymce.get(...) is null
geqqo_new: tinymce.get('geqqo-editor-new').getContent()
However things look perfectly reasonable - they were working before - so please double check me:
JS:
tinymce.get('geqqo-editor-new').getContent()
GENERATED HTML:
<form action="" method="post" target="_blank">
<div id="wp-geqqo-editor-new-wrap" class="wp-core-ui wp-editor-wrap html-active">
<link rel='stylesheet' id='editor-buttons-css' href='http://localhost/hawaii/somelocal/wp-includes/css/editor.min.css?ver=3.9' type='text/css' media='all' />
<div id="wp-geqqo-editor-new-editor-tools" class="wp-editor-tools hide-if-no-js">
<div id="wp-geqqo-editor-new-media-buttons" class="wp-media-buttons"><span class="wp-media-buttons-icon"></span> Add Media</div>
<div class="wp-editor-tabs"><a id="geqqo-editor-new-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">Text</a>
<a id="geqqo-editor-new-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">Visual</a>
</div>
</div>
<div id="wp-geqqo-editor-new-editor-container" class="wp-editor-container"><textarea class="wp-editor-area" rows="20" autocomplete="off" cols="40" name="content" id="geqqo-editor-new"></textarea></div>
</div>
</form>
So with all considered, why am I getting an error such as stated above?
Also, this is using Wordpress's tinymce functionality, so perhaps there is a curve-ball being thrown as of this latest version?
Try these step by step and see if they fix the problem:
Replace your existing theme with 2014
Disable all plugins
FBJS is driving my mental, I am having problems with selecting elements. I have the following on the content of my page:
<button id="sendmessage" type="submit" style="border: 0; background: transparent">
<img src="Button.png" alt="Submit" />
<div id="output">Send Message</div><span id="overlay"></span>
</button>
And as part of my FBJS I have
var refSendMessage = document.getElementById('sendmessage');
var refOutput = document.getElementById('output');
However
refSendMessage.setDisabled(true);
Gets the error Uncaught TypeError: Cannot call method 'setDisabled' of null
But
refOutput.setTextValue("Sending...");
Works fine!
Why is the type of refSendMessage null but refOutput is fine? The ID's are declared in the same place?
Need a JS wizard please :-)
Many thanks for your time,
Extra information, if I use <span id="sendmessage"></span>, no error occurs. Could this be a Facebook Bug?
Make sure you don't have anything else with id 'sendmessage' on the page.
Try to change <button> to an <input type="button"> with id 'sendmessage' and see if document.getElementById('sendmessage') still returns null. If not, perhaps Facebook has trouble with the <button> element?
Try looking at the rendered markup and make sure the Facebook-generated id specified inside document.getElementById() matches the Facebook-generated id of your button element. If they don't match, then of course a null will be returned.