Codemirror (textarea replace) IE compatability issue - forms

Going to log this here just in case anyone has a similiar issue.
"Having a bit of a weird issue and I am hoping that someone can point out if I'm making an error before I bug report or something.
In Chrome this works fine, in IE (version 9 or newer) it refuses to display the codemirror editor as long as its within form tags.
Evidence:
http://jsfiddle.net/ablueman/kmtorrkL (Ok in Chrome / Broken in IE)
form tags yes / form css yes.
http://jsfiddle.net/ablueman/kmtorrkL/32/ (Working in chrome and IE but not a form)
form tags no / form css yes.
http://jsfiddle.net/ablueman/kmtorrkL/33/ (working in chrome / Broken in IE.
form tags yes / form css no.
https://www.ablueman.co.uk/the/testbench/fourform.php
Evidence its not a quirks issue or otherwise something in jsfiddle.net
http://validator.w3.org/check?uri=https%3A%2F%2Fwww.ablueman.co.uk%2Fthe%2Ftestbench%2Ffourform.php
Damn thing validates as well.
If anyone has any ideas I'm all ears."
var myCodeMirror = CodeMirror.fromTextArea(QTA1, {
mode: "javascript",
lineNumbers: true
});
answer to follow .....

Just in case anyone finds this:
It is fixable by using:
var whatever = CodeMirror.fromTextArea(document.getElementById('theID'), { lineNumbers:true });
http://jsfiddle.net/ablueman/kmtorrkL/41/
But that means the manual is essentially incorrect and / or the selector is presumably wrong in IE's eyes. You get a undefined error.
Logged a bug report:
https://github.com/codemirror/CodeMirror/issues/2910
http://codemirror.net/doc/manual.html
"var myCodeMirror = CodeMirror.fromTextArea(myTextArea);"

Related

GWT 2.7: Warn users they are using an unsupported browser

