I am creating a dashboard that is based on google scripts which pulls data from spreadsheet.
But my page loads before the JavaScript runs.
here is my code :-
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(chartData).loadCdata();
google.script.run.withSuccessHandler(otherChart).loadCdata();
});
Since I will advance further and a lot more data has to be pulled from server side and I want html to only load "view" after my scripts finish
I have two questions:
1. In current scenario how can I make my html to print after my script runs.
2. how can I prevent loading data array again and again from server side. I just want to run it once and use the array data in different functions. ".loadCdata();"
this image shows only half of my chart is printed
Hide the main div and then display it after the server-side data has loaded.
<div id="main" style="display:none">
.... content
</div>
<script>
google.script.run.withSuccessHandler(function() {
document.getElementById("main").style.display = "block";
}).loadData();
</script>
To display HTML after the server script completes, start off by having the HTML hidden (e.g. display: none) and then have your chartData() function change the display attribute so it becomes visible. (You can use a Promise to make sure it happens in the correct sequence.)
Use the Web Storage API to save your array data in the browser storage.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="chart1" style="display:none">
<!-- Chart 1 -->
</div>
<div id="chart2" style="display:none">
<!-- Chart 2 -->
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
google.script.run.withSuccessHandler(populateCharts).loadCdata();
});
/**
* Populate the charts, make them visible, and save data to sessionStorage for later usage.
*/
function populateCharts(data) {
return new Promise((resolve, reject) => {
// Populate charts
resolve();
}).then(() => {
// Make the charts visible
document.getElementById("chart1").style.display = "block";
document.getElementById("chart2").style.display = "block";
// Save chart data to session storage
sessionStorage.setItem("chartData", JSON.stringify(data));
});
}
</script>
</body>
</html>
Related
In my project, my JS receives information from server and then displays it on HTML. However, when I acess the page, the data is not fully loaded yet, so the entire HTML is loaded but the data is not. It forces me to wait X milliseconds to see the last thing to complete the page (the data).
I want to make all elements (divs, span, buttons, my data) load exactly when data's retrieved and ready to be shown. Also, I wanted to do this by displaying a simple waiting gif in order to make the user pacient about it, but I'm not sure how to do it.
window.onload = ()=>{
var questionPlace = document.querySelector("#question-place");
displayPrevious(data, questionPlace);
}
<head>
<script src='./scripts/index.js' type='module'></script>
</head>
<body>
<div class="flexbox-container" id="question-place"> <!-- data here --> </div>
<!-- buttons, divs, etc -->
</body>
Rather than window.onload, use $.when($.ajax()).then():
Option 1:
Create every element using document.createElement:
//window.onload = () => {
$.when($.ajax("file.txt")).then((data, textStatus, jqXHR) => {
var elements = [];
elements.push(document.createElement('div'));
});
And the only element that should be in the <body> would be your gif:
<body>
<img src="loading.gif" alt="Loading...">
</body>
Option 2:
Set every element to have display: none;:
<head>
<style>
* {
display: none;
}
</style>
</head>
<body>
<!-- other elements -->
<img src="loading.gif" alt="Loading..." onload="(event) => event.target.style.display = 'block'">
</body>
And again wait for the call to finish and set everything to block:
$.when($.ajax("file.txt")).then((data, textStatus, jqXHR) => {
$("*").css("display", "block");
});
You can hide whatever "parent" HTML element you want and unhide it on the success event for the jQuery get request.
See: Show html after completing work with ajax and jquery
Suppose I have a page named a.html and a picture x.
Now, when users go to a.html, I want to show the picture x for 3/4s then I want to show the page content.
Can anyone help me to do this?
Here is a small code that will use pure js to show a image prior to showing the content of the site. I think this is similar to what people use to show a loading image before loading the content.
<html>
<head>
<title>Image before loading content</title>
</head>
<body onload="show();">
<div id = "myDiv">
<img id = "myImage" src = "http://jimpunk.net/Loading/wp-content/uploads/loading45.gif">
</div>
<div id="content" style="display: none;">
This is a CONTENT SECTION Put your content here
</div>
<script type = "text/javascript">
function show() {
document.getElementById("myDiv").style.display="block";
setTimeout("hide()", 5000); // 5 wait, change the delay here
}
function hide() {
document.getElementById("myDiv").style.display="none";
document.getElementById("content").style.display="block";
}
</script>
</body>
This yo can put in a HTML page and you shold be able to see where i made the image and where the delay time will be happening.
Here is a working example using the above code: https://jsbin.com/pixemiwubu/edit?html,output
I want to create a template based site(like weebly) where users can change the text on the page just by clicking on it.
I have created the page having that functionality.But it just shows on the editor's browser as localStorage store the change on browser storage area.I want the changes made visible to every visitor on that page.
Here is the code
<html>
<head>
<meta charset="UTF-8">
<title>My Tasks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background:url(chobi.png);
}
</style>
</head>
<body>
<h1 id=hi contenteditable=true>My Tasks</h1>
<p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
<ul id=myTasks contenteditable=true>
<li></li>
</ul>
<script>
$(document).ready(function(){
$("#myTasks").blur(function() {
localStorage.setItem('myTasData', this.innerHTML);
});
if ( localStorage.getItem('myTasData') ) {
$("#myTasks").html(localStorage.getItem('myTasData'));
}
$("#hi").blur(function() {
localStorage.setItem('hiData', this.innerHTML);
});
if ( localStorage.getItem('hiData') ) {
$("#hi").html(localStorage.getItem('hiData'));
}
});
</script>
</body>
</html>
How can I do that.
you should use php (a server side scripting language) or any other like ASP etc or a database MySQL (to store your data) you cant do it with only client side scripting :)
PhP and MYSQL are very easy
your php would be as
<?php
$content = #some cotent from database
echo "<div contenteditable='true'> ". $content."</div>" #now user can easily change the contant loaded from database
?>
and add one button then when user click on that button then all the changes will submit
on database then it will available for any one :)
Context
I have a HTML5+CSS+JS slideshow designed to be synchronized between 50 clients in a domestic LAN with one wireless router.
Problem
Since the contents of the slides (mainly pictures) may be too heavy, I want to load them dynamically for each slide (e.g. as the client clicks a "next" button), since currently the site GETs all the files for every slide from the server at the beginning when the page is loaded, overloading the router.
In this question (another approach for the same problem) an user suggested me using AJAX to get only the DOM and then loading its contents dynamically. Nevertheless, his solution doesn't work for me, as the contents are loaded before the moment I want to.
Is this AJAX based approach correct? If so, what may I be doing wrong?
My code
slideshow.html (slideshow structure)
<html>
<head>
<title>My Slideshow</title>
<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div id="slides-containter">
<div class="slide" id="slide_1">
<!--Contents such as images, text, video and audio sources -->
</div>
<div class="slide" id="slide_2">
<!--Contents -->
</div>
<!--A bunch of slides here-->
</div>
<script>
// Here I load the slides calling a function defined in slidesplayer.js
</script>
</body>
</html>
slideshow-placeholder.html (loaded when I enter to the slideshow URL)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/path/to/ajaxSlidesScript.js"></script>
</head>
<body>
<h1>Hello slides!</h1>
</body>
</html>
ajaxSlidesScript.js
$(document).ready(function() {
$.ajax('/path/to/slideshow.html', {
async : false,
complete : function ajaxCallback(slidesDOM) {
// Pull out the individual slides from the slideshow HTML
$slides = $(slidesDOM.responseText).find('.slide');
// For each one ...
$slides.each(function prepareSlide() {
// Store a reference to the slide's contents
var $slideContent = $($(this).html()); // <--- GETs all the files for this slide which I want to avoid.
// Empty the contents and keep only the slide element itself
var $slideWrapper = $(this).empty();
// Attach to focus event handled by the slideware
$slideWrapper.appendTo('body').on('focus', function injectContent() {
// Put the content in — NOW external resources should be downloaded via GET and loaded, not before.
$slideWrapper.append($slideContent);
});
});
}
});
});
Update: This approach won't work, as manipulating DOM object will cause the download of the resources even if you don't insert them in the DOM. You can see what I did in this question.
Ajax is definitive the right technology for your problem but as far as I can see your problem is simple.
<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
With this piece of code it doesn't matter if you use ajax or not because you load the CSS file already and all images referenced in this CSS file are load directly at the beginning. In addition you should load all files asynchronous.
You can add <img> tags via JavaScript and load the images asynchronous...
I have an iframe with a HTML form dynamically added. I need the parent page to have a button which submits this form (to a page set in the iframe), but then also is able to receive the return value.
The part I am struggling with is how to receive the return value. Submitting the form is fine, but getting the parent page to receive the return value - like with an AJAX request - is eluding me.
Here is an example of the kind of thing I am trying to achieve:
<html>
<head>
etc...
<script type="text/javascript">
$(doument).ready(function() {
$("#myFormButton").click(function () {
// This is what doesn't exist, a callback with the data
// this is what I would like to acheive somehow...
$("#myForm").submit(function(data) {
// do stuff with the data
});
});
});
</script>
</head>
<body>
<iframe>
etc...
<form action="mypage.ashx">
various inputs...
</form>
etc...
</iframe>
</body>
</html>
Thank you all very much for your help,
Richard Hughes