add unload event listener this is works
but
<html>
<head>
</head>
<body>
</body>
<script>
function give_show(value){
return function(){
console.log(value);
}
}
var body_element = document.getElementsByTagName('body')[0];
body_element.addEventListener('load',give_show('pong!'),false)
</script>
</html>
The body has already loaded before the event is attached. Try moving the script to the <head> tag and using:
<body onload="give_show('pong!')">
Related
I'm using the summernotes html form on a FileMaker solution to write emails. originally I had a save button to transfer the html uri into a field and then email that with the client scripts. However, users (and me...) don't like having to click "save" and then "send".
I'm wondering if anyone has any ideas on how to automate this. I tried to set the save function on a 1 second recurrence, however, that stops typing and removes the cursor. I'm thinking either someway to pull data via json or ideally some way I can interrogate it with my FileMaker 'send' script?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Editor</title>
<!-- include libraries(jQuery, bootstrap) -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.16/dist/summernote.min.js"></script>
<!-- <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.16/dist/summernote.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script>
var intervalID;
function autoSave() {
intervalID = setInterval(saveText, 1000);
}
function saveText() {
//$('#summernote').summernote('code', 'code');
//window.alert('save changes');
/* Prep the URL to use for the hand-off to FM. */
var fullURL = '[[SAVEURL]]¶m=' + encodeURIComponent ($('#summernote').summernote('code'));
/* Send the data to FM. */
window.location = fullURL;
return false;
}
</script>
</head>
<body onload ="autoSave();">
<div id="summernote">[[CONTENT]]</div>
<script>
}
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
tabsize: 2,
toolbar: [
// [groupName, [list of button]]
['style', ['style','bold', 'italic', 'underline', 'clear']],
//['font', ['strikethrough', 'superscript', 'subscript']],
//['fontsize', ['fontsize']],
['color', ['color']],
//['para', ['ul', 'ol', 'paragraph']],
//['height', ['height']],
['insert', ['link']],
//['insert', ['link','hr','table']],
//['misc',['codeview']],
['mybutton',['save']]
],
buttons: {save: SaveButton}
});
});
</script>
</body>
</html>
Instead of passing the encoded HTML as a parameter in the URL (¶m=...) - which causes the page to reload and thus causes the focus to be lost - try passing the parameter as an anchor (#...).
Like that the page won’t reload, and the focus should remain. Of course, you’ll have to adjust your parameter reading code accordingly.
Alternatively, if you have FileMaker 19 you can use the FileMaker.PerformScript or FileMaker.PerformScriptWithOption function to pass the value directly to a script.
I have the following JSFiddle, demonstrating a small Vega Bar chart:
<head>
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
</head>
<body>
<div id="view"></div>
<script type="text/javascript">
var view;
var chart = { Vega code removed for brevity - please check JSFiddle}
render(chart);
function render(spec) {
view = new vega.View(vega.parse(spec), {
renderer: 'canvas', // renderer (canvas or svg)
container: '#view', // parent DOM container
hover: true // enable hover processing
});
return view.runAsync();
}
</script>
</body>
If you copy the vega object into Vega Editor you get a tooltip when hovering over the chart elements.
Within the JSFiddle there is no tooltip.
Could someone please help me get a tooltip in the HTML-embedded version?
I have been able to get the full functionality through using vega-embed with versions listed below:
<!DOCTYPE html>
<html>
<head>
<script src="vega-5.17.3.min.js"></script>
<script src="vega-lite-4.17.0.min.js"></script>
<script src="vega-embed-6.15.0.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = { Vega code removed for brevity - please check JSFiddle}
vegaEmbed('#vis', spec).then(function(result) {
}).catch(console.error);
</script>
</body>
</html>
This code display the textarea tag for console.log(abc) which is the ID, but for console.log(text) shows an error. Can anyone explain how value for console.log(abc) is getting executed and not for text class.
I haven't pass any argument to callback function. so how even for console.log(abc) it give an output.
Thank you.
document.querySelector(".text").addEventListener("keydown", () => {
console.log(abc);
//console.log(event);
console.log(text);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo</title>
</head>
<body>
<textarea name="ab" class="text" id="abc" cols="30" rows="10"></textarea>
<script src="script.js"></script>
</body>
</html>
The code segment document.querySelector("#abc") gets the html element with an id of "abc".
The code segment:
.addEventListener("keydown", () => {
console.log(abc);
})
is an event listener that listens for a keydown event and prints the html tag with the id of "abc"
I want to make a redirection with jQuery mobile right just after the page loads.
Something like this
<?php
... some php stuff here
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<script>
$.mobile.changePage("index.php");
</script>
But nothing happens...
Thanks!
Nothing happens because jQueryMobile hasn't done it's magic yet.
Try:
$(document).bind('pageinit', function() {
$.mobile.changePage("index.php");
});
You could also try some of the events listed at http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Edited following comment:
The following works as expected for me:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).bind('pageinit', function() {
$.mobile.changePage("#pageTwo");
});
</script>
</head>
<body>
<div id="firstPageId" data-role="page">
Page One
</div>
<div id="pageTwo" data-role="page">
Page Two
</div>
</body>
</html>
You can use plain ol' JavaScript for this, you don't need jQuery:
window.location = "index.php";
To do it after the page loads, add a $(document).ready() handler:
$(document).ready(function () {
window.location = "index.php";
});
Try, adding your page-id in the script with .live, something like this:
$('#mainpage').live('pageinit', function (event) {
alert("hi");
//$.mobile.changePage("index.php");
});
Here is the full example: http://jsfiddle.net/KyKFE/
On the other hand, you can also use just plain javascript function or php (if .php page) to do the redirection. They are many different ways to do this.
Please try this to end of your page and before </body> tag,
<script>
$(window).load("index.php", function() {
// stuff or not
});
</script>
I hope help you. :)
I'm working on installing a PhoneGap plugin on an iPhone. The page for the plugin I am attempting to install can be seen here: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MessageBox.
I believe I have narrowed down my problem to incorrectly working with the JavaScript file. I am including it on my HTML page like so:
<script language="javascript" type="text/javascript" src="MessageBox.js"></script>
The rest of my HTML page is this:
<script type="text/javascript">
alert("test1");
var messageBox = window.plugins.messageBox;
alert("test2");
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
</script>
I see an alert saying test1, but not the second alert. This makes me think that the error is on the line:
var messageBox = window.plugins.messageBox;
However, I'm not quite sure what I should be doing differently. From what I can tell, I've done all the necessary steps as described on the plugin's documentation page, seen here:
https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MessageBox/README.md
(As expected, I also do not see the output of the messageBox.alert... line when viewing this through the iOS simulator.)
I would appreciate any help with this issue, thanks!
NOTE: my initial thread regarding this topic can be seen here: Trouble Installing PhoneGap Plugin
EDIT: I should also add that I have the exact same problem when trying to install a different (but similar) plugin, known as "Prompt"
EDIT2: Here's my index.html:
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="MessageBox.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.alert("PhoneGap is working");
window.location.href="otherpage.html";
}
</script>
The problem is that when you try to create your MessageBox, PhoneGap is not ready yet.
You just need to wait for PhoneGap to be ready before you execute your code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location="otherpage.html";
}
</script>
</head>
<body>
</body>
</html>
Then, on otherpage.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="MessageBox.js"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
console.log("onLoad");
var messageBox = window.plugins.messageBox;
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
}
</script>
</body>
</html>
I tested it on PhoneGap 1.4.1