JavaScript - Multiple signals received after click - javascript

I'm creating a webapp using jQueryMobile. When I'm using the app and I click a button it runs the script multiple times.
For example:
I have a submit button:
<input type="submit" id="login-normal" value="Login" />
And I have this JavaScript for debugging on which this error occurs:
$("input#login-normal").live('click',function() {
console.log("Test");
});
On the very first click it works (and it goes to another screen for example), but when I go back to that screen and I click again, it outputs multiple console.logs
edit
this is the exact code as in my .js file.
$("div#login input#login-normal").live('click',function() {
var email = $("input#email").val();
var password = $("input#password").val();
user.checkUser(email, password, function(exists) {
if (exists) {
$.mobile.changePage("#home", { transition: "slidedown"});
} else {
console.log("Wrong email or password.");
}
});
console.log("Login");
});
user.checkUser is an object from my class User which checks if the user exists in the database (WebSQL). returns true of false on callback.

Can you use on instead of live and try it like
$("input#login-normal").off('click').on('click',function() {
//...
});

Try
$.mobile.activePage.find("div#login input#login-normal").live('click',function() {...}
If that still fires multiple times you can try
$(document).delegate("[data-role=page]", "pagebeforeshow", function () {
$("div#login input#login-normal").bind("click", function (e) {...}
}

Related

How can i execute a function after a form submission causes a page refresh?

I am using shopify's built in customer create, login, reset form submissions which on submit, forces the page to refresh. My intention is to show a message that shows after the page has been refreshed via a button click function. This is what i have so far; The message shows until that page refreshes and then the active class is removed as you would expect.
$(document).ready(function () {
class Alert {
constructor() {
this.customerAlert = document.createElement('div');
}
init(){
this.customerAlert.classList.add('customer-alert');
document.querySelector('body').append(this.customerAlert);
}
show(message){
this.customerAlert.textContent = message;
this.customerAlert.classList.add('active');
setTimeout(() => {
this.customerAlert.classList.remove('active');
}, 8000);
}
}
//create snackbar and initiate
const alertMessage = new Alert();
alertMessage.init();
const createAccountButton = document.querySelector('input.account-trigger');
createAccountButton.addEventListener('click', () => {
alertMessage.show('Your account in now under review');
});
});
Set a boolean variable in session storage just prior to the submit to represent the two states, and then read it in after the refresh.
Something like this:
function HandleFlag(){
var F=sessionStorage.getItem('Flag');
if(F=='1'){
// display your message box here
sessionStorage.setItem('Flag','0');
} else {
// the state is "0" so toggle it just before submitting
sessionStorage.setItem('Flag','1');
}
}
I hope you get my drift.

Javascript not executing after .then

I'm trying to put recaptcha v3 on a form but inserting the token into a hidden input field doesn't work - on the first submission.
Here is the code that I doctored a little. I added an alert and stopped the sumbit to see what's happening. This code is in a separate bundle.js file.
var form = document.querySelector('#contact-form');
var inputs = form.querySelectorAll('input');
$(form).submit(function(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('secret_key', {
action: 'my_action'
}).then(function(token) {
document.getElementById('tokenField').value = token;
alert('token is; ' + token); // inserted for troubleshooting
});
});
removeMessageBox();
validation();
var alerts = document.querySelectorAll('.alert-text');
if (alerts.length == 0) {
// document.forms['contact-form'].submit();
}
});
With this code as written, the alert shows a valid token but tokenField has no value. tokenField gets the token AFTER you press OK on the alert. What is the problem??? I have tried everything.
If you take out the alert and uncomment submit, tokenField is empty on submission.
Note that this script also calls validation() and removeMessageBox(), which removes validation error messages.
If validation() stops the submission for some reason, you can fix the problem, submit again and tokenField gets it value and everything works great - the second time.
As far as I can tell, the field is being set inside of a callback, while the other functions are running in the main function. You can either put all of the code into the callback function for the .then function, or use an async function.
Callback
$(form).submit(function(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('secret_key', {
action: 'my_action'
}).then(function(token) {
document.getElementById('tokenField').value = token;
removeMessageBox();
validation();
var alerts = document.querySelectorAll('.alert-text');
if (alerts.length == 0) {
// document.forms['contact-form'].submit();
}
});
});
});
Async
$(form).submit(function(e) {
e.preventDefault();
grecaptcha.ready(async function() {
const token = await grecaptcha.execute('secret_key', {
action: 'my_action'
});
document.getElementById('tokenField').value = token;
removeMessageBox();
validation();
var alerts = document.querySelectorAll('.alert-text');
if (alerts.length == 0) {
// document.forms['contact-form'].submit();
}
});
});

