Caja / Apps Scripts jQuery $(document).ready not firing - google-apps-script

I have a project in Apps Scripts where the code in my $(document).ready never gets executed. I also tried with this basic code at http://caja.appspot.com/, which also doesn't work.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("span").text("Working");
});
</script>
</head>
<body>
<span>Not Working</span>
</body>
</html>​
The "Not Working" text shows up. Also tried with jQuery versions 2.x.x
Any ideas?
Thanks

This works if you use a slightly older jQuery version.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").text("Working");
});
</script>
</head>
<body>
<span>Not Working</span>
</body>
</html>
I'm not sure why, since the documentation says Caja works with all recent jQuery versions: https://developers.google.com/apps-script/guides/html/restrictions#jquery_and_jquery_ui

Related

Polymer is not defined, Reference error in Firefox

What is missing in this simple code, that fails in Firefox while works fine in Chrome?
<!DOCTYPE html>
<html>
<head>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="paper-material/paper-material.html">
<dom-module id="ui-firefox">
<template>
<paper-material>Can you see me in Firefox?</paper-material>
</template>
<script>
Polymer({
is: "ui-firefox",
ready: function(){ console.log("Am I ready?"); }
});
</script>
</dom-module>
</head>
<body>
<ui-firefox> </ui-firefox>
</body>
</html>
A fiddle sample here https://jsfiddle.net/s4oh43za/
I have read a few posts, but I couldn't find the solution for this simple case
Thanks in advance, Fausto
My guess is Firefox loads HTML imports in a different way.
The Polymer docs recommend wrapping your dom-module script in HTMLImports.whenReady(function() {...}) when it's defined in index.html. This modified version of your jsfiddle works in both Firefox and Chrome after following that recommendation.

HTML TIDY not indenting inline tags and script tags properly

I am trying to use HTMLTIDY for indenting my html file. I am using the command line version of it.
tidy --doctype html5 --tidy-mark no --indent auto --indent-spaces 4 --wrap 0 --write-back yes --output-html yes --drop-empty-elements no filename.html
Its indenting everything properly except the script tags and inline elements are coming in the same line instead of indenting.
Before:
<!DOCTYPE html><html><head>
<script type="text/javascript" src="something.js"></script>
<script type="text/javascript" src="something.js"></script>
<script type="text/javascript" src="something.js"></script>
<title>sometitle</title>
</head><body><div class="test">testlink1testlink1testlink1</div></body>
</html>
after:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="something.js">
</script>
<script type="text/javascript" src="something.js">
</script>
<script type="text/javascript" src="something.js">
</script>
<title>sometitle</title>
</head>
<body>
<div class="test">
testlink1testlink1testlink1
</div>
</body>
</html>
I am unable to figure out any options as per the documention to fix it. please help me solving this.
balthisar commented on 1 Feb:
Fixed in develop-500. Please feel free to re-open this if you still
have a problem. Thanks!

JQuery Time Picker basic example

I am trying to implement the basic time picker in JQuery
but its not working at all
Please Help
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="../js/jquery/themes/base/jquery.ui.timepicker.css"
rel="stylesheet" />
<script type="text/javascript" src="../js/jquery/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../js/jquery/ui/jquery.timepicker.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#id1').timepicker();
});
</script>
</head>
<body>
Input: <input id="id1" type="text" name="fullname"><br>
</body>
</html>
You might need to place the jquery script tag before the timepicker script tag
put this -->
$('input[name="TOH"]').ptTimeSelect();
instead of this-->
$('#id1').timepicker();
// dont write the id. just write the name of your html tag used.
and it will work like a miracle. i tried. and make sure your css and js files from your laptop has the proper file path.

Loading content using AJAX and jQuery

I am a newbie to jQuery and was trying to load content dynamically using AJAX and jQuery using the following code but its not working.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".text").load("http://api.jquery.com/get/");
});
});
</script>
<title>AJAX with jQuery</title>
</head>
<body>
<div class="text">Sushil</div>
<button>Load Text</button>
</body>
</html>
You are violating the same origin policy. Just open your console and see the error message when you click the button. Things will become clearer to you. If not please get back
I ran your code and I got this error:
XMLHttpRequest cannot load http://api.jquery.com/get/. Origin null is not allowed by Access-Control-Allow-Origin.
I googled it and I got this: Origin null is not allowed by Access-Control-Allow-Origin

webshim polyfill localStorage undefined in IE6

When I run the following code in an IETester IE6 window:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DealingTree</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/modernizr.js"> </script>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/sssl.js"> </script>
<script type="text/javascript" src="/js/webshims/js-webshim/minified/polyfiller.js"> </script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
$.webshims.polyfill('json-storage');
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
//]>
</script>
</body>
</html>
I get the following error in a popup dialog:
Line: 15
Char: 7
Error: 'localStorage' is undefined
Code: 0
URL: http://localhost/problem2.html
The code works fine in IE9 running in IE7 mode.
When I change to use Douglas Crockford's JSON2.js and Remy Sharp's storage polyfill --upon which this is supposedly based-- I do not have the problem.
Please help?
I received an email from the author (Alexander Farkas) explaining that the code using the polyfill must be inside a domready event handler, such as the following:
$.webshims.polyfill('json-storage');
$(function(){
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
});
For more information:
http://afarkas.github.com/webshim/demos/index.html#polyfill-ready
IE6 doesn't support HTML5 features at all. This is not very surprising for an ancient browser that should already be dead and buried (IE6 was released in the year 2001, and the foundations for HTML5 were only laid in 2004). See this answer for more details.
Note that there are wrappers which are capable of emulating such functionality - e.g. this question suggests jStorage for compatibility with IE6+.