i was establishing communication between website and flutter i want to fire message on button click and i have implemented the code below.
<button onclick="buttonClick()" type="button">Cancel</button>
<script>
function buttonClick() {
window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true,['msg','CancelbuttonClicked'], {test:'Go-Back'}).then(function(result) {
alert("Hello! Cancel Buttton clicked!!");
console.log('Hello! Cancel Buttton clicked!!');
});
});
}
</script>
in flutter side i have implemented the following to get the message
controller.addJavaScriptHandler(
handlerName: "cancelbuttonState",
callback: (args) async {
print('Cancel Button clicked');
return args.reduce((curr, next) => curr + next);
});
but both JavaScript and app dint give me console print thanks.
You are executing the below line too late inside the body of the cancel function. You will need to add the listener much earlier for the callback to be registered.
In other words, you are listening for an event that is already finished.
window.addEventListener("flutterInAppWebViewPlatformReady" .....
Reorganize your code in a fashion similiar to this:
<button onclick="buttonClick()" type="button">Cancel</button>
<script>
isAppReady = false;
window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
isAppReady = true;
});
function buttonClick() {
if (isAppReady) {
window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true, ['msg', 'CancelbuttonClicked'], { test: 'Go-Back' }).then(function (result) {
alert("Hello! Cancel Buttton clicked!!");
console.log('Hello! Cancel Buttton clicked!!');
});
}
}
</script>
Related
I am using the google auth for client (gapi) in my code and I have this onLoad event:
<script>
function onLoad() {
gapi.load('auth2', function () {
auth2 = gapi.auth2.init();
var additionalParams = {};
auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);
//auth2.attachClickHandler('btnGoRegister', additionalParams, onRegisterIn, onSignInFailure);
});
}
</script>
As you can see above, I am attaching a click handler for my Signin button which works fine. The other part is that for the Register button, I have to enable/disable the button and associated events on a condition which works fine for other auth (like FB).
The problem here is that once the attachClickHandler is invoked, then I am unable to in unattach it so that if my condition is not true, then the Google popup screen should not be invoked (currently if it is invoked once then it will always be shown irrespective of my condition).
Does anyone have any idea on how to achieve this?
Thanks
It looks like Google Sign-In API does not support a method for un-attaching the click handler. On the other hand they have a disconnect() & signOut() function, but I don't think it achieves what you want.
One solution is to add an additional button which handles the decision of loading the Google Auth API and preforms the click on signinButton. The signinButton can be hidden using css.
I don't have the api up & running but the code should look something like:
const GoogleSignInButton = 'signinButton';
const GoogleDecisionGateSignInButton = 'googleDecisionGateButton';
function onLoad() {
document.getElementById(GoogleDecisionGateSignInButton).addEventListener("click", GoogleDecisionGateButton);
}
function GoogleDecisionGateButton() {
if (ShouldUseGoogleSigninButton()) {
LoadGoogleAuthApi();
ClickGoogleAuthButton();
}
}
function ShouldUseGoogleSigninButton() {
return true; // Replace this with logic to decided if user should use Google API Auth button or not.
}
function LoadGoogleAuthApi() {
gapi.load('auth2', function () {
auth2 = gapi.auth2.init();
var additionalParams = {};
auth2.attachClickHandler(GoogleSignInButton, additionalParams, onSignIn, onSignInFailure);
//auth2.attachClickHandler('btnGoRegister', additionalParams, onRegisterIn, onSignInFailure);
});
}
function ClickGoogleAuthButton() {
document.getElementById(GoogleSignInButton).click()
}
HTML:
<button id="signinButton" type="button"></button>
<button id="googleDecisionGateButton" type="button"></button>
CSS:
#signinButton { display: none !important }
I want to be redirected to another page after the sweetalert modal closed on timeout.
I am using the following code. Modal is showing and it is closing after timer ends but new page is not being redirected.
$('#with-timer').on('click', function () {
var timerInterval;
swal({
title: 'Auto close alert!',
html: 'I will close in <strong>2</strong> seconds.',
timer: 2000
}).then(function (result) {
if (result.dismiss === swal.DismissReason.timer) {
window.location.href = "index.php";
}
});
});
Any suggestion to solve this problem?
Thank you.
Try using replace() instead of href()
Change your code to
.then(function (result) {
if (result.dismiss === swal.DismissReason.timer) {
window.location.replace = "index.php";
}
It looks like you're mixing sweetalert with sweetalert2. They have different APIs. It looks like sweetalert2 tells you the reason why an alert is dismissed, so I'll use it for this answer, though it uses swal.fire to open up an alert.
Here's a working example:
$('#with-timer').on('click', function () {
var timerInterval;
swal.fire({
title: 'Auto close alert!',
html: 'I will close in <strong>2</strong> seconds.',
timer: 2000
}).then(function (result) {
if (result.dismiss === swal.DismissReason.timer) {
window.location.href = "https://stackoverflow.com";
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
<button id="with-timer">Open Modal</button>
i try create simple Chrome Extension, after click button in pop-up, i need send function setInput() to page, function change value and i need use trigger('keyup'), if i try use this function in Chrome Console - trigger work. But if i send this function after click in pop-up - trigger not work(
Chrome Extension - Trigger not Work
Console - Trigger Work
popup.html
<head>
<script src="popup.js"></script>
</head>
<body>
<div class="btn">Click</div>
</body>
popup.js
function sendMessage() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
});
}
function onWindowLoad() {
chrome.tabs.executeScript(null, { file: "PageReader.js" });
}
document.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
sendMessage();
});
});
window.onload = onWindowLoad;
PageReader.js
- in file top i include Jquery
function setInput() {
var input = $('.text input');
input.val('1111').trigger('keyup');
}
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "start" ) {
setInput();
}
}
);
thanks all for help, i find answer, i delete jQuery, and create event "keyup"
Old:
var input = $('.text input');
input.val('1111').trigger('keyup');
New:
var evt = document.createEvent('KeyboardEvent');
evt.initEvent('keyup', true, true);
var input = document.querySelector('.text input');
input.value = '1111';
input.dispatchEvent(evt);
Please add debugger after btn.addEventListener('click', function() { too see what is going on. if this event handler is attached.
Second thing - you may want to wrap you initialisation code into setTimeout call with let's say 100ms of delay, to check if this page you are dealing with is not only working with some framework that generates this HTML and this is done after DOMContentLoaded. This means basically wrap everything inside
document.addEventListener("DOMContentLoaded", function() {
with setTimeout(function() {/*everything inside goes here*/}, 100)
I try to display a popup when I click on a button using javascript.
But this error appears :
Uncaught ReferenceError: confirmation is not defined
at HTMLButtonElement.onclick
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer) {
alert("Bye bye!")
window.location = "http://www.google.com/";
} else {
alert("Thanks for sticking around!")
}
}
<button type="submit" class="danger btn btn-danger" onclick="confirmation()">Transférer</button>
I suggest a solution that will work for sure.
Add an event listener of DOMContentLoaded to the whole document and call an anonymous function.
You can then wrap your code in that function's brackets
and it will execute once loading is complete.
<button type="submit" class="danger btn btn-danger" >Transférer</button>
<script>
var btn = document.querySelectorAll("button")
document.addEventListener('DOMContentLoaded', function () {
btn[0].addEventListener("click", function () {
// When this button is clicked we want to enable zooming of our list.
// To do this we add an event listener to our list itself,
// so when the cursor hovers it, the enlarge function gets called.
var answer = confirm("Leave tizag.com?")
if (answer) {
alert("Bye bye!")
window.location = "http://www.google.com/";
} else {
alert("Thanks for sticking around!")
}
});
});
</script>
have a good day :)
You may haven't linked your .js file with your .html file. That's the only possible problem.
At the end of your html <body> tag add a:
<script src="your-script.js" type="text/javascript"></script>
Did you place your javascript code to a script block? i.e
<script type="text/javascript">
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer) {
alert("Bye bye!")
window.location = "http://www.google.com/";
} else {
alert("Thanks for sticking around!")
}
}
</script>
<button type="submit" class="danger btn btn-danger" onclick="confirmation()">Transférer</button>
I've got a button:
<button type="button" class="btn btn-primary mt15 send-emails" name="SendEmails" value="true">Send Emails</button>
And a method:
$('.send-emails').click(function (e) {
// build data and other stuff
$.post('/leads/sendemails', data, function (data, status, xhr) {
alert('Emails have successfully been queued for sending.');
window.onbeforeunload = null;
window.location.href = '/Leads/Lead/' + #Model.LeadID;
}, 'json');
});
Even with window.onbeforeunload = null; I still get the popup warning:
How can I prevent this?
The solution is following:
$(window).unbind();
This will remove the onbeforeunload event just before redirect the browser to a new page using location.href.
Use a global variable to check before redirecting to the page like this. Have a string variable to hold href which you need to redirect and redirect it before statement
(function($){
var dontSubmit = false,
$form = $('form#my-form');
// Prevent the trigger a false submission on link click
window.addEventListener("beforeunload", function (e) {
dontSubmit = true;
$form.trigger('submit');
});
$form.on('submit', function(event){
if (dontSubmit) {
event.preventDefault();
return;
}
// Continue on as normal
});
})(jQuery);