JavaScript on Demand

V

vunet.us

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.
 
J

Jeff North

| 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.
Click to expand...

<body onload="getJSOnDemand();" >
 
V

vunet.us

| 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.
Click to expand...

<body onload="getJSOnDemand();" >
Click to expand...

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
 
D

Darko

I am sorry, I will supply more details:
- JS file initializes html object "textarea", I call it "TXT", without
problems
Click to expand...
what do you mean by "initializes" the html object?
- I want to remove TXT and add it dynamically later
Click to expand...
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
Click to expand...
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
Click to expand...
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.
 
V

vunet.us

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

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

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.
Click to expand...

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
});
 
L

-Lost

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
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
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.
Click to expand...

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
});
Click to expand...

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.
 
J

Jeff North

| > > > <body onload="getJSOnDemand();" >
| > > > ---------------------------------------------------------------
| > > > (e-mail address removed) : 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.
Click to expand...

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
| });
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JS on Demand or Help to Initialize Invisible Object 0
Check forms With JavaScript 1
How to have two html audio players on one page? 0
JavaScript code not working!! 6
In javascript, XML File Create, File Save 2
Canvas drawing HTML Javascript on elementor 1
On-air script 0
Questions about on-demand dynamic javascript loading 6

Members online

Total: 27 (members: 2, guests: 25)
Robots: 384

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top