I recently upgraded my application to GWT 2.7 from GWT 2.5. This has caused me to drop support for IE6 and IE7.
I would like to provide users with IE6 or IE7 with a warning that their browser is outdated and will not work. At the moment if you go to the app with one of those browsers, you get a blank screen.
I know there are a couple ways that I could hack something together but I would rather use the GWT way, rather than some hack. Is there a GWT hook for unsupported browsers?
Option (hack) One
Drop this into my main.html:
if(document.documentMode === 6 || document.documentMode === 7){
myUnsupportedBrowserWarningFunction();
}
Potential problem with this is that if someone is using a browser that GWT doesn't recognise and I don't recognise (mobile opera? Some other browser), they will still get a blank page.
Option (hack) Two
GWT looks for the compiled JS here:
gwt/myApp/ASDFKLSDJFLSFDJSLDFJLSJDFSDES.cache.js
When someone is using an unsupported browser the following is requested (and is not found):
gwt/myApp/undefined.cache.js
It would be possible to create undefined.cache.js and put your unsupported browser code there. This is obviously a brittle solution and will break with future GWT updates.
Option Three
A recent patch (available in GWT 2.7) allows you to provide a default
permutation (e.g. safari) if GWT can not detect the browser and with
deferred binding you can display a warning that the provided app might not
work correctly as the browser is generally unsupported by GWT.
-- J.
Source
I don't want to set a default permutation for unsupported browsers. I want the site to not work and to display a warning. So this solution doesn't really provide what I am looking for.
Similar Questions & Posts
The same question was asked for an eariler version of GWT in 2009. I hope that GWT has added some kind of hook or best practice in the last 6 years.
More info on setting a default (fallback) permutation
You should be able to use onLoadErrorFn for that: https://code.google.com/p/google-web-toolkit/issues/detail?id=8135
<script>
function gwtLoadError(errMsg) {
// GWT app couldn't load, reason in errorMsg
}
</script>
<meta name="gwt:onLoadErrorFn" content="gwtLoadError">
or possibly onPropertyErrorFn:
<script>
function gwtPropError(propName, allowedValues, actualValue) {
if (propName == 'user.agent') {
// unsupported browser
}
}
</script>
<meta name="gwt:onPropertyErrorFn" content="gwtPropError">
(I don't think user.agent.runtimeWarning would help in this case, but maybe have a look)
There is an easy way:
Conditional Comments
<!--[if lt IE 8]>
<p>You are using an unsupportet browser. Please perform an update</p>
<![endif]-->
I think Option 3 may be the best one, but there is a problem: This will start the actual application (which still may be incompatible).
If this is an issue and you want a clear warning, you can rewrite the permutation selection script (You would need to update the script with the upcoming GWT releases)
You will need to copy this source:
https://gwt.googlesource.com/gwt/+/2.7.0/user/src/com/google/gwt/useragent/rebind/UserAgentPropertyGenerator.java
You could add something like:
$wnd.Location.replace('nosupported.html');
between line 90 and 91

MagnificPopup won´t work with Typo3

I would like to use magnific popup for a site which is still in development, but unfortunately nothing happens after the installation and adding the static content in my template.
No matter what i try no popup comes up.
If someone would like to help me i will provide access to the site.
Thanks a lot!
First thing to do:
look at your source code: does the 'link' show any sign of 'magnific popup' code?
Added classes? id?
Second: do you see any extra javascript and/or stylesheet that is added by the extension?
If you answer negative to 1 of these, the extension does not output anything. Sounds logic, but it is the first step. Is it a solution? Nope, it means your live just got a bit more worse, but hang in there !
If it does show any code from the ext: look at your console, are there any js errors occurred ? (if you don't know what console is, or (even worse) you work with IE) please read about chrome console of at least install Firefox with firebug.
My best beth would be a JS error...
Can it be possible that the ext itself does not work?
Does your php error logs tell you that the extension is behaving badly?
Do you see errors in the typoscript analyser (or whatever it's called to analyse the css_styled_content and other TS spaghetti )
If not, then no, it is not the ext.
Again, i'm betting my wive, three horses and a barrel of beer on JS erros.
Good luck mate !
ps: IF i'm wrong, i'm not sending you my wife by postal service. Loads of trouble last time. Nor the horses, same shizzle ..

TinyMCE file picker in Moodle 2.5 is not loading

I've created a fresh install of Moodle 2.5. I installed successfully, I thought. I have not customized the theme, so it can NOT be theme-based.
TinyMCE's file picker is not loading...whether trying to upload a file or creating/editing a course under the Course summary files section...all I get is the "Loader" star. I did some research and found no solutions that worked. Quite a few said "custom themes," but I have no custom themes yet. Now, in checking the console, I got this:
- Uncaught SyntaxError: Unexpected Identifier /lib/editor/tinymce/tinymce/3.5.8/tiny_mce.js:2
- Uncaught ReferenceError: tinymce is not defined module.js:1
- Uncaught ReferenceError: tinyMCE is not defined yui_combo.php?moodle/1374671241/editor_tinymce/collapse/collapse-min.js:1
Digging further, I found the error on tiny_mce.js with the "uncaught syntax error" is around this area (I beautified the JavaScript for better readability and it ended up on line 3344):
pi: function(h, i) {
if (i) {
c.push("")
} else {
c.push("")
}
if (a) {
c.push("\n")
}
}
I also have no clue why the page is not seeing TinyMCE as defined.
In my browsing of multiple sites, one person mentioned being able to open the file picker in Moodle 2.5 when logged in as a regular non-Moodle user. They, too, have no answer to the problem, but I tried that and the file picker did, indeed, open.
Update
I've found it's not quite just the file picker. This whole thing is tying in to TinyMCE not loading properly...with the editing toolbar capability (whether collapsed or not.) It acts as if it's a simple text editor.
I fought with it and ended up causing more problems than solutions, so I uninstalled everything, and started from scratch. I have no plugin add-ons, no fancy themes (it's the basic one it installs with), and no customization, and it's still buggy.
The console continues to say:
- Uncaught SyntaxError: Unexpected Identifier /lib/editor/tinymce/tinymce/3.5.8/tiny_mce.js:2
- Uncaught ReferenceError: tinymce is not defined module.js:1
- Uncaught ReferenceError: tinyMCE is not defined yui_combo.php?
And it pauses the debugger on practically every page with this. It's telling me that there's a problem with how TinyMCE is called in.
I've submitted a bug report, but haven't gotten the answer yet. What I'm hoping for is someone else to have had the same problem and come up with the solution, remembering there is no theme customization, no add-ons...so they can't be at fault.
As a matter of fact I also banged to this issue after upgrading to Moodle 2.5.1+, and after digging it for hours came up with a solution that made things work smooth again, I have disabled Cache JavaScript from:
Home / ► Site administration / ► Appearance / ► AJAX and Javascript
After saving the settings the file picker started working as normal. I am not sure how bad this will affect overall moodle performance and how bad it will increase the load on server and website loading overhead, but at the moment that was the only solution that I came up with.
Hope this will help...
version 2.5.1+
The FilePicker doesn't load when editing is turned on.
If you have this issue where the FilePicker hangs while loading, click on the following:
Administration | Course Administration | Turn editing off
Then refresh the page with the FilePicker that you need to use.
I'm putting this as an answer, because I received one, and I want everyone who ends up with a similar problem to know the way to solve it.
The problem was with the admin user profile settings. The Moodle team responded, and told me what to do.
It's as simple as:
Change the admin's user profile and set not to use html editor by default.
Purge all caches both in moodle and in your browser.
Make sure that in "Site administration ► Development ► Debugging" you have "debug messages = developers" and "display debug = yes"
Thanks!

Bug in external link tracking when opening the link in a new window in Google Analytics?

First off, I apologize if it's considered poor etiquette to cross-post on stackexchange sites, but this seemed appropriate for both the webmasters site and here, as it's a common issue for webmaster, but may be able to be solved by coders. In any case, here goes...
OK, so this seems like a really simple problem, but I have yet to find a solution that accomplishes the following:
Opens the link in a new window
Tracks the event in GA when using the asynchronous code
Doesn't trigger pop-up blockers (uses target="_blank" instead of window.open)
Most of the code I've seen, including Google's, doesn't take into account the case of opening in a new window - they just use window location.href.
Even GAAddons (http://gaaddons.com/), which charges for commercial use, seems to not manage opening in new windows properly.
Perhaps, I'm missing something simple - I'd be relieved if so and would thank profusely whoever points it out to me!
If no one is able to provide an example, I'll post some of the test cases I've created to illustrate the problem.
Thanks.
[EDIT] I've since tested the GAAddons code more throughly and have found it to work. I'm guessing the problem that was being reported earlier by a client using Chrome 7 on Windows was more likely a configuration issue than something related to the GAAddons library itself.
You put it in the link's onclick attribute:
some link
The method I've found to satisfy all the requirements I've mentioned is the one found here:
http://cutfromthenorth.com/add-external-link-tracking-with-jquery-and-google-analytics/
It's actually quite simple, leading me to think that there was some other reason why other code wasn't working in earlier tests.
However, I can confirm that the method that's mentioned in the comments on this Google page - http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55527 - does not meet the above requirements (new windows trigger popup warning on Chrome and IE).
The Google code does work for tracking external links not opened in a new window.
here's the snippet:
$('a[target=_blank]').click(function(){
try{
_gaq.push(['_trackEvent', 'External Links', 'Click', $(this).attr('href')]);
} catch(err) {}
return true;
});
I've tested on the following browsers:
PC:
IE 6 - 9
Firefox 3.6, 4.0
Chrome 9, 10
Safari 5
Opera 11
Mac:
Safari 5
Chrome 10
Firefox 3.6, 4.0
Also tested on iPhone 4 and the native Android browser on Gingerbread

tinymce displays raw html code and no Buttons for one user in IE7 , 4 others users have not problems. If that user uses Foxfire it works perfectly

I have 5 users (3 locations) using the pages that have Tiny_MCE text areas.
I receive No Errors and it works Perfectly on the other 4 machines running IE7 This would indicate there is No JavaScript Errors.
One user only is seeing the raw html code and no buttons at all.
I suspect it must be some IE setting that is wrong.
It does not appear that Javascript is disabled, as other Javascript functions work on that same site on the same machine in IE.
This user is running XP Pro, and IE 7.
When I installed FireFox on his machine, the Tiny_MCE works perfectly. This would Also indicate there is No JavaScript Errors.
I'm at a loss to explain it.
Any Ideas would be appreciated.
Thanks
Once I ran into same issue and the fix was to remove a comma at the end of the script. So check whether the error pattern is present in your code.
For example, the following code contains a bug which will prevent it from running in IE7.
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
...
template_replace_values: {
username: "Some User",
staffid: "991234"
}, // <<< BUG - Additional comma here
});
If you can enable javascript debugging in IE7 then post the js error here.
Funny thing. The problem fixed itself with no human assistance. No Reboot, No Nothing. after being AFU for 2 weeks, it just started working again.
Got to Love Windows!
I've encountered this before and it has always been a caching issue. Use Ctrl-F5 in IE to force a full refresh of the page and all its files (*.css, *.js) in the browser and the browser cache. My guess is the IE 7 computer that was bad had a 14 day setting for checking if files were up to date.
Sometimes it's been worse - the web server (tomcat 5.5) would cache the file too and not notice the file was updated. Restarting the web server fixed that.
We are experiencing the same problem with our software last few months.
I found this forum topic on developer's website:
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=66594
In short words, he is recommending to set strict_loading_mode to true when initializing tinymce. I've done that, and since that i had no problems.