JQuery validator tooltip, need help identifing javascript library? - javascript

Hi can anyone identify which javascript library was used to create this validation ui?
Thanks
EDIT:
I've discovered that this validation is caused by the standard JQuery library by adding required="true" to field names.
I've been debugging in jsfiddle and I've narrowed it down.
See example.
http://jsfiddle.net/WypT8/31/
My main gripe was that I cant get it to work in IE.
Anyone any ideas?
Thanks

Look ma, no JavaScript!
That is actually HTML5; the required attribute is used by the latest HTML5 compliant browsers to validate a form before being submitted.
jsFiddle.
It doesn't work in IE because IE does not support this feature yet.

What about the library detector firefox add on?

Related

Firefox jQuery and jQuery UI validation

Does anyone know if there is a option buried in Firefox to turn off validation per specific file? I like to use the Web Developer Toolbar to alert me if I have errors in my own javascript and css but when I use jQuery and the jQuery UI libraries it always gives me an error. I know that these are made to be cross browser compatible and will not validate but using these defeats the purpose of using the Web Developer toolbar. I have looked through all the options and can't seem to find anything.
Or does someone know of another nice add-in that will do what I want?
Thanks for the help!

jQuery plugin for browser that doesn't support placeholders

Placeholders has always been an issue in IE8 or IE9. As a workaround for this,
I used jQuery plugin that enables placeholder to browsers who does not support this. Since my jQuery is 1.5, I used v1.8.7 of that plugin because $.valHooks is undefined. But what happened is that it seemed didn't work since my placeholders doesn't behave properly in IE8/IE9.
I have already included the jQuery.placeholder.js in my project and since it was stated there that to invoke this is you use this, $('input, textarea').placeholder();. Still i did not work. Are there other ways needed to do before using the plugin.
My placeholder issues are during submission of form and also when replacing the placeholder of 1 textbox.
Your help is greatly appreciated. ;)
You could try using http://modernizr.com
It's a plugin which detects features the user's browser supports. If it's not supported, a jQuery plugin makes it happen!

Javascript not working on google chrome and smartphone browsers

I am working on a ASP.NET/C# Web Application
I have a check box. and I want that check box to simulate a button click when checked/unchecked
I used javascript to do it
<input id="filtercheck" runat="server" type="checkbox" value="Filter" onclick="document.getElementById('Button1').click();"/>
Button1 is a normal button
<asp:LinkButton ID="Button1" runat="server" OnClick="Button1_Click"/>
So when I click on the checkbox, it is the same as if I clicked on the Button1.
Everything works fine on firefox and internet explorer. but this is not working on Google Chrome and smartphone browsers
How can I fix this problem?
in addition there are some few other javascript and Jquery scripts that are working on internet explorer and firefox but not on Google Chrome and smartphone browsers.
What can I do to make sure my website is fully compatible on all browsers?
Thanks a lot for any help
Edit: Yep, it was this first thing. Chrome was choking on the linkButton and not rendering it as expected.
I was going to ask. Is that ID the same as the HTML id attribute? How does an asp "LinkButton" render as HTML?
Edit: I'll leave the rest here in case it's helpful to anyone else having trouble with asp.net shenanigans.
Have you validated your HTML. What you're doing isn't particularly crazy. HTML breakage might be the cause.
Also, try just firing that function once through other means in Chrome.
One thing that's helpful though. Get your JavaScript off the page and put it in a linked file. Do NOT let any Microsoft product tell you anything about making js easier by doing it their way. The best thing they ever did was .net MVC which just gets the hell out of your way.
edit: Wait. Are you using webforms? That might be your problem. In that case you might have to fire focus and then click at the stupid thing. Some MS engineers safeguard against people finding an easy way to daisy-chain around their tomfoolery. I waded through a lot of horrendous JS to figure that one out a while back.
Probably you need Button1 ClientID?
document.getElementById('<%= Button1.ClientID %>').click()
Fully compatible on all browsers? The short answer? No fancy stuff.
A slightly longer answer is just to do what is allowed by the standards set forth by w3c and hope all browsers are compliant. They never will be 100%.
If you can use jQuery, I'd recommend that you use the trigger method
EDIT: as Koste pointed out, you might also want to use the ClientID instead of the actual id.

Comprehensive list of IE8 changes that break JavaScript code

Is there a list online somewhere of IE8 changes that might break existing JavaScript code?
We have a few clients which we developed a few different apps for using jQuery, YUI and some pure JavaScript. All have problems after upgrading their browsers to IE8. The jQuery display we did won't show. Tabs in YUI won't work. And table.deleteRow in JavaScript doesn't seem to work anymore.
Links to individual issues and fixes would also help. Thanks.
Microsoft released Internet Explorer 8 Readiness Toolkit which gives a pretty good overview of IE8 changes. In particular, check DOM improvements - changes in getAttribute is a common source of incompatibilities.
Resig also blogged about some of IE8 changes.
For a list of known IE8 bugs, check Web Bug Track and a compilation by gtalbot.org
In my experience, IE8 would break my JavaScript in a few selected places. After a few hours of Bugsearch, I found out that an HTML id cannot be the same as a function name.
For Instance:
<div id="addToCart">foobar</div>
and
function addToCart {
//Spy sappin' mah function!
}
In this Example, the function addToCart would break because the div has the same name as the function. I have yet to find an explanation for this.
Note
This is a personal Observation. Could other developers confirm this for me?
It seems you forgot this () after the function declaration.
function addToCart() {
//Spy sappin' mah function!
}

HTML Custom Attributes Not Working in Chrome

When using HTML custom attributes it doesn't works in Chrome.
What I mean is, suppose I have this HTML:
<div id="my_div" my_attr="1"></div>
If I try to get this attribute with JavaScript in Chrome, I get undefined
alert( document.getElementById( "my_div" ).my_attr );
In IE it works just fine.
Retrieving it via getAttribute():
alert(document.getElementById( "my_div" ).getAttribute("my_attr"));
Works fine for me across IE, FF and Chrome.
IE is about the only browser I've seen that honor attributes that do not conform to the HTML DTD schema.
http://www.webdeveloper.com/forum/showthread.php?t=79429
However, if you're willing to write a custom DTD, you can get this to work.
This is a good article for getting started down that direction:
http://www.alistapart.com/articles/scripttriggers/
Got same problem for Safari and using getAttribute(..) made the magic. It looks like cross browser compatible. Here is nice article http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
Are you declaring your page as XHTML compliant? You can't add new attributes to elements willy-nilly if you do. My understanding is that there are ways (after all, ASP.NET succeeds at it), but you have to emit all kinds of gunk (custom schema?). I'm not familiar with the details.

Categories