I'm giving Google Apps script HTML services a try with JQuery UI.
I created a simple test case with a date field but the responsiveness of the datepicker widget is very low. It takes at least 3 seconds for the datepicker to show up. Navigating to the next month also takes 3s.
Is there anything I can do to improve the performance of JQuery UI?
Here's the HTML file:
<html>
<head>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#date').datepicker();
});
</script>
</head>
<body>
<input type="text" name="date" id="date">
</body>
</html>
And the call from GS:
function doGet() {
return HtmlService.createTemplateFromFile('test').evaluate();
}
The console log shows:
Node not editable; no action performed. es53-taming-frame.opt.js:419
ode not editable; no action performed. es53-taming-frame.opt.js:419
bad value `fixed` for CSS property position es53-taming-frame.opt.js:419
https://ssl.gstatic.com/caja/4969/es53-taming-frame.opt.js?debug=1
This is a known issue and we are working on speeding it up.
Related
I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959
I am a jquery beginner and i have set up a wamp server to practice with html and jquery but i cant seem to get jquery to work. I have written a simple jquery code to test it.
This is my html code:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id= "wrapper">
<div class="intro"><BUTTON type="button">Who am I?</BUTTON></div>
<div class="contact"><BUTTON type="button">What am I?</BUTTON></div>
<div class="exp"><BUTTON type="button">Experience</BUTTON></div>
<div/>
</body>
</html>
jquery.js code:
$(document).ready(function(){
$('.intro').onClick(function(){
$(this).fadeOut('slow', 300);
});
});
I am not sure if linking my jquery page correctly is the problem or the wamp server.
First WAMPServer has little to do with jQuery code other than serving it to the browser, so its not a WAMPServer issue.
A couple of thing are wrong with the jquery code.
First there is no onClick function, you should be using click so
$('.intro').onClick(function(){
should become
$('.intro').click(function(){
Secondly this duration can be either "slow" denoting 600 milliseconds or a number of milliseconds. You have used both and thats not valid. In fact parameter 2 should be a callback function that will be run when the fade is completed. So
$(this).fadeOut('slow', 300);
becomes
$(this).fadeOut('slow', function(){
// fade complete,
// you dont have to do anything in here if you dont want to
});
In fact you dont even have to use the second parameter if you are not going to do anything after the fade is complete. So it could be written as
$(this).fadeOut('slow');
So your script slightly recoded with all that in mind would be
$(document).ready(function(){
$('.intro').click(function(){
$(this).fadeOut('slow', function(){
// done
});
});
});
Or probably a better solution if you dont want to do anything when the fade is complete is
$(document).ready(function(){
$('.intro').click(function(){
$(this).fadeOut('slow');
});
});
And that should work as you expected.
Basically you need to look closer at the JQuery manual here
I would like to add the Skype button (https://dev.skype.com/skype-uri/generator) to my Google site.
The code pasted in the Google Site HTML box does not work (not so much javascript works correctly in this gadget), so I have tried with a custom Google Apps Script. I have made a very basic one, but the Skype button is not displayed (only the 'blabla').
<html>
<head>
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js></script>
</head>
<body>
<div id="SkypeButton_Dropdown_clandriot_1">
<script type="text/javascript"> Skype.ui({ "name": "dropdown", "element": "SkypeButton_Dropdown_clandriot_1", "participants": ["clandriot"], "imageSize": 24 }); </script>
</div>
blabla
</body>
</html>
(I have obviously added the doget())
Any idea why it does not work?
Thank you for your help
What have you added in the doGet() is more important. Can you please post that. You should be doing something like
function doGet(){
var string = 'your html code';
return HtmlService.createHtmlOutput(string);
}
Remember that despite doing the above, all of your code may not work since HTML code is sanitized by Caja so you should test your code in the Caja playground before deploying it.
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.
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