how can refrence a javascript file to UserControl in asp.net - javascript

how can use from a js file in usercontrol in asp.net
in webform put this line in head but in usercontol we have not head tag
<script src="../Scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>

Use ClientScriptManager.RegisterStartUpScript to set your scripts at the end of the page at server side. Or use ready event of the JQuery ensure the dom is loaded, and then bind your client side events to your link.
RegisterStartupScript, registers your scripts at the end of the page, so your script loaded after all the elements of the page loaded.
One other option is to use ready event of the JQuery, it helps you to wait all elements of DOM loaded. You can implement your ready function at inline or server side.
The key point here is to wait for the DOM elements load.

Related

Best way to call a JavaScript script after the HTML body loads with no JQuery?

I have a somewhat large .js file that is currently called in the header of a HTML page, but it fails to execute because the elements have not loaded when the script is called. What is the best way to implement this? I've tried adding
document.addEventListener("DOMContentLoaded", load, false);
to the script but that doesn't seem to work. Calling the script in the footer or inline is not an option, nor is JQuery.
Meet onload.
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
There are also Gecko-Specific DOM Events like DOMContentLoaded and
DOMFrameContentLoaded (which can be handled using
EventTarget.addEventListener()) which are fired after the DOM for the
page has been constructed, but do not wait for other resources to
finish loading.

Javascript: How to add an event listener to the body of a CMS, with the JS code in the header

I wrote a script that adds a listener to a for an onClick event. When clicked, it searches the document for any element with a specific class "someclass", and then performs some operations on it etc..
The problem is, after finding all the elements with class="someclass", the array of all the elements with class="someclass" is null. I think this is because the JS code that adds the listener is in the header, and when it runs, the body (that comes from a different php file from the CMS) that contains the actual has no yet loaded.
What do I do about this?
A side note, I am trying to do this using pure JS. I do not want to have anything other than one single external .js file. So that means no jquery or other API's, and no editing the html.
What are my options here? Thank you for reading.
Ideally you should move your JS right before the closing body tag. If that's not possible, you need to either use the DOMContentLoaded event of the document object or the load event of the window object.
Your problem is that the DOM of your page isn't ready so your JS code doesn't have anything to access yet. More info here:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload
DOMContentLoaded (works in modern Browsers and IE9+):
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
Load (works in all Browsers):
window.onload = function() {
console.log('The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.');
};

jQuery dom ready and run javascript when library jquery loaded

I do not want to wait until DOM ready with $(document).ready(function(). So, how to execute my inline and not inline javascript (jQuery) code when jQuery library 100% downloaded and executed? Seems it's not safe to write code without some wrapper like $(document).ready(function(), because browser can try to execute code while jQuery library not ready.
Also I have the question about the situation with $(document).ready(function() when I have some external javascripts like addthis on the page. Am I right that DOM is NOT ready until addthis javascript not loaded?
The problem is that I am already seen some links on the page and I need to add to them some parameters with jQuery, before user will click on the link, but user click before DOM ready and parameter losses.
Thanks.

Popup on complete load of HTML page

Here it is the situation....
I have designed a demo which is made up of HTML in which there are several images and we have made it such a way that it works offline also for ipad using manifest file.
so so once the project/demo is loaded one can use it off line and book mark it so that he can use it any time he wants.
here is the link for reference:
http://iwdfvm2730.wdf.sap.corp:1079/speeddemo/dpr921/
I need help from you guys to show a popup/loader icon when the data or every thing is loaded completely.
thanks,
Kunal
What you gave us looks like an internal corporate address, but unless you dynamically load resources, I'd suggest that you set up an onload handler: <body onload="pageLoaded()">.
You can have a look at the jQuery .load() function. Excerpt from the documentation page on the .ready() function:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
So, in essence, the .ready() function executes after loading the DOM, while the .load() function executes after all page assets (including script, CSS and image references) have loaded.

Can I assume that DOM is not ready yet on dynamically loaded JS script?

I have written an external script that needs to run after DOM is ready (or after onload if thats impossible).
I use this method to load the script dynamically since I need parameters on the script:
<script type="text/javascript">
document.write(unescape("%3Cscript src='mydomain.com/script.js.php?u="+encodeURIComponent(window.location.host)+"' type='text/javascript'%3E%3C/script%3E"));
</script>
To start the script on time I use cross browser methods to attach the dom ready or onload events.
My question: Can I assume that DOM is ready when my script runs and run my script immediately or that DOM is not ready, and attach to DOM ready event (OR document load)?
If I cannot assume for sure either, my question is how can I tell if DOM is already ready (on the different browsers) when my script runs? In this case the methods to start the script on DOM ready or document load events will not work because the events were already fired.
Notes: 1.I have no control on the web sites the script will be attached to.
2. Can't use Jquery or other library.
You can be almost sure that dom is not ready yet.
This is a good reference to get this working as you want.
I would either:
1) Load dynamically that script and then attach function to onload even to call/do whatever you want with that off-site .js .
2) Load the script only after DOM is ready.
Put the script near the end of the body of the document. Anything above will be available when your script is invoked (because the browser will have to have parsed it to see your script tag; QED).
Note that other resources (like images or frames) can still be loading at that time.

Categories