I've got a fully functional site. It works in every browser, except IE.
Here is my
<script src="build/JSXTransformer.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/md5.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/functions.js"></script>
<script type="text/jsx" src="components/newsfeed.js"></script>
<script type="text/jsx" src="components/services.js"></script>
<script type="text/jsx" src="components/footer.js"></script>
<script type="text/jsx" src="components/app.js"></script>
On Chrome/Firefox I get the site running, on IE11 I can see, that the app.js was downloaded twice. And apparently not started.
There was nothing in IE11 console, but later found out, that I was missing some security update from http://www.microsoft.com/en-us/download/confirmation.aspx?id=44431 .
After installing that I can see IE complaining about Newsfeed not defined.
It is caused by
React.render(
<NewsFeed tagFilter={tagFilter}/>,
document.getElementById('newsFeed')
);
being translated into (visible in IE console)
React.render(
React.createElement(NewsFeed, {tagFilter: tagFilter}),
document.getElementById('newsFeed')
);
And the browser than complains about missing ;
Any clues what might be wrong? It works in web browsers. Only IE does this.
Related
I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.
I am writing a page for supporting to both desktop and mobile version. It seems there is some problem to the compatibility between jquery and google ajax. I have three multipage within a page and I declare the three javascript in different order and javascript can work for specific page, but none of the order can serve for all. Do anyone have similar experience in using all libraries together?
When declare the javascript as below
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
an error Uncaught TypeError: Object function (E,F){return new o.fn.init(E,F)} has no method 'isNumeric' for below script
var from = ($.isNumeric(fromArray[2]) ? '+'+fromArray[2] : ((fromArray[2]=='sysid') ? '98765432' : fromArray[2]));
When declare the javascript as below
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
an another error Uncaught TypeError: Object function (E,F){return new o.fn.init(E,F)} has no method 'isPlainObject' for below script in jquery.mobile-1.3.2.min.js
deferred.resolve( name, reverse, $to, $from, true );
When declare the javascript as below
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
error Uncaught SyntaxError: Unexpected token u for below script
$obj = JSON.parse(HttpRequest.response);
---
<div data-role="page" id="page1">
<div data-role="page" id="sendpage" data-add-back-btn="true">
..
var from = ($.isNumeric(fromArray[2]) ? '+'+fromArray[2] : ((fromArray[2]=='sysid') ? '98765432' : fromArray[2]));
..
<div data-role="page" id="createcamppage" data-add-back-btn="true">
..
$obj = JSON.parse(HttpRequest.response);
..
You are loading 2-jquery versions use the latest instead of older jquery versions
Try this,
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
There is nothing for compatibility between jquery and google ajax both are CDN's and jquery CDN
You are including jquery twice in your file. Remove the third script include
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Since its same as your first script include but from different CDN. Both provide you same library (jquery).
Though your last include is of version 1.3.2, which might be cause for errors coming up. Just remove last include and it should work good.
I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="../Content/Scripts/jquery.js"></script>
<script type="text/javascript" src="../Content/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../Content/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../Content/Scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="../Content/Scripts/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../Content/Scripts/jquery.ui.selectmenu.js"></script>
<script type="text/javascript" src="../Content/Scripts/jquery.ui.tabs.js"></script>
So that's the sum of my script and stylesheet imports, but when it attempts to "convert" one of the <select> elements to the JQuery UI Selectmenu, I get this error in Mozilla Web Developer in the jquery.ui.selectmenu.js, and the jquery esque theme is not applied.
I've seen similar errors before caused by the scripts being important in the wrong order and the method not existing, but can't seem to think what may be causing it here.
Any ideas would be fantastic, more code can be given if needed, but its just a <select> element with $('#exampleSelect').selectmenu(); applied to it.
Just a random shot in the dark. According to jQuery UI 1.9 upgrade guide, the method .uniqueId() was only introduced in jQuery UI 1.9. Your version probably doesn't support said method, or you might be mixing different versions.
Change line 33 in jquery.ui.selectmenu.js from:
var selectmenuId = this.element.uniqueId().attr( "id" );
to:
var selectmenuId = this.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 );
This will hopefully work.
Can one download the source code and try out the examples for local testing . E.g. I am trying to preview the example on my iPad (after downloading locally), but am unable to see anything;
http://dev.sencha.com/deploy/touch/examples/oreilly/
I know for commecrial use, we need to pay, But just need to try it out first...
Actually as far as I understand, you don't need to pay for commercial use either for Sencha Touch. If you want a support plan, then you need to pay, otherwise the license is free (See the top of [the pricing page][1] which says "Free license!".
To view the examples:
Download the source code from http://www.sencha.com/products/touch/download/1.1.0/
Unzip the file (e.g. /home/username/sencha-touch-1.1.0)
Open a browser (Safari or Chrome only) and go to
file:///home/username/sencha-touch-1.1.0/examples/oreilly/index.html
If you want to navigate any other examples, point your browser to:
file:///home/username/sencha-touch-1.1.0/examples/
Right click on the page > View Page Source > On the top you'll see the script files >
<script type="text/javascript" src="../../sencha-touch.js"></script>
<!-- <script type="text/javascript" src="oreilly-all.js"></script> -->
<!-- Application JS -->
<script type="text/javascript" src="src/index.js"></script>
<script type="text/javascript" src="src/Models.js"></script>
<script type="text/javascript" src="src/App.js"></script>
<script type="text/javascript" src="src/SessionList.js"></script>
<script type="text/javascript" src="src/SpeakerList.js"></script>
<script type="text/javascript" src="src/HtmlPage.js"></script>
<script type="text/javascript" src="src/SpeakerDetail.js"></script>
<script type="text/javascript" src="src/SessionDetail.js"></script>
<script type="text/javascript" src="src/LocationMap.js"></script>
<script type="text/javascript" src="src/AboutList.js"></script>
<script type="text/javascript" src="src/VideoList.js"></script>
<script type="text/javascript" src="src/TweetList.js"></script>
You need to basically download these one by one and then reference them manually in your local html file which you'll need to test.
That's the way to actually access the examples. However I would prefer you go through their screencasts, you'll get the source code for them easily from github.
e.g. For this screen cast: http://vimeo.com/15672696 , you can get the source from https://github.com/nelstrom/GeoTweets