beforeinstallprompt triggers on every load

Beforeinstallprompt triggers on every load.
I have used the code here: https://developers.google.com/web/fundamentals/app-install-banners/
I am not using the The mini-info bar which i have dissabled by calling e.preventDefault();
The problem is that the showAddToHomeScreen(); is called on every load if the user does not click addToHomeScreen.
I want the showAddToHomeScreen(); function to be called only every month or so by storing information about the last "canceled" click in sessions or something similar. Isn't google suppose to do this on it's own?
This i found on the following link:
https://developers.google.com/web/updates/2018/06/a2hs-updates
You can only call prompt() on the deferred event once, if the user clicks cancel on the dialog, you'll need to wait until the beforeinstallprompt event is fired on the next page navigation. Unlike traditional permission requests, clicking cancel will not block future calls to prompt() because it call must be called within a user gesture.
window.addEventListener('beforeinstallprompt', function (e) {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
showAddToHomeScreen();
});
function showAddToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
prompt.style.display = "flex";
var open = document.querySelector(".a2hsBtn");
open.addEventListener("click", addToHomeScreen);
var close = document.querySelector(".a2hsBtn-close");
close.addEventListener("click", function() {
prompt.style.display = "none";
});
}
function addToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
// hide our user interface that shows our A2HS button
prompt.style.display = 'none';
if (deferredPrompt) {
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then(
function (choiceResult) {
if (choiceResult.outcome === 'accepted') {
show_ad2hs_success_message();
}
deferredPrompt = null;
});
}
}
You have to define your own session and add expire date. This is simple with ajax. This is how i did:
Javascript:
$(document).ready(function() {
$.ajax({
url: '/update_session_addtohomescreen',
success: function (session_expired) {
if(session_expired=='True'){
showAddToHomeScreen();
}
},
error: function () {
alert("it didn't work");
}
});
});
This is wrapping the showAddToHomeScreen(); function
View
#csrf_exempt
def update_session_addtohomescreen(request):
if request.is_ajax():
number_of_days_till_expire = 1
now_in_secs = time.time()
if not 'last_session_coockie' in request.session or now_in_secs > request.session['last_session_coockie']+60:#number_of_days_till_expire*86400:
session_expired = True
request.session['last_session_coockie'] = now_in_secs
else:
session_expired = False
return HttpResponse(session_expired)
return None
You should though include csrf token in your request and also add the url to urls.py

Use JavaScript to submit Ajax.BeginForm()

I'm typing this question away from my computer so I don't have the exact code, but the question might be straightforward enough without it.
When I have a submit button directly within an Ajax form and I click the button directly to submit, everything works fine, and as expected. The Ajax.Form POSTs back to the controller which returns a partial view that is rendered inside the current View that I have.
But what I need is for a button to be clicked in the Ajax.Form, and for a JavaScript function to run. The JavaScript function will do some vaildation which decides whether to submit the Ajax.Form or not.
I have tried putting 2 buttons in the Ajax.Form, a hidden submit button and a regular button. I used the onclick event of the regular button to call my JavaScript function which then called the click method of the hidden submit button. (I have also tried just submitting the Ajax.Form directly with document.forms[formname].submit() )
This sort of works.. But not correctly for some reason. The Ajax.Form POSTs back to the controller but when a partial view is returned from the controller, the partial view is the only thing rendered, and it is rendered as basic html with no css/bootstrap.
What is the difference between actually clicking the submit button and doing so programmatically?
How can Achieve what I am trying to do?
Edit
#using (Ajax.BeginForm("GetInstructorInfo", "Incident", FormMethod.Post, new AjaxOptions { OnBegin = "lookupInstructor();", UpdateTargetId = "InstructorInfo" }, new { #class = "form-inline", role = "form", #id = "instructorInfoForm", #name = "instructorInfoForm" }))
{
//code in here
}
Edit 2 / 3:
<script>
function lookupInstructor()
{
if ($('input[name="Instructors['+userInputInstructor+'].Username'+'"]').length > 0) //Don't allow user to enter multiple instances of the same Instructor
{
document.getElementById("InstructorUsername").value = ''; //clear textbox value
return false;
}
var userInputInstructor = document.getElementById("InstructorUsername").value;
$.ajax({
url: '#Url.Content("~/Incident/LookUpUsername")',
data: { userInput: userInputInstructor },
success: function (result) {
if (result.indexOf("not found") != -1){ //if not found
$("#InstructorNotFoundDisplay").show();
document.getElementById("InstructorUsername").value = ''; //clear textbox value
$('#InstructorInfo').empty();
return false;
}
else {
$("#InstructorNotFoundDisplay").hide();
return true;
}
}
});
}
</script>
You can use the OnBegin() ajax option to call a function that runs before the form is submitted (and return false if you want to cancel the submit). For example
function Validate() {
var isValid = // some logic
if (isValid) {
return true;
} else {
return false;
}
}
and then in the Ajax.BeginForm() options
OnBegin = "return Validate();"
Edit
Based on the edits to the question and the comments, you wanting to call an ajax function in the OnBegin() option which wont work because ajax is asynchronous. Instead, use jQuery.ajax() to submit you form rather than the Ajax.BeginForm() method (and save yourself the extra overhead of including jquery.unobtrusive-ajax.js).
Change Ajax.BeginForm() to Html.BeginForm() and inside the form tags replace the submit button with <button type="button" id="save">Save</button>and handle its .click() event
var form = $('#instructorInfoForm');
var url = '#Url.Action("GetInstructorInfo", "Incident")';
var target = $('#InstructorInfo');
$('#save').click(function() {
if ($('input[name="Instructors['+userInputInstructor+'].Username'+'"]').length > 0) {
....
return; // exit the function
}
$.ajax({
....
success: function (result) {
if (result.indexOf("not found") != -1) {
....
}
else {
$("#InstructorNotFoundDisplay").hide();
// submit the form and update the DOM
$.post(url, form.serialize(), function(data) {
target.html(data);
});
}
}
});
});

Load/Unload onClick Javascript

I have a code that was answered for me in another post which is below. However I have since ran into a new problem that I can't solve easily. I added additional LoadKML functions e.g. Function LoadKML1(), function LoadKML2(). The problem is now I need to click the killKML button to clear LoadKML1 before I can click LoadKML2. I would like to have the LoadKML1 clicked to load the KML and if clicked again LoadKML1 to run the killKML code. basically an on and off button in essence.
Any help is appreciated.
var kmlLoaded = false;
function LoadKML() {
alert('Kill KML');
if (kmlLoaded) {
return
killKML();
}else{
alert('Creating KML');
var nwlink = "http://kml-samples.googlecode.com/svn/trunk/kml/NetworkLink/placemark.kml"
createNetworkLink(nwlink);
kmlLoaded=true;
}
}
function killKML(source) {
ge.getGlobe().getFeatures().removeChild(networkLink);
you could change your code and call the killKML() in the kmlLoaded check like this:
function LoadKML() {
if (kmlLoaded) {
//return
killKML();
}else{
var newlink = "http://www.something.com/test.kml";
createNetworkLink(newlink);
kmlLoaded=true;
}
}

Categories

Resources