jQuery not working in IE - simplacart implementation - javascript

I'm relatively new to jQuery so apologies if the answer is obvious.
I have a shopping cart using simpleCart js, when adding an item to the cart in FF and Chrome everything runs smoothly but IE(9) doesn't seem to manage it.
http://www.peaknature.co.uk/cart/
The main piece of script is:
UPDATED
$(document).ready(function() {
$(".simpleCart_shelfItem").hover(function(event) {
$(this).find('.tooltip').stop(true,true).show();
});
$(".simpleCart_shelfItem").mouseleave(function(event) {
$(this).find('.tooltip').stop(true,true).fadeOut(500);
});
//Cart info (all items in cart)
$(".cartInfo").toggle(function(){
$("#cartPopover").show();
$(".cartInfo").addClass('open');
}, function(){
$("#cartPopover").hide();
$(".cartInfo").removeClass('open');
});
$(".shelf .simpleCart_shelfItem:eq(0)").css('left', '20px');
$(".shelf .simpleCart_shelfItem:eq(1)").css('left', '250px');
$(".shelf .simpleCart_shelfItem:eq(2)").css('left', '480px');
$(".shelf .simpleCart_shelfItem:eq(3)").css('left', '710px');
$(".shelf .simpleCart_shelfItem:eq(4)").css('left', '20px').css('top', '170px');
});
I know IE can be funny with selectors etc but I'm not sure what's wrong.
Any help is much appreciated.
Chris

I believe what is happening is the simplecart logic is running before its ready, add this round all your code (and remove the script tags).
$(document).ready(function() {
//All your code here.
});
This will sure everything is loaded before attempting to use it.
UPDATE
After looking at ie9 console it shows the following error
SEC7112: Script from https://raw.github.com/
wojodesign/simplecart-js/master/simpleCart.js was blocked due to mime type mismatch
This is likely due to the fact that raw.github provides a raw text file to your without telling you it is a js file.
Try setting the type="text/javascript" on the <script></script> tags to rectify
On a side note I am unsure if you are infact the owner of wojodesigns or not however it could be better to use a local version (local to your server) to ensure it not changed without you knowing (even more important if it anything to do with ecommerce).
Hope this helps

Related

Script that works in the browser console but not when in the code

I have a very simple piece of javascript code that just should work and it only works when I run it in the browser console:
<script>
$(".hopscotch-close").click(function () {
alert("Hi");
Cookies.set("tourState", "closed")
})
</script>
Because it runs in the console I know that:
1) the ".hopscotch-close" is OK;
2) there are no errors in the code that could prevent it from running;
Also:
1) because is a "click" event I know that I haven't got a problem with the DOM being ready (and I can put everywhere - but in this case in at the bottom of the <body>;
2) I know I don't have an issue because of using the same name for a class than something else that exist;
3) The behavior is the same in Safari and Firefox, so its not a Browser issue.
I know this is tough without the full code, but if someone has experienced this maybe has na idea about what could be the problem.
From your comments I sense that the element is getting appended dynamically so instead of
$(".hopscotch-close").on('click',
you need to make use of event-delegation as
$(document).on('click','.hopscotch-close',function(){
That will do the trick.
If you are appending .hopscotch-close to any already existing static
element then instead of $(document).on('click' you can use
$('#yourStaticElementId').on('click','.hopscotch-close',function(){
which improves site performance.

Can't get Javascript UI watchdog functions to work

So this question should be really basic, but I can't find anything specifically related to it online or on Stack Exchange.
I'm running to run some DOM in my .js file to replace JavaScript function calls within the HTML and to use Qtip for tool tip implementation. However, I cannot get even the most basic of scripts to run for this function. Here's some code snippet:
<body>
<div id="title_Bar"></div>
<script type="text/javascript" src="DOMscript.js"></script>
</body>
And here's the code for DOMscript.js:
$('#title_Bar').mouseover(function() {
alert("hello");
}
I've already called Jquery in the header because I use it in most of the other scripts I'm running which are all working just fine, but I can't get the mouseover or hover or any of the other neat UI JavaScript tricks working.
I tried loading DOMscript.js in the header with the rest of my scripts and that didn't work either. I want these watchdog functions to be running constantly but not interfering with the functionality of the page overall, so any advice on this would be greatly appreciated!
Please note down the correction;
$('#title_Bar').mouseover(function() {alert("hello");});
closing parenthesis were missing in you code.
Ya'll might want the .hover function instead...
$("#title_Bar").hover( function () {
alert("Mouse is entering the element");
}, function() {
alert("Mouse done up and left the element");
});
... i made a little jsfiddle with it too

Style.Display = "None" Not working in Google Apps Script HTML Service

I've got a fairly simple javascript function running in my HTML service template that is supposed to set the display of a div to "none." However, whenever I include the following line:
document.getElementById("timesheet").style.display = "none";
I get an error in my browser: "Cannot call method 'f___' of undefined." When I take it out, no errors.
Can someone please tell me if I'm missing something?
I know this is a decade old, but Google Apps Script doesn't know what "document" is by default. Debugging the function that contains this line of code will verify that
AFAIK (at least for editing sidebars), I don't think there's a direct way to edit the DOM like you can in a typical webpage
The best you can do I think is to use the functions provided here
Just use jQuery instead.
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(document).ready(function(){
$("#whateverYouAreClickingIDHere").click(function () {
$("#timesheet").css('display','none');
});
});
</script>

Jquery event handling code doesnt work after including script in head from an external js file

I included a script into my document's head that contains the following jquery code:
$('.unappreciatedIcon').click(function() {
alert('JS Works!');
});
In the body of my document I have following:-
<span class="unappreciatedIcon">.....</span>
But there is no alert displayed when I inserted the script into the document head from an external js file. When I had put this script in body simply below the target elements this worked flawlessly.
Thanks to you all:
I am getting this to work with the following code:
$(document).ready(function(){
$('.unappreciatedIcon').click(function() {
alert('fds');
})
});
Did you wrap your jquery in a $(document).ready(function() { // your code // }); ?
If not your jquery code is executing immediately and the browser has not loaded your span. You need to wait for the document to be ready (using the code above) before assigning events.
Update
$(document).ready(function() {
$('.unappreciatedIcon').click(function() {
alert('JS Works!');
});
});
When your script ran, it looked for an element having the class unappreciatedIcon. Nothing was found because the document is still being parsed and there was no node having the class unappreciatedIcon available in the document so far. The DOM is being constructed incrementally.
But when you put your script after the span element occurs, then $('.unappreciatedIcon') was found because it has been parsed and added to the DOM, so the click handler was tied to it.
Either run your code in a ready callback. The ready callback basically runs when the entire HTML has been parsed and the DOM is fully constructed which is usually a safe point to start running your JavaScript code that depends on the DOM.
$(document).ready(function() {
$('.unappreciatedIcon').click(...)
});
or put your code after the element occurs (don't need to wrap it inside the ready callback in this case),
<span class="someClass">..</span>
..
<script>
$('.unappreciatedIcon').click(...)
</script>
just going to go with basics but did you make sure to include the jquery library? If it doesn't work and it's in the code you can also open in firefox with firebug go to the console tab and see what error you have.
The javascript is being processed before the page has finished rendering. As Erik Philips suggested, you need to put this statement inside your $(document).ready() function to ensure the page is loaded before the statement is evaluated.
$(document).ready(function(){
$('.unappreciatedIcon').click(function() {
alert('JS Works!');
});
});
here is the fiddle http://jsfiddle.net/Pf4qp/
Since HTML loads from top to bottom, the head loads before the rest of the page. You could solve this problem by putting the link to your js file right before the end tag. However, its generally better practice to put the javascript link in the head.
A better alternative is to use the defer attribute in the script tag.
For example:
<script type="text/javascript" src="script.js" defer></script>
or
<script type="text/javascript" src="script.js" defer="defer"></script>
The second option is kind of unneccessary though. This attribute is pretty well supported. Internet Explorer has supported it since version 5.5 though apparently it is "buggy" through IE9. It has been fully supported since FireFox 3.5, Chrome 8.0, Safari 5.0. It also works with all current mobile browsers. I guess it is not supported by any Opera browsers though.

jQuery inside Media Wiki pages (not just in the Monobook.js or extensions)

I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.

Categories

Resources