I want to fire script on page only when user triggers proper event. In my case user by button click adds new record to database. I'am able to obtain dynamically created control reference with new record in code behind , I just don't know how from code behind pass it this single time to JavaScript that will fire after page loads.My script will look like this :
function(id) {
document.getElementByID(id).focus()
}
I'am using .net framework 1.1 Do you have idea how I can accomplish this task ?
You need to consider
What is the EventTarget? If you want to wait until the whole page has finished loading, then window is the EventTarget you're looking for because it's the top-most DOM related Object you can reference.
Which event do you want to listen for? Again, if you want to detect page loading, you're listening for load, which is the name of the event.
So, using EventTarget.addEventListener
window.addEventListener('load', function () {
// code to execute when this handler is invoked
});
Edit: I'm not sure your environment will have window, if it doesn't then you'll probably want the highest Node you can access in your DOM structure.
Related
I am working on designing a react application that will be used to view a number of different types of files, from a known source. The user will search, be presented with a list of results, and then upon clicking one of the results, I will fetch the file, and want to display it on the screen as well. These files are all HTML/XML.
On top of this, I want to attach event handlers to certain tags within the file itself. (ie. attaching an onClick listener to all <p> tags, for example)
The obvious answer would be to use an iframe, however then the event handlers become a problem. Using dangerouslySetInnerHTML also works, however if there's a better solution I would love to know about it. Any Ideas?
You can fire events from an iframe and handle it by its parent by using this code
//iframe
function buttonClick() {
parent.$(parent.document).trigger('eventhandler');
}
<button onclick="buttonClick()">Button</button>
//parent
$(document).on('eventhandler', function () {
alert('event fired');
});
Just add the event handler in parent file and add your logic in it and then add event trigger in child iframe file or you can also follow this link.
I am injecting a Javascript-File via a Chrome-Extension on a webpage that uses SAPUI5.
I want to get the model in the binding context of some UI5-Input elements and in order to do so, I need to get to the inputs via document.getElementsByTagName. (or is there another way?)
This only works if they are already rendered. Unfortunately the ready or load events fire too early, when not everything is rendered yet.
Is there a way for me to know when the inputs have rendered?
Edit: I do not have access to the source code of the page, everything I do has to be in the injected script.
To make sure everything is renedered before firing your events, sapui5 has the function onAfterRendering.
All logic written in that function will only be executed after the control is rendered.
When a rerender of the control is rendered, the onAfterRendering is triggered again.
In the end I did it like this:
I already had event listeners attached to click and key events. Every time the handler is called, I check if document.getElementsByTagName('input') returns the inputs I need.
If yes e. g. the rendering of the inputs is complete, I set a boolean that the page is loaded completely and execute my code.
[edit: adding more details about the scenario]
I am creating a tool which an app can include using a script tag; this tool adds an overlay to their app; that overlay includes a canvas and controls that I render onto the canvas. I would like the tool to be able to capture all input events and either handle them (if occurring over one of the rendered controls) and stop propagation to the app, or pass them on to the app (if not occurring over one of the rendered controls).
I am able to preempt all of the host app's input events except when the app registers an event on window using capturing, as follows:
window.addEventListener("mousedown", (e) => console.log("hi"), true);
Is there a way for my tool to inject a function that gets called before that?
No. If an event listener has been attached to the window in the capturing phase, there is no way to get any other listeners in ahead of it. This is because the window will be the first node to be notified of any events and the listeners are triggered in the order they were added. (I'm guessing this was done deliberately y the designer of the tool you're using. Not very end-user-friendly, IMO.)
The only way around it would be if you had a reference to the bound function, in which case you could use removeEventListener, add your own listener, then re-bind the original one. This seems unlikely, however, in your code.
You need one of your script tags to appear first in the page, ideally in the <head>. Then you get to attach your listener first.
I know I can inject the script when the user clicks an element by creating a script element and injecting it on the page via document.appendChild. However, the script is listening for onload and onDOMContentReady (or their own home grown domReady event, not sure).
If I inject the script only when the user clicks an element, the callbacks for onload/onDOMContentReady will never fire because those events have already passed.
Any ideas? This 3rd party script pulls in all these other requests and it's not optimal for page loading.
EDIT: I read the question again...and if you are using something like jQuery, it will fire your handler function in any other document ready calls even if document ready has already been fired. It will just execute the function right away. If you are looking for a pure javascript way to do it, you need to take extra consideration to check to see if dom ready has already been fired, and fire your function yourself, otherwise attach it to the dom ready callback.
I don't see a problem with just doing something like this (with jquery for brevity):
// on document ready
$( function() {
// attach the click handler
$('#loadScript').click( function( e ) {
// on click, get the script
$.getScript('path/to/your/script.js', function() {
// your script is loaded, so what you need from here
// to handle this click event.
});
});
});
I think you are over thinking it a bit. You only need to worry about making it possible to load the script once the dom elements are ready. You could look at using something like require.js as well.
I have a page that lists a bunch of files. This page can be accessed directly via a URL or it can be loaded in a modal dialog via ajax from a different page.
If the files page is loaded via ajax, I would like to allow the user to click the name of the file and trigger an action in the page which loaded the files page. For example, there is an article edit page. This page contains an "attach a file" button. When the user clicks the button, the files page is loaded in a modal dialog and when a filename is clicked, the id of the file is inserted into the article form and the dialog is closed. However there is also an event edit page with a similar button, but I would like to handle the filename-click event slightly differently on this page.
I'd like to handle these click events slightly differently depending on the calling page. At the moment I'm defining a handler function with global scope in the page containing the form to which files are being attached, then testing for that function in the the files-page when the filename is clicked and calling if it exists. It works but it feels a little hacky. Is there some kind of best practice for this sort of thing that I'm not aware of?
I'm using jQuery if this makes things easier in any way..
Instead of relying on a global handler function as the interface between pages, you could rely on custom events instead:
"calling page":
$(document).bind("fileClicked", function(event, fileName) {
alert(fileName);
});
"page loaded via ajax":
$(".file").click(function() {
$(document).trigger("fileClicked", [$(this).text()]);
});
You should look at jQuery Live
Attach a handler to the event for all elements which match the current selector, now and in the future.
When a Ajax page is loaded it's not processed by the DOM in the same way the main page was loaded, therefore using live will attach the event on all current event emitters as well as the future ones such as dynamic Ajax content
Within your Ajax model
<div>
...
Add to main page
...
</div>
and within your static page (the one originally loaded)
$("#ajax_click_event").live('click',function(){
//Work wit the value of the form within the ajax div.
})