JavaScript Action Button - javascript

I have this code. What it does is that when I click the Save button user gets registered. I want to automate this button. I want to auto click this button. So when the page loads. Users don't have to click the save button. User get register automatically. I have already hardcoded the user information.
var buttons = [];
buttons.push({
text: lang.save,
action: function(){

You could do something like this :
When DOM (html page) is loaded, click the button.
// As soon as the page is loaded, auto save.
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM loaded');
const saveButton = document.getElementById("button-id");
saveButton.click();
});

Related

Bootstrap event "shown.bs.modal" fires multiple times everytime I click the toggle button

I am building a pdf view with PDF.js to render pdf inside bootstrap modal, and according to the documentation I can listen to "shown.bs.modal" event when the modal popup is displayed so I have this code:
function renderPdfMobile() {
docs.forEach(doc => {
doc.addEventListener("click", function (e) {
const file = e.target.dataset.file;
var modal = document.getElementById("fileModal");
modal.addEventListener('shown.bs.modal', function (event) {
console.log(modal)
})
})
})
}
renderPdfMobile()
Code works every time I click the modal button. The problem is it fires with the increment of +1 every time.
So in console
When I click once, I get "fired"
when I click again I get
"fired"
"fired"
another click results in:
"fired"
"fired"
"fired"
At this point, I don't know what I am doing wrong.
EDITED

How can I catch the "file selected" event?

I have the following dialog box in my application:
When the user presses the Add logo button, following things should happen:
A file selectio dialog should pop up.
After the user has selected the file, a function should be called (which will update the image).
I have the following code for this. The markup for file selection looks like this:
<button class="btn" ng-click="$ctrl.addLogo()">Add logo</button>
$ctrl.addLogo() is defined as (source)
$ctrl.addLogo = function() {
console.log("'Add logo' button clicked");
var uploadForm = document.createElement('form');
var fileInput = uploadForm.appendChild(document.createElement('input'));
fileInput.type = 'file';
fileInput.name = 'images';
fileInput.multiple = true;
fileInput.click(function() {
console.log("Click callback called");
});
};
When I press the Add logo button, the file selection dialog does open, but the Click callback called message does not appear in the console. This means that I cannot detect, when the user has selected a file (or closed the dialog box with "Cancel").
How can I implement a reaction to the user selecting a file (or cancelling the dialog)?
When the user selects a file in an input with type="file", it is the change event that is fired.
If you replace your click listener by a change listener, it should work :)
fileInput.click(function() {
console.log("Click callback called");
});
must become:
fileInput.change(function() {
console.log("Click callback called");
});

Trigger hashchange event on button clicked

I want to call the same action whenever the button is clicked, or the hash changed event occurred. Even if the hash changed event means just loading the page for the first time and redirecting to something like #something.
What I had so far, is basically duplicated code. The same code for a hashchange event, and for button clicked. I am looking for a solution not to have the code duplicated, but to call the hashchange event from a button clicked event. Here is my code so far.
main.js
$(window).bind('hashchange', function() {
// get User from the URL
var user = window.location.hash.substr(1);
// update the value in a text input with new ASIN
document.getElementById('asin_input').value = asin;
$.getJSON("/api/user/"+user, function (data) {
// ...
});
}).trigger('hashchange');
/*
* Whenever a button "Search!" is clicked, this function gets called.
*/
element.addEventListener('click', function () {
var user = $('#user_input').val();
$.getJSON("/api/user/"+user, function (data) {
// ...
});
});
Now the entire thing inside getJSON, and including the getJSON is duplicated, so I would want just the onClick calling/triggering the hashchange, which triggers getJSON. How to do this?

Close parent window on iframe button click

I have an iframe without ID (generated by third party). The iframe is embedded on a landing page. When the submit button on the iframe gets clicked, I would like the window or landing page to be closed because when the submit button is clicked, it will open a new tab.
function() {
var iframe = document.getElementByTagName('iframe');
var sbutton = document.getElementById("form_002b_ao_submit_href");
iframe.sbutton.onclick = function() {
window.unload();
}
};
but it does not get triggered.
$('iframe').contents().find('body button').click(function (event) {
event.preventDefault();
$('iframe').remove();
});
If you are wanting to close the main window after the submit button is clicked then you can do something like the following.
Live Preview
Link to the test page that is loaded in the iframe
HTML
<iframe src="http://s.codepen.io/larryjoelane/debug/dMoqPL"></iframe>
JavaScript
//select the iframe element without an id
var submitButton = $("iframe").contents().find("#submit_button");
submitButton.on("click", function(event) {
//if you need to prevent default actions(form submit for example)
event.preventDefault();
//close the window
window.close();
//debugging only
//alert("iframe submit button click event fired");
});

Window closing even on clicking 'cancel' button in confirmation box

In my website i conduct an exam in new window & i want that if a user closes this window, he will be redirected to other page if he presses 'ok' on confirmation. But he should stay there if presses 'cancel'. The javascript i'm using is below.
/**
* This javascript file checks for the brower/browser tab action.
* It is based on the file menstioned by Daniel Melo.
* Refer: http://stackoverflow.com/questions/1921941/close-kill-the-session-when-the-browser-or-tab-is-closed
*/
var validNavigation = false;
function endSession() {
$choice = confirm("You will exit your CSA test. Are you sure you want to close the window?");
if ($choice)
window.open('Result.aspx', '_blank', 'toolbar=0, scrollbars=1');
}
function wireUpEvents() {
window.onbeforeunload = function () {
if (!validNavigation) {
endSession();
}
}
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function (e) {
if (e.keyCode == 116) {
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
});
}
$(document).ready(function () {
wireUpEvents();
});
Here on clicking 'ok' button the 'Result.aspx' window opens successfully, but the problem here is that if user clicks 'cancel' in the confirmation box then also the window is getting closed.
Please tell me where am i going wrong or any alternative to this.
Any kind of any help will be appreciated.
Thanks in advance!!
You can't actually stop the user from leaving your page. The final dialog (controlled by the browser), that asks if they want to stay on this page or leave, is up to them.
Your use of confirm() simply provides a dialog for the user, which you can get the choice from, but has no effect on the page being left. If you return a value from window.onbeforeunload, it prompts the user with that final dialog I mentioned, but you cannot capture their choice, nor can you control it.
There's nothing you can do to actually stop a user from leaving your page.

Categories