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

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>

Related

What version of jquery do i use for my script

I was looking to find out what version of jquery do i used based on the following script that my friend wrote for me, unfortunately he is on holiday so I can't get in touch with him.
I have added the following code within my body tag and then calling it below that:
$(document).ready(function() {
$('.top_cols_hide_arrow').click(function() {
$('.finishing_top_cols_hide').toggle("top");
});
$('.top_cols_hide_arrow').click(function(){
$(this).toggleClass('active');
});
});
and the HTML part:
<div class="finishing_top_cols_hide_arrow_mn">
<span class="finishing_top_cols_hide_arrow">open</span>
</div>
I am trying to run this on my localhost but whenever I click the arrow nothing happens and then I realised that I dont really have a script source for this to function and I'm not sure what I need to link to, in order to get this to work.
If somebody could please advise.
You can use this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
The code that your friend wrote for you is simple so most of Jquery versions will support it.

Add javascript file from wordpress admin page

I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance
I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.

Vimeo API - Froogaloop. $f is not defined

used the api to add a button that plays 1 vimeo video on a page.
I added the Froogaloop plugin into my plugins.js file and am calling out to it on my main.js file.
Here's my code
ready = function(player_id) {
var playButton, player;
player = $f(player_id);
playButton = $('#playButton');
return playButton.on('click', function(e) {
e.preventDefault();
player.api('play');
});
};
$f(document.getElementById('player')).addEvent('ready', ready);
The problem I'm having is that any script after this will not run. The error JSHint gives me is '$f' is not defined
I've tried defining ($f = '')this, but it simply breaks the functionality (which makes sense why that would break it). Has anyone run into this issue before? Do you know of a fix?
Also note that the above code block works. It just has to be the very last thing in my main js file or else everything after it would break. It also won't pass JSHint. I get two '$f' is not defined. errors.
Any help would be greatly appreciated.
Thnx!
I was having this problem because I was including my script before including froogaloop.js.
It seems that $f is defined on that js.
If the error is just with JSHint, you can add the following comment to the top of the file to suppress the warning:
/*global $f:false */
You must connect the library
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
As drcord pointed out in his answer to this similar question:
You are either loading jQuery after this code or not at. You need to include jQuery before this script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js></script>

jQuery not working in IE - simplacart implementation

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

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