473,372 Members | 856 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

JavaScript on Demand

I have an HTML page with included JS file like:
<script language="javascript" type="text/javascript" src="file.js"></
script>

The file.js has a set of functions and global initializer for some
html object. Hoever, I want to hide my html object with display:block
CSS property. As a result, object in JS file fails to be initialized
for a hidden object. I decided to call JS file when needed (i.e. when
HTML object becomes visible on page) like this:

function getJSOnDemand(){
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.id = 'tinyMCEScriptInitializer';
script.type = 'text/javascript';
script.src = "file.js";
head.appendChild(script);
}

Howeverm it did not work and still fails to initialize HTML object, as
if it does not see it. Could you recommend how to call JS file when it
is needed or how to deal with initialization of the html object which
is hidden on the page?
Thank you.

May 25 '07 #1
6 2317
On 25 May 2007 07:19:22 -0700, in comp.lang.javascript
vu******@gmail.com
<11**********************@p47g2000hsd.googlegroups .comwrote:
>| I have an HTML page with included JS file like:
| <script language="javascript" type="text/javascript" src="file.js"></
| script>
|
| The file.js has a set of functions and global initializer for some
| html object. Hoever, I want to hide my html object with display:block
| CSS property. As a result, object in JS file fails to be initialized
| for a hidden object. I decided to call JS file when needed (i.e. when
| HTML object becomes visible on page) like this:
|
| function getJSOnDemand(){
| var head = document.getElementsByTagName("head")[0];
| var script = document.createElement('script');
| script.id = 'tinyMCEScriptInitializer';
| script.type = 'text/javascript';
| script.src = "file.js";
| head.appendChild(script);
| }
|
| Howeverm it did not work and still fails to initialize HTML object, as
| if it does not see it. Could you recommend how to call JS file when it
| is needed or how to deal with initialization of the html object which
| is hidden on the page?
| Thank you.
<body onload="getJSOnDemand();" >
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
May 25 '07 #2
On May 25, 11:30 am, Jeff North <jnort...@yahoo.com.auwrote:
On 25 May 2007 07:19:22 -0700, in comp.lang.javascript
vunet...@gmail.com

<1180102762.670199.195...@p47g2000hsd.googlegroups .comwrote:
| I have an HTML page with included JS file like:
| <script language="javascript" type="text/javascript" src="file.js"></
| script>
|
| The file.js has a set of functions and global initializer for some
| html object. Hoever, I want to hide my html object with display:block
| CSS property. As a result, object in JS file fails to be initialized
| for a hidden object. I decided to call JS file when needed (i.e. when
| HTML object becomes visible on page) like this:
|
| function getJSOnDemand(){
| var head = document.getElementsByTagName("head")[0];
| var script = document.createElement('script');
| script.id = 'tinyMCEScriptInitializer';
| script.type = 'text/javascript';
| script.src = "file.js";
| head.appendChild(script);
| }
|
| Howeverm it did not work and still fails to initialize HTML object, as
| if it does not see it. Could you recommend how to call JS file when it
| is needed or how to deal with initialization of the html object which
| is hidden on the page?
| Thank you.

<body onload="getJSOnDemand();" >
---------------------------------------------------------------
jnort...@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
I am sorry, I will supply more details:
- JS file initializes html object "textarea", I call it "TXT", without
problems
- I want to remove TXT and add it dynamically later
- So, JS cannot initialize anything in case above
- When TXT is added, I want to call JS at that moment only, using so-
called js on demand
- The problem is it does not initialize the TXT even though it is
successfully called

May 25 '07 #3
<body onload="getJSOnDemand();" >
---------------------------------------------------------------
jnort...@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

I am sorry, I will supply more details:
- JS file initializes html object "textarea", I call it "TXT", without
problems
what do you mean by "initializes" the html object?
- I want to remove TXT and add it dynamically later
why do you add it, then remove it, then add it later? why not display
it statically from the start, but with css-style "hidden" or
"display:none", and then later just show it?
- So, JS cannot initialize anything in case above
- When TXT is added, I want to call JS at that moment only, using so-
called js on demand
what does it mean "when ... added, I want to call AT THAT MOMENT, ON
DEMAND"? It's rather automatically, when it's added, or on demand...
or do I not understand it well?
- The problem is it does not initialize the TXT even though it is
successfully called
what is called? and how do you fail "initializing" the TXT, if you
said you didn't have problems with this, in the first sentence?

Pretty confusing.
I think it is still Jeff North's advice you should listen to.

May 25 '07 #4
On May 25, 1:43 pm, Darko <darko.maksimo...@gmail.comwrote:
<body onload="getJSOnDemand();" >
---------------------------------------------------------------
jnort...@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
I am sorry, I will supply more details:
- JS file initializes html object "textarea", I call it "TXT", without
problems

what do you mean by "initializes" the html object?- I want to remove TXT and add it dynamically later

why do you add it, then remove it, then add it later? why not display
it statically from the start, but with css-style "hidden" or
"display:none", and then later just show it?- So, JS cannot initialize anything in case above
- When TXT is added, I want to call JS at that moment only, using so-
called js on demand

what does it mean "when ... added, I want to call AT THAT MOMENT, ON
DEMAND"? It's rather automatically, when it's added, or on demand...
or do I not understand it well?- The problem is it does not initialize the TXT even though it is
successfully called

what is called? and how do you fail "initializing" the TXT, if you
said you didn't have problems with this, in the first sentence?

Pretty confusing.
I think it is still Jeff North's advice you should listen to.
I am sorry... I do sound confusing.

History: I built a test case to initialize TinyMCE (html editor) which
was successfully implemented. In this test case, I include a JS file
which looks for a textarea on my page and some global method of
tinyMCE initializes some functionality, so I see the editor appended
to my textarea field.

My goal: My web app uses xmlhttp request to create a content for some
web page. The content is hidden by default (display:none). But the
user can select what content to display (display:block).
The textarea which I apply tinyMCE to is within that hidden content.
Basically, I am lokking for the way to run a TinyMCE's JS file when
textarea's content is shown on the page.

That's all

I tried:
1) run the JS file on page load, but the required texarea does not
exist yet
2) call JS on demand when textarea is visible, but it does not work
and the TinyMCE's code fails to initialize with:

tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Descriptions",
save_callback : "customSave",
content_css : "example_advanced.css",
extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
//invalid_elements : "a",
theme_advanced_styles : "Header 1=header1;Header 2=header2;Header
3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
//execcommand_callback : "myCustomExecCommandHandler",
debug : false
});

May 25 '07 #5
vu******@gmail.com wrote:
On May 25, 1:43 pm, Darko <darko.maksimo...@gmail.comwrote:
>>><body onload="getJSOnDemand();" >
---------------------------------------------------------------
jnort...@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
I am sorry, I will supply more details:
- JS file initializes html object "textarea", I call it "TXT", without
problems
what do you mean by "initializes" the html object?- I want to remove TXT and add it dynamically later

why do you add it, then remove it, then add it later? why not display
it statically from the start, but with css-style "hidden" or
"display:none", and then later just show it?- So, JS cannot initialize anything in case above
>>- When TXT is added, I want to call JS at that moment only, using so-
called js on demand
what does it mean "when ... added, I want to call AT THAT MOMENT, ON
DEMAND"? It's rather automatically, when it's added, or on demand...
or do I not understand it well?- The problem is it does not initialize the TXT even though it is
>>successfully called
what is called? and how do you fail "initializing" the TXT, if you
said you didn't have problems with this, in the first sentence?

Pretty confusing.
I think it is still Jeff North's advice you should listen to.

I am sorry... I do sound confusing.

History: I built a test case to initialize TinyMCE (html editor) which
was successfully implemented. In this test case, I include a JS file
which looks for a textarea on my page and some global method of
tinyMCE initializes some functionality, so I see the editor appended
to my textarea field.

My goal: My web app uses xmlhttp request to create a content for some
web page. The content is hidden by default (display:none). But the
user can select what content to display (display:block).
The textarea which I apply tinyMCE to is within that hidden content.
Basically, I am lokking for the way to run a TinyMCE's JS file when
textarea's content is shown on the page.

That's all

I tried:
1) run the JS file on page load, but the required texarea does not
exist yet
2) call JS on demand when textarea is visible, but it does not work
and the TinyMCE's code fails to initialize with:

tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Descriptions",
save_callback : "customSave",
content_css : "example_advanced.css",
extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
//invalid_elements : "a",
theme_advanced_styles : "Header 1=header1;Header 2=header2;Header
3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
//execcommand_callback : "myCustomExecCommandHandler",
debug : false
});
Try reducing this to the most bare minimum possible, maybe:

tinyMCE.init({mode: 'textareas'});

Every example I have ever seen issues the init() method without any
mention of DOM-readiness.

The above example does say "when the page loads," so I am guessing it is
DOM-loaded-friendly. I have no clue what TinyMCE does or doesn't do, so
you might try wrapping it in a function, and call that function if/when
your textarea appears.

Last but not least, whittle this down into a tiny example, post it
online and you might get more help.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
May 25 '07 #6
On 25 May 2007 12:10:56 -0700, in comp.lang.javascript
vu******@gmail.com
<11*********************@p77g2000hsh.googlegroups. comwrote:
>| On May 25, 1:43 pm, Darko <darko.maksimo...@gmail.comwrote:
| <body onload="getJSOnDemand();" >
| ---------------------------------------------------------------
| jnort...@yourpantsyahoo.com.au : Remove your pants to reply
| ---------------------------------------------------------------
| >
| I am sorry, I will supply more details:
| - JS file initializes html object "textarea", I call it "TXT", without
| problems
| >
| what do you mean by "initializes" the html object?- I want to remove TXT and add it dynamically later
| >
| why do you add it, then remove it, then add it later? why not display
| it statically from the start, but with css-style "hidden" or
| "display:none", and then later just show it?- So, JS cannot initialize anything in case above
| - When TXT is added, I want to call JS at that moment only, using so-
| called js on demand
| >
| what does it mean "when ... added, I want to call AT THAT MOMENT, ON
| DEMAND"? It's rather automatically, when it's added, or on demand...
| or do I not understand it well?- The problem is it does not initialize the TXT even though it is
| successfully called
| >
| what is called? and how do you fail "initializing" the TXT, if you
| said you didn't have problems with this, in the first sentence?
| >
| Pretty confusing.
| I think it is still Jeff North's advice you should listen to.
|
| I am sorry... I do sound confusing.
|
| History: I built a test case to initialize TinyMCE (html editor) which
| was successfully implemented. In this test case, I include a JS file
| which looks for a textarea on my page and some global method of
| tinyMCE initializes some functionality, so I see the editor appended
| to my textarea field.
|
| My goal: My web app uses xmlhttp request to create a content for some
| web page. The content is hidden by default (display:none). But the
| user can select what content to display (display:block).
| The textarea which I apply tinyMCE to is within that hidden content.
| Basically, I am lokking for the way to run a TinyMCE's JS file when
| textarea's content is shown on the page.
Call the tinyMCE.init from within the function that displays the block
and after any further processing that needs to be done i.e.
document.getElementById("tinyMCE").style.display=" block";
do stuff
do stuff
tinyMCE = new etc etc
tinyMCE.init(....
>| That's all
|
| I tried:
| 1) run the JS file on page load, but the required texarea does not
| exist yet
| 2) call JS on demand when textarea is visible, but it does not work
| and the TinyMCE's code fails to initialize with:
|
| tinyMCE.init({
| theme : "advanced",
| mode : "exact",
| elements : "Descriptions",
| save_callback : "customSave",
| content_css : "example_advanced.css",
| extended_valid_elements : "a[href|target|name]",
| plugins : "table",
| theme_advanced_buttons3_add_before : "tablecontrols,separator",
| //invalid_elements : "a",
| theme_advanced_styles : "Header 1=header1;Header 2=header2;Header
| 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
| //execcommand_callback : "myCustomExecCommandHandler",
| debug : false
| });
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
May 25 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

53
by: Cardman | last post by:
Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...
6
by: TJ | last post by:
Hello All, I posted a question a few days ago entitled "Select element with no selected options". Over the course of the discussion, RobG wrote: > This is just an example, it is not really...
6
by: Marios Koumides | last post by:
I have a page written in ASP and I added some Javascript code to ensure the input boxes are filled with correct data. That check is performed every time the user moves out from a textbox. Now right...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
41
by: Rene Nyffenegger | last post by:
Hello everyone. I am not fluent in JavaScript, so I might overlook the obvious. But in all other programming languages that I know and that have associative arrays, or hashes, the elements in...
6
by: Venkatesh | last post by:
Hello All, I have couple of doubts regarding the concept of on-demand javascript loading using javascript code. I could see on the net different techniques for achieving this - techniques like:...
1
by: menyki | last post by:
am writing a program to determine the best price that will attract maximum demand. first i had to generate random number to enable me determine the price and quantity demanded at the particular...
6
by: vinod | last post by:
Hi, The application we have developed uses JavaScript extensively. One of the users of the application is facing a problem. Instead of being hidden, the javascript code in the HTML is displayed or...
22
by: Dan Rumney | last post by:
Hi all, I've been writing Javascript for quite a while now and have, of late, been writing quite a lot of AJAX and AJAX-related code. In the main, my dynamically generated pages are created...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.