I have the following code but the throbber / progress animation is not showing as described in the documentation.
The image uploads correctly after a few seconds of inactivity then source input and image dimension fields are populated.
How can I get the little animation while the image is uploading?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/<api-key>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea>
Welcome to TinyMCE!
</textarea>
<script>
tinymce.init({
selector: 'textarea',
plugins: 'image code',
toolbar: 'undo redo | link image | code',
file_picker_callback: function(callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
// Show progress bar
tinymce.activeEditor.setProgressState(true);
// Perform file upload
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php');
xhr.onload = function() {
if (xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
callback(json.location);
// Hide progress bar
tinymce.activeEditor.setProgressState(false);
} else {
console.error(xhr.statusText);
}
};
xhr.send(formData);
};
input.click();
}
});
</script>
</body>
</html>
I couldn't replicate your problem. You should see the throbber. I tested your code and it works (Firefox 109.0.1 (64-bit) on Windows 11). A quick and dirty way to see what the problem is, is to do a hard exit right after you display the throbber, like this:
tinymce.activeEditor.setProgressState(true);
alert("Hard exit coming up! Hold tight!");
exit();
Run the code, then start inspecting the html/css why the throbber doesn't show.
Using you exact code (with added exit), it looks like this (after I manually closed the alert dialog and the insert file dialog):
Long shot: maybe the file picker dialog was covering the throbber, so you didn't see it.
Anyway, now you can maybe investigate some more why you didn't see the throbber. You should find this when looking at the console:
<div class="tox-throbber" aria-busy="true">
<div aria-label="Loading..." tabindex="0" class="tox-throbber__busy-spinner">
<div class="tox-spinner">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
Related
I'm a beginner in Javascript and i'm trying to get an element from an embed tag. This embed tag contains a pdf.
I want to get the button "next page" from the pdf viewer, and simulate a click on it, in order to automaticly scroll to the next page of the pdf.
My HTML code is something like this (really simplified) :
<html>
<body>
<div id="display-zone">
<embed id="myPdf" src="./myPdf.pdf">
#document
<html>
<body>
<!-- The button I want to get in my JavaScript -->
<button id="next" class="toolbarButton pageDown"></button>
</body>
</html>
</embed>
</div>
</body>
</html>
My JS code to print the pdf viewer on the web page :
affichage.innerHTML = "<embed class=\"media\" id=\""+ongletsMedias[i].firstChild.data+"\" src= \""+ongletsMedias[i].firstChild.data+"\" width= \"1000\" height= \"800\">";
// ongletsMedias[i].firstChild.data equals to "myPdf"
t = 5000; // time before starting pdfDefile()
setTimeout(pdfDefile,t,ongletsMedias[i].firstChild.data,i,1); //call the function to scroll pdf pages
And finally my function pdfDefile() that I'm calling in order to scroll the pdf pages :
function pdfDefile(dir,i,page) {
var xhttp = new XMLHttpRequest();
var t = 0;
xhttp.onreadystatechange = function() {
var checkbox = document.getElementById('checkbox');
if (this.readyState == 4 && this.status == 200 && checkbox.checked) {
document.getElementById("span").innerHTML = this.responseText; // display the number of pages of my pdf
var t = 5000;
if (page < parseInt(this.responseText)) { //test for recursive call
/*HERE is where I want to get the "next" button */
setTimeout(pdfDefile,t,dir,i,page+1);// recall this function while there is a next page to display
} else {
setTimeout(jouerMedia,t,i+1);// call the main fuction, no problem here
}
}
};
xhttp.open("GET", "nbPagesPDF.php?pages="+dir, true);
xhttp.send();
}
I already look at an existing topic (Get element in embed tag), but I can't make it work in my JS.
So please, can you help me to make my code great again (may it have been ;-) ) ?
Regards
Try
var embed = document.getElementById('myPdf');
// Wait for document to load inside embed element
embed.on('load', function() {
embed.getElementById('next').click();
});
(I am using jQuery in this example for adding the event listener, not sure if you are using it on your project?)
Without jQuery you could do:
var embed = document.getElementById('myPdf');
embed.onload = function() {
embed.getElementById('next').click();
};
It might be possible you can not trigger a click event on that button since a user action often must have taken place to trigger click's from js.
I have a webpage wherein I want that onclick of a link or buttonn; the content of a particular div of webpage get updated and replaced with the content which I have scripted in other html page. How to do that?
There are several ways to do that .
<script>
function loaddata()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","page.html",true);
xhr.onload = function(){
if(this.readyState === 4)
{
var div = document.getElementById("divid"); // the div where you want to load the data
div.innerHTML = this.responseText;
}
}
xhr.send();
}
</script>
html code
<button onclick="loaddata()">click</button>
<div id="divid"></div>
there are other ways to do that . but i have shown only javascript one
hope this helps you what you are looking for
As title, my target is to monitor download status(total file size¤t load file size). So, I write a simple code to help. But there exist a strange situation that is my chrome crash when download ISO OS image file(not picture file!!!). Are there any wrong of my code? BTW, when I observe console log for total size file and current load size file. I can't realize where the loaded file exactly store location.(but it indeed progress...until load 1GB then crash!) Are there any one who knows that?
<body>
function TriggerProgressEvent() {
//var progressBar = document.getElementById('p');
var xhr = new XMLHttpRequest();
var x = document.createElement("PROGRESS");
console.log('Entering TriggerProgressEvent');
xhr.open('GET', 'http://127.0.0.1:8080/features/upload/en_windows_server_2012_r2_essentials_x64_dvd_2707177.iso',true);
xhr.send();
xhr.onprogress = function(event) {
if(event.lengthComputable) {
console.log(event.total);
console.log(event.loaded);
x.setAttribute("max", event.total);
x.setAttribute("value", event.loaded);
document.body.appendChild(x);
}
};
xhr.onloadend = function(event) {
//console.log(event.loaded);
x.setAttribute("value", event.loaded);
document.body.appendChild(x);
};
}
</script>
</body>
I am using Jquery UI Dialog. Within the dialog there is textarea that have some text. And I need to save that text as textfile like data.txt when I click the button in the dialog.
<div id = 'metaDataDialog' title='Meta Data' >
<textarea id = 'metaText'>
Some Text
</textarea>
</div>
and this is the jquery ui dialog
$("#metaDataDialog").dialog({ //Jquery UI Dialog Intialization
autoOpen: false,
modal: true,
width: 400,
height: 300,
buttons: {
Save: function() {},
Cancel: function() { $(this).dialog( "close" ); }
},
});
and I need to save/download the text in the local machine, when the save button is clicked
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
function saveTextAsFile() {
// grab the content of the form field and place it into a variable
var textToWrite = document.getElementById("content").value;
// create a new Blob (html5 magic) that conatins the data from your form feild
var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
// Specify the name of the file to be saved
var fileNameToSaveAs = "myNewFile.txt";
// Optionally allow the user to choose a file name by providing
// an imput field in the HTML and using the collected data here
// var fileNameToSaveAs = txtFileName.text;
// create a link for our script to 'click'
var downloadLink = document.createElement("a");
// supply the name of the file (from the var above).
// you could create the name here but using a var
// allows more flexability later.
downloadLink.download = fileNameToSaveAs;
// provide text for the link. This will be hidden so you
// can actually use anything you want.
downloadLink.innerHTML = "My Hidden Link";
// allow our code to work in webkit & Gecko based browsers
// without the need for a if / else block.
window.URL = window.URL || window.webkitURL;
// Create the link Object.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
// when link is clicked call a function to remove it from
// the DOM in case user wants to save a second file.
downloadLink.onclick = destroyClickedElement;
// make sure the link is hidden.
downloadLink.style.display = "none";
// add the link to the DOM
document.body.appendChild(downloadLink);
// click the new link
downloadLink.click();
}
function destroyClickedElement(event) {
// remove the link from the DOM
document.body.removeChild(event.target);
}
$("#download").click(function (e) {
e.preventDefault();
saveTextAsFile();
});
});
</script>
</head>
<body>
<input type="button" id="download" value="Download" />
<textarea id="content">In trying to keep this plugin as simple as possible, all four states are always assumed to be present. You should prepare your button image as a single image the width you want your button, and four times the height of the button. All four states should then live in that one image in the same order as the previous list from top to bottom.</textarea>
</body>
</html>
What I am trying to do is load images that I am dynamically generating one after another before page fully loaded. Here is what I am doing. I am making ASYNC requests to server via createXMLHttpRequest. On a server side I am creating new image (chart image) and returning image attributes in JSON format.
Here is snippet of html code:
<!-- first image -->
<div id="image3Obj">
<div id="image3"><img src="img/loader32.gif"></div>
</div>
<!--second image -->
<div id="image2Obj">
<div id="image2"><img src="img/loader32.gif"></div>
</div>
<!-- third image-->
<div id="image1Obj">
<div id="image1"><img src="img/loader32.gif"></div>
</div>
<script type="text/javascript" defer>load_components();</script>
Snippet of Javascript code:
<SCRIPT LANGUAGE="Javascript" src="js_lib/ajaxCaller.js"></SCRIPT>
<script type="text/javascript">
function load_components() {
createUrlStr('url1');
createUrlStr('url2');
createUrlStr('url3');
}
function createUrlStr(url)
// make async request to server and generating brand new image, then returning image div name, source, width and height back in json format
ajaxCaller.getPlainText(url_str, loadImage);
}
function loadImage() {
var jsonObj = eval('(' + xReq.responseText + ')');
if (jsonObj.imgDiv != undefined && jsonObj.imgSrc != undefined) {
var newImg = document.createElement("img");
newImg.src = jsonObj.imgSrc;
if (jsonObj.imgWidth != undefined && jsonObj.imgHeight != undefined) {
newImg.width = jsonObj.imgWidth;
newImg.height = jsonObj.imgHeight;
}
document.getElementById(jsonObj.imgDiv).appendChild(newImg);
}
}
</script>
Problem is that images get loaded one after another on html, but only getting displayed when last image is loaded. Any idea what am I missing here?
My guess, without seeing an actual example, is that because you are running all 3 async requests at the same time it all happens so quickly they appear to happen at the same time when really they may be spaced apart by a few milliseconds. If you delay your requests like the following example does it appear as desired?
function load_components() {
var x,y,z;
x = setTimeout(function(){ createUrlStr('url1'); }, 100);
y = setTimeout(function(){ createUrlStr('url2'); }, 2000);
z = setTimeout(function(){ createUrlStr('url3'); }, 5000);
}
Also keep in mind that while you are generating the image on the server-side and inserting the tag in order, the image data is being downloaded after the fact by the browser not your AJAX request. To see this happening check out the NET tab in Firebug.