I'm having issues with a application that I am writing that uses Dojo and Zend Framework. The issue only effects Internet Explorer 6, other versions of IE, ff, chrome and safari work fine with no issues.
When IE6 lands on the login page it crashes with the send details to microsoft dialog box. The login script uses dojo to provide some validation for the users to ensure that their passwords are formatted correctly etc.
I've seen on some forums that addOnLoad() function call in dojo could be the cause and a window.setTimeout() would help. http://www.dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/dom-manipulation-addonload-crashes-ie6
The problem I have is how to manipulate the dojo header that we have in the layout.phtml in the application. We currently have in the file this code in the header.
<?php
$this->dojo()->setLocalPath($this->baseUrl().'/javascript/dojo/dojo.js');
$this->dojo()->addStylesheetModule('dijit.themes.tundra');
echo $this->dojo();
?>
This produces the following in the html.
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
dojo.forEach(zendDijits, function(info) {
var n = dojo.byId(info.id);
if (null != n) {
dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
}
});
dojo.parser.parse();
});
var zendDijits = [{"id":"username","params":{"regExp":"[a-z0-9_\\+-]+(\\.[a-z0-9_\\+-]+)*#[a-z0-9-]+(\\.[a-z0-9-]+)*\\.([a-z]{2,4})$","invalidMessage":"Please enter a valid email address","trim":"true","required":"true","dojoType":"dijit.form.ValidationTextBox"}},{"id":"password1","params":{"trim":"true","lowercase":"true","regExp":"^.*(?=.{6,})(?=.*\\d)(?=.*[a-zA-Z]).*$","invalidMessage":"Invalid Password. Password must be at least 6 alphanumeric characters","required":"true","dojoType":"dijit.form.ValidationTextBox"}},{"id":"submit","params":{"label":"Login","dojoType":"dijit.form.Button"}}];
How can I change this to try and add the fixes mentioned in the link, or is there another way to write this without IE6 crashing all the time?? I would prefer to fix this than remove all the client validation, just in case the client is using IE6.
thanks...
Can you reduce it down until you find what is crashing IE6? Save off your output as static html, confirm it still crashes IE and start removing code. Take that addOnLoad out altogether - does it still crash? if not, take out the forEach, and so on. Start removing elements from zendDijits array - is there one in particular that causes the trouble?
Is this a stock IE6? Any plugins/addons?
Your php there should be producing a script element to pull dojo.js. You've got soemthing wierd going on - that Zend code is known to work so we need all the information if you want to solve this.
Related
Reasoning for this Question
I am aware that browser detection can never be 100% reliable as the User Agent header can always be forged, however, I am not bothered by this.
Although there are many questions on this topic, they all seem to be quite old, so to get an up to date answer I felt I should ask this question again.
I am currently detecting the browser name and version server side using the PHP browscap, and then returning the name and version into javascript variables (not a very good method). The reason why I need to do this is simply to display a message to visitors if they are not using a supported browser.
Current method (something similar):
<script type="text/javascript">
var browser = new Array();
browser['browser'] = '<?php echo $browser_name; ?>';
browser['version'] = '<?php echo $browser_version; ?>';
browser['error'] = '<?php echo $browser_error; ?>';
</script>
It would be much better to do this client side as the browscap can be quite slow, and it would prevent me having to pass values into javascript variables from PHP. If you think using PHP is a better method then please state in your answer, this is just my opinion.
Question
Therefore, my question quite simply, is the following link a reliable method for determining the browser name and version?
Javascript Detect
I am aware that new browsers will need to be added to this, this does not bother me. I am more concerned about whether the algorithm used is reliable.
Thanks in advance
UPDATE 1
To see what I mean, take a look at https://www.icloud.com/ in Internet Explorer 7 or less. You will receive a message saying that the browser is not supported. This is easy to do for IE as you can simply use the <!--[if gt IE..., however, I need to test all browsers.
This does not look right, you can fetch browser information from Javascript. No need to mix JS and PHP code to do that.
You can do something like this to fetch, and detect user browser with just JavaScript:
var userAgent = navigator.userAgent.toLowerCase();
var old = false;
// Internet Explorer 7
if (userAgent.indexOf('msie 7.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 7.0') !== -1) { old = true; }
// Internet Explorer 6
else if (userAgent.indexOf('msie 6.1') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.01') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0') !== -1) { old = true; }
...
// Detect any other browser versions you consider old
if(old = true) {
// Show notification and alert users that they are using old browser
}
This is how you can do it using JS, but you can also use HTML to achieve this:
<!--[if lte IE 6]>
// include your .css style or do whatever you want to alert users their browser is old
<![endif]-->
Short answer to your question is YES, its wrong to detect user browser the way you do it, since you can do it with plain JavaScript, or even with HTML. No need to mix PHP and JS code here, and at the end, both PHP and JS will get the same UserAgent info.
Explanation
After extensive research and discussing amongst other developers, it is clear that there is no reliable method for retrieving the browser name and version from the User Agent. This is down to several reasons:
The format of a browsers User Agent can change at any time if the developers of the browser so wish to do so. This could immediately prevent some scripts from working correctly.
Users can forge their User Agents to mimic other browsers, and therefore would appear to be using a browser they are not.
Possible Solutions
Whilst I hugely discourage the use of these scripts as they could stop working at the release of an update to any browser anytime, if you do wish to detect the browser name and version in Javascript then I would advise using this script:
Javascript Detect
However, the most reliable method for retrieving the details of the browser is without a doubt the browscap supplied by Gary Keith. The browscap project offers extensive information about each browser and OS gathered from the User Agent. It is very easy to implement and even easier to use. To read more, take a look at:
Gary Keith - Browscap
If you choose to use the browscap by Gary Keith, you will need to ensure it is updated weekly at the very least.
Answer
Whilst I am contradicting myself with this answer, it is clear that detecting the browser information with any sort of script is not advised. The only reliable method of browser detection is that of the Internet Explorer HTML conditions, and as stated, these only cover Internet Explorer.
Try to avoid browser specific functions and notices, and make use of the built in features such as:
media="only screen and (device-width: 768px)"
and
<!--[if IE 8]>I am IE 8<![endif]-->
This question needs an updated answer. I think the best option these days for client-side detection is WURFL.
Its an updated library of devices based on Useragents - think Browscap for the client side.
Load the JS and it returns JSON based on the device that requested the js. Perfect!
<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>
Because it does the parsing on the WURFL server side, you need to load the js remotely and not save it in your dir tree.
A super easy
WURFL.is_mobile
is all it takes to determine mobile for example.
Good luck.
You could try having a look at navigator.appName and navigator.userAgent.
The yepnopejs IE detection (!ie prefixes) works by utilizing the MS conditional comments.
A short snippet for detecting versions of IE prior to IE10 in JavaScript without resorting to user-agent sniffing.
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
);
// …
https://github.com/SlexAxton/yepnope.js/blob/master/prefixes/yepnope.ie-prefix.js
yepnope usage example:
yepnope({
load: ['normal.js', 'ie6!ie7!ie-patch.js'] // patch for ie6 or ie7 only
});
You can use a perfect plugin for this information written in jQuery (like javascript)
look at this link:
https://github.com/jquery/plugins.jquery.com
Be sure to do feature detection instead of browser detection when you want to determine if a certain feature is available in a browser, apply bugfixes, etc.
I want to send some info back to my database when a user prints a certain web page. I can do this in IE with onbeforeprint() and onafterprint() but I would like to browser agnostic way of doing the same thing. Don't care which combination of technologies I have to use (PHP, MySQL, JavaScript, HTML) so long as it gets done. Any ideas?
EDIT:
Still having some problems with this. I tried the putting my function in my Print.css as an image, but I am messing it up some how. Then I tried just adding a event listener, but I cannot get that to work quite right either. If anyone can provide some more details on how I might call a function right before print in ANY browser I would appreciate it.
EDIT:
I am giving up on this for now, I have settled with another way of doing what I want. I look forward to the day when FireFox supports onbeforeprint() and onafterprint().
Many browsers now support window.matchMedia. This API allows you to detect when CSS media queries go into effect (e.g., rotating the screen or printing the document). For a cross-browser approach, combine window.matchMedia with window.onbeforeprint/window.onafterprint.
The following may result in multiple calls to beforePrint() and afterPrint() (for example, Chrome fires the listener every time the print preview is regenerated). This may or may not be desirable depending on the particular processing you're doing in response to the print.
if ('matchMedia' in window) {
// Chrome, Firefox, and IE 10 support mediaMatch listeners
window.matchMedia('print').addListener(function(media) {
if (media.matches) {
beforePrint();
} else {
// Fires immediately, so wait for the first mouse movement
$(document).one('mouseover', afterPrint);
}
});
} else {
// IE and Firefox fire before/after events
$(window).on('beforeprint', beforePrint);
$(window).on('afterprint', afterPrint);
}
More: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
I m not sure other browsers will allow you to. You could of course specify an image somewhere in a print stylesheet, which probably only will be called on a print, for the onbeforeprint
Try masking the native window.print() with your own...
// hide our vars from the global scope
(function(){
// make a copy of the native window.print
var _print = this.print;
// create a new window.print
this.print = function () {
// if `onbeforeprint` exists, call it.
if (this.onbeforeprint) onbeforeprint(this);
// call the original `window.print`.
_print();
// if `onafterprint` exists, call it.
if (this.onafterprint) onafterprint(this);
}
}())
Updated: comments.
I think that it's simply not possible to this properly. Or at least - not with any technology I know nor with any of the answers given previously.
Both using onafterprint and using serverside dynamic-image-generating script would tell you that the page was printed even when the visitor merely went to print preview mode and then canceled out.
However, I would like to learn how to get the proper information, so that I can be sure that page was actually printed.
I have created an extension for mediawiki that works in all major browsers other than IE (any version it appears). The extension relies on mediawiki's ajax wrapper to send an xmlhttprequest with parameters that essentially build a database query to a php script. This script will run a query based on the parameters and then create an XML object (using php's simplexml class) which then returns the XML to javascript for display in the browser (just a table, mostly).
Now with all that information, IE seems to be working up until the point at which it tries to parse the returned XML. I have set the mime type to application/xml and I have tried loading it with various different techniques found via google (none worked).
It is trivial to load the XML for parsing when using non-IE browsers:
function callbackHCL(response){
if (response.readyState == 4) {
var xmlObj = response.responseXML;
if (response.status == '200'){
if (xmlObj !== undefined){
//etc...
Now I can start using dom functions to get at data.
My Question: Does anybody have any suggestions on how to parse xml in IE based on my current scenario?
If you would like to email me at tccroninv#gmail.com, I can provide longer code snippets, they are longer and I don't believe they would help the situation. If you would like me to post more code, just ask as well.
Thanks in advance,
Tim
I think this might be what you want: http://dean.edwards.name/weblog/2006/04/easy-xml/. Basically, IE doesn't return an XML document like the other guys. Need to do a little fancy footwork to make it work correctly. I'm sure there's a library out there that wraps this all up so you don't have to worry about it if you don't want to.
Using an adapted version of jquery.inplace.js for some page creation and use an OBDC connection in the background php file to query for content. Everything works, BUT...
I am surprised that IE6, 7, or 8 are all pretty quick, as is chrome, but firefox seems to take quite a few seconds for exactly the same task, in this case.
This is without firebug, or lots of other add-ons enabled. I am puzzled by what to look for.
It is a fairly simple return of some html content.
What would you try?
A cursory look at the source in the SVN doesn't show anything which I believe firefox would have problems with.
Can you explain exactly what is "slow"? Is it the POST request? Have you tried logging the HTTP Headers sent to the server from both IE and FF?
If it's the javascript itself, try running the profiler in firebug; FF might find a specific function a little "heavy" (for instance, one of the regexes).
Also, FF3.5+ already has String.trim*() methods built-in. The code you're using overwrites those with a custom version, which will be much slower and might even be causing firefox to behave oddly. Try changing the source to the following:
if( String.prototype.trim === undefined ) {
String.prototype.trim = function() {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
}
That way the plugin will only add the trim method for older browsers.
This question is somewhat related to my previous question (not necessary to go through it)
link text
, although this one is more of an Ajax problem.
I tested my page in firebug and I am getting the following error
Event.Observe is not a function
Event.observe('form908983160', 'submit', function(event) { new Ajax.Updater('comments','/blog/posts/comments/add', {asynchronous:true, evalScripts:true, parameters:Form.serialize('form908983160'), requestHeaders:['X-Update', 'comments']}) }, false);
I am using the prototype framework for developing my cake php application.
How should I fix this problem?
Guys, I really need your help in this one. I am really stuck at this one. [:(]
prototype.js has to be :
loaded in the page (verify it's not in 404, for instance)
loaded in the page before the execution of your script
Which generally means you need to include prototype.js first, and, only after that, you can include your scripts.
As a sidenote : you are not using any other JS Framework in that page, of course...
Remember that any Event.observers need to be used in global
Event.observe(window,'loaded',f);
// or
Event.observe(document,'dom:loaded',f)
otherwise they will not work.
For me it looks like there's problem with linking to Prototype. Open firebug and try to see the contents of your script files - if you see html, that means something went terribly wrong :-)