We Keep Coding

Bind click event to Javascript function

I have Jquery latest connected and working with other parts of application.
0. End goal: for a modal window to appear on the screen.
1. I click on a button.
2. A function runs that append a modal to body
3. With modals, in order for this modal to actually show on the screen, I
need to
press a button that has data-target="#EnterModalNameHere"
4. I make a hidden button in index.html that has the needed data-target
property.
5. I would like to be able to click this hidden button once the function in step
2 finishes appending the modal.
How can I tell Javascript "once finished appending modal, click on hidden button"?

You can create an Event.
You can create a custom Event which would be dispatch (trigger) immediately after
the document is ready.
So, in your situation, since you aren't using a media query, you can use :
SetTimeout like setTimeout(() => { do something }, timeout);. So, the timeout could be 1000 - which means 1sec and so on,
A custom event which you can trigger when the modal successfully appended to the body.
An Event Listeners Like load window.onload = function() { enter code here }

How to get xpages modal to fire a close event

I have an xpage (viewed via web browser) which has many <xe:dialog...> controls on it, resulting in bootstrap modal dialogue boxes.
I want to run some client-side script when any dialogue is closed.
So I tried ..
$('.modal').on('hide.bs.modal', function() { ...}
However this didn't work, I suspect because when the xpage is loaded there aren't actually any elements with class 'modal', until one is opened. Then a partial refresh injects the relevant HTML.
So I tried running that line above in the event when the modal opens (in the xpages onShow event), but that didn't fire either. I guess the event might be 'when the modal opens but before it's displayed' meaning the elements aren't ont he screen then either.
So I also tried (hack, hack) a setTimeout of 2 seconds to allow the modal to show first, but still no luck.
So .. question is ..
Using xpages bootstrap modals, via the standard xe:dialog control, how can I attach a client-side javascript event whcih will run when the modal is closed / hidden ?

You can use Event Delegation to bind the listener to a parent element of the (non-existing) modals and trigger a function when a click happens on elements matching the .modal selector in that parent element:
$(document).on("hide.bs.modal", ".modal", function () {...});

I do something similar to this, where a button selection on one modal, closes said modal, and then depending on the button that was clicked, opens the next modal. Instead of doing that, could you not run your script in the same way?
var
currentModal = $(this);
//click next
currentModal.find('.btn-close').click(function(){
currentModal.modal('hide');
OTHER STUFF?
EDIT - My full code:
<script type="text/javascript">
$("div[id^='myModal1']").each(function(){
var
currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal3']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal2']").first().modal('show');
});
});
$(window).on('load',function(){
$('#myModal1').modal('show');
});
</script>

How to trigger 'beforeunload' event from within an IFRAME

I have an application (name it B) which is being embbeded in an Iframe by another main application (Name it A or parent).
So: App A-- // domain of A: https://mydomain/mainApp
|___ App B in Iframe // domain in B: https://mydomain/appB
Problem is: Then main/parent app has a navigation menu. One item, when clicked, creates an Iframe with SRC ATTRIBUTE loading App B inside.
When the user clicks into another option of the menu in app A, the Iframe is destroyed and another content View in React appears, replacing the Iframe.
When doing this, all data typed in forms by the user in B are gone, as I can not trigger a save event I have in B.
I have added following event handler in the iframe app:
window.addEventListener("beforeunload", function (e) {
// Trigger here the save settigns event inside B
});
But former code is never triggering when user navigates through Main App menu. As I can see, navigating menu in App A, changes URL in the browser(but seems a SPA React.js routing or similar, no real redirection).
Question is: Can Iframe detect when is going to be unloaded/destroyed to trigger first the Saving Settings in Ajax ? P.S: I don't have access to App A code.
Thanks in advance

From MDN:
The WindowEventHandlers.onbeforeunload event handler property contains the code executed when the beforeunload is sent. This event fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
The unload event is fired when the document or a child resource is
being unloaded. It is fired after:
beforeunload (cancellable event)
pagehide
Example:
<body>
<input type="button" id="removeIframeBtn" value="remove iframe"/>
<iframe id="iframe" src="http://localhost:8080/iframe.html"></iframe>
</body>
<script>
const removeIframeBtn = document.getElementById("removeIframeBtn");
const iframe = document.getElementById("iframe");
iframe.contentWindow.onbeforeunload = function () {
debugger;
};
window.onbeforeunload = function () {
debugger;
};
removeIframeBtn.onclick = function () {
iframe.remove();
};
</script>
Let assume that page with current code is opened in the browser tab.
If you try to close this tab, iframe.contentWindow.onbeforeunload will be called.
If you try to click on remove iframe btn, iframe will be removed from document but iframe.contentWindow.onbeforeunload will not call. There is no unload event.
React renders components with js, so it is totally like second case with clicking on remove iframe btn.
So the answer on your question is: it is not possible to detect unloading of iframe with onbeforeunload event in single page application on route changing.
Solution for you can be to save settings on every its change.

unload event works so you can do
IframeWindow.addEventListener('unload', ()=>{
debugger
})

WinJS Stop javascript in memory

I'm learning using the Win.JS navigation and I am able to navigate between pages now. But I'm having errors when I leave a page and trigger a event from the first page.
So the problem is. I have some javascript running on Page1.html | .js
If I press the Arrow up button on my keyboard for example a javascript runs (onclick). This works okay, but then I click on a button and navigate to Page2.html also with a ( .js) and if I then also click on the Arrow up button I get an error. It tries to start the function that is called within the onclick, and that isn't there anymore in my Page2.
So the question is, how can I unload these javascript triggers from Page1 if i'm notttt on that page anymore?

In your WinJS Page definition you can define unload method that is always invoked when the user leaves the page. Unregister all event handlers there.
WinJS.UI.Pages.define("/page.html", {
ready: function (element, options) {
// add onclick handler
},
unload: function() {
// remove here all event handlers
}
});

Is there a callback function for internal page links

On - window.location.hash - Change?
The above question talks about hash change while this question talks about callback whenever internal link is clicked
I have many links in a page that points to another location in the same page using # links. Whenever, I click one such link, the page scrolls to that location. But I need to adjust the scroll manually after the automatic scroll happens. So would like to know if there is any callback function for such events?
Also the event should fire if the # tag was present in the initial page load (not only when it is clicked with a link) and when the same link is clicked again (hashchange event won't fire in this case)

You can register one by calling this function on the element:
addEventListener('click', function(){/*update your stuff here/*});
in jQuery, it's even easier
$('a').on('click', function(){/*update your stuff here/*}); will update after every link click.

There is no specifica callback that I know of but you could bind a function to the window.onscroll (https://developer.mozilla.org/en-US/docs/DOM/window.onscroll) event. That will detect when the window has been scrolled by the links being clicked and will let you make your adjustments. Then only problem is that it will also fire off when a user scrolls the page normally.
Other than that you would add a class to all your # links that will allow you to detect when one has been clicked. In jQuery:
$("a.HASH-LINK-CLASS").on("click", function (event) { ... });