I'm coding a Windows 8 application in JavaScript and HTML5. I wish to show a dialog box when clicking a button.
I have specified the event handler in the default.js file like so:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().done(function () {
// Get the login button on the home page
var login_button = document.getElementById("login_submit");
// Set an event handler on the login button
login_button.addEventListener("click", UserActionLogin, false);
}));
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function UserActionLogin(mouseEvent) {
var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
}
app.start();
})();
My HTML markup is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- HelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div class="login_box">
<form method="post">
<input type="text" name="login_username" />
<input type="password" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</form>
</div>
</div>
</body>
</html>
When I click the login_submit button when the application loads, it shows the dialog box just fine.
But when I click it for a second time it doesn't work, it's like it's forgotten about the Event Handler.
The problem is having the element in there, which you don't need in an app because you won't want to have the submit button repost/reload the page with the form contents. You're effectively reloading the page but the activated handler isn't called in that case (the page is loaded as a post rather than a request), so you lose the event handler.
If you delete the element, then it works just fine. I'm also told that if you use type="button" instead of type="submit" then it should work. But in an app, you'll typically collect the data from the controls and save that in other variables, navigating to another "page" in the app using the WInJS navigation and page control mechanisms, which keeps you on default.html without changing script context.
Also, I notice that you're still referring to the RC version of WinJS. Since Win8 is officially released now, be sure to develop against the released version of the system and using the most recent tools.
The problem is your use of the form element, which is causing your HTML to be reloaded when you click the button - this replaces the element you set up the event handler for, meaning that subsequent clicks don't invoke your handler function.
Remove the form element and you will get the behavior you expect, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App7</title>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<div id="wrapper">
<div class="login_box">
<input type="text" name="login_username" />
<input type="password" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</div>
</div>
</body>
</html>
If you really need the form element for some reason (perhaps because you are using a JS library which expects it), then you can prevent the problem by stopping the form being submitted in your event handler function, as follows:
function UserActionLogin(mouseEvent) {
var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
mouseEvent.preventDefault();
}
The call to preventDefault stops the form being posted but allows you to keep the form element in the document.
Related
dialog is open by module on page.
html code:
<!DOCTYPE html>
<!--
#license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<dialog id="dialog">
<form method="dialog">
<input type="text" id="google">
</form>
</dialog>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places"
defer
></script>
</body>
</html>
and in js file, I created the google autocomplete and focus on the input field in the dialog.
js code:
let autocomplete;
const addressDialog = document.querySelector("#dialog");
const addressGoogleField = document.querySelector("#google");
addressDialog.showModal();
function fillInAddress() {
const place = autocomplete.getPlace();
console.log(place);
}
function initMap() {
autocomplete = new google.maps.places.Autocomplete(addressGoogleField, {
fields:["geometry"],
types:["geocode"]
});
addressGoogleField.focus();
autocomplete.addListener("place_changed", fillInAddress);
}
window.initMap = initMap;
results:
Google Places Autocomplete Box is behind the modal dialog.
I want to put autocomplete box in front of the dialog. What should I do?
This may be a z-index issue. The Google Place Autocomplete box ("pac-container" css class) is appended at the end of the body element, and not within your modal dialog.
To ensure the autocomplete box is above your modal dialog div. You can try and update your css with :
.pac-container {
z-index: 10000;
}
The 10000 z-index is just a value high enough to be above the modal z-index.
Sometimes I encounter a very strange behavior of the browser's native Select File Dialog.
I have a <input type="file" onchange="console.log(event.target.files)" /> element to upload a single file.
Usually the onchange event is triggered instantly (respectively after some milliseconds) after selecting a file in the Select File Dialog.
But sometimes the browser kind of freezes and it takes up to 10 seconds until the onchange event is called.
One thing I've noticed:
If I have a network drive in my Windows Explorer Quick Access toolbar that is not reachable (because I'm not connected with VPN), this massive delay problem occurs much more often (although I do select a file on my Desktop that has nothing to do with this network drive).
Same in all major browsers (Chrome, Edge, Firefox), so it probably has something to do with the Windows Operating System.
Does somebody else facing this problem?
Minimal reproducible example:
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
let timestamp;
function onClick() {
window.addEventListener('focus', fileDialogClosed);
}
function fileDialogClosed() {
document.getElementById('result').innerHTML =
'File Dialog closed.<br />';
timestamp = new Date().getTime();
window.removeEventListener('focus', fileDialogClosed);
}
function onChange(file) {
let delay = new Date().getTime() - timestamp;
document.getElementById('result').innerHTML +=
'onchange event called with delay of <strong>' +
delay +
'ms</strong>';
document.body.querySelector('input').value = null;
}
</script>
</head>
<body>
<h1>File Input</h1>
<p>
Little demo to show/measure delay between closed file input dialog and
call of onchange event handler.
</p>
<input
type="file"
onclick="onClick()"
onchange="onChange(event.target.files[0])"
/><br /><br />
<div id="result"></div>
</body>
</html>
The functionality listed below executes properly when I submit content back to the server through google.script.run however it does not work for my coworkers in the same file. These coworkers are on the same domain and have edit access to the spreadsheet and are able to load the first portion of the feature, the rough-sketch modal, from the template I built (html shown below).
Our experiences seem to diverge when they hit the "Submit" button - their client should be calling google.script.run.userSubmissions. On the back-end executions view, however, I do not receive any indication that their client side script is properly calling the userSubmission function - shown below I would expect it to show up at the top, line item 3 is when I performed the same action and my client called google.script.run as expected. Also, I cannot seem to see any errors being reported of any kind.
Full html being presented in a floating modal window:
Note: I have 3 scriptlets printing in the function call and have verified that these are working properly in my co-workers clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Provide Comment</title>
</head>
<body>
<h3>Provide comment for content item #</h3>
<div>
<span>Title</span>
<p>Content</p>
</div>
<div>
<label style="display: block;" for="commentInput">Comment:</label>
<textarea
id="userComment"
style="display: block; margin: 1em 0 1em 0; width: 99%;"
name="commentInput"
rows="10"
placeholder="Please provide your comment here..."
></textarea>
<button style="float: right;" onclick="submitComment()">
Submit
</button>
</div>
<script>
function submitComment() {
let comment = document.getElementById("userComment").value;
google.script.run
.withSuccessHandler(closeModal)
.withFailureHandler(onFailure)
.userSubmission(
comment,
"comment",
parseInt(<?= contentIDColumn; ?>),
parseInt(<?= eventContentID; ?>),
parseInt(<?= statusColumn; ?>)
);
function closeModal() {
google.script.host.close();
}
function onFailure(error) {
console.log(error);
let message = "There was an error processing that form. Perhaps try again?"
document.getElementById("errorMessage").textContent = message;
}
}
</script>
</body>
</html>
I'm trying to create my very first HTML code. My code is:
<html>
<head>
</head>
<body>
<input type="button" id="apply" value="Push Me" onclick="javascript:faa();" />
<input type="button" id="apply" value="No, Push Me Instead" onclick="javascript:foo();" />
Official website of Foocorp Inc. (Not really.)
</body>
<script type="text/javascipt">
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
</script>
</html>
Whenever I push the button with value "No, Push Me Instead" it works fine. The button "Push Me" doesn't do anything when I push it. What am I doing wrong?
text/javascipt should have an r in it.
HTML 5 makes the type attribute for script elements optional when you are writing JavaScript. When you are dealing with JS, the attribute serves no purpose other then to be an opportunity to make types that break your code so omit it entirely.
Works fine when I move the other function to the same script:
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
You have to change script type spelling, as there is a spelling mistake
<script type="text/javascript">
In HTML5, i have an orphaned form control submitting my form. To support IE10, i use the following:
jQuery(document).delegate('input[form][type="submit"], button[form][type="submit"]', 'click', function() {
form_selector = "form#" + jQuery(this).attr("form") + "";
console.log("submitting IE10 form from an orphaned control:" + form_selector);
jQuery(form_selector).submit();
});
chrome and firefox submit without this bit of code fine and handle inputs with the required attribute as usual, stopping the submit and showing a pop-up message if any one required input is empty.
<input required/>
IE10 needs the above javascript to submit the form, HOWEVER, if any inputs with the required attribute are empty, the usual pop-up messages do not appear over the empty controls. If i move the control under the form and DO NOT USE the submit() function, then the pop-up messages appear fine.
any advice on how to get the pop-ups to show up when calling submit() in IE10?
EDIT: here's a jsfiddle to demo what's happening: http://jsfiddle.net/2YYvh/5/
Try it both in IE10 and chrome/firefox
If you use the $.trigger method you can activate the submit button that you need to in order to fire the validation.
The following is an updated version of your example using the .trigger.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$('.btn-primary').click(function(event) {
$("form#test_form input[type=submit]").trigger( "click" );
});
});
</script>
</head>
<body>
<h2>
Try this in chrome and then in IE10
<button type="submit" class="btn btn-primary" form="test_form">
im outside the form
</button>
</h2>
<div class="dashWidget autoHeight" data-pagination='true'>
<form id="test_form">
Leave me blank:<input type="text" value="" required />
<input type="submit" value="im in the form!"/>
</form>
</div>
</body>
</html>
This is not directly related but is an alternative.
You could always create your own validation, for example if you want to validate an input of type=email. You could listen for the input event on the email field. If HTML5 validation throws a typeMismatch, then override the default message with something more useful and/or sarcastic.
$('.email').bind('input', function () {
//We need to reset it to blank or it will throw an invalid message.
this.setCustomValidity('');
if (!this.validity.valid) {
this.setCustomValidity("Dude '" + this.value + "' is not a valid email. Try something like "+
"jim#jboss.org. And no we are not checking if it actually works, we are just looking "+
"for the # sign. ");
}
});