JavaScript on Demand

Discussion in 'Javascript' started by vunet.us@gmail.com, May 25, 2007.

  1. Guest

    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, 2007
    #1
    1. Advertising

  2. Jeff North Guest

    On 25 May 2007 07:19:22 -0700, in comp.lang.javascript

    <> wrote:

    >| 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();" >
    ---------------------------------------------------------------
    : Remove your pants to reply
    ---------------------------------------------------------------
     
    Jeff North, May 25, 2007
    #2
    1. Advertising

  3. Guest

    On May 25, 11:30 am, Jeff North <> wrote:
    > On 25 May 2007 07:19:22 -0700, in comp.lang.javascript
    >
    >
    >
    >
    > <> wrote:
    > >| 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();" >
    > ---------------------------------------------------------------
    > : 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, 2007
    #3
  4. Darko Guest

    > > <body onload="getJSOnDemand();" >
    > > ---------------------------------------------------------------
    > > : 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.
     
    Darko, May 25, 2007
    #4
  5. Guest

    On May 25, 1:43 pm, Darko <> wrote:
    > > > <body onload="getJSOnDemand();" >
    > > > ---------------------------------------------------------------
    > > > : 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, 2007
    #5
  6. -Lost Guest

    wrote:
    > On May 25, 1:43 pm, Darko <> wrote:
    >>>> <body onload="getJSOnDemand();" >
    >>>> ---------------------------------------------------------------
    >>>> : 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.
     
    -Lost, May 25, 2007
    #6
  7. Jeff North Guest

    On 25 May 2007 12:10:56 -0700, in comp.lang.javascript

    <> wrote:

    >| On May 25, 1:43 pm, Darko <> wrote:
    >| > > > <body onload="getJSOnDemand();" >
    >| > > > ---------------------------------------------------------------
    >| > > > : 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
    >| });

    ---------------------------------------------------------------
    : Remove your pants to reply
    ---------------------------------------------------------------
     
    Jeff North, May 26, 2007
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. robertm
    Replies:
    1
    Views:
    297
    Dino Chiesa [MSFT]
    Aug 12, 2003
  2. Jens Klingelhöfer

    How to send a website to a client without demand?

    Jens Klingelhöfer, Nov 30, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    332
    Steve C. Orr [MVP, MCSD]
    Dec 1, 2003
  3. Plutian

    Application on demand

    Plutian, Aug 30, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    433
    Ben Lovell
    Aug 30, 2004
  4. Venkatesh
    Replies:
    6
    Views:
    212
    Venkatesh
    Jan 13, 2007
  5. Adnan Siddiqi

    using On-Demand Javascript to load function

    Adnan Siddiqi, Jul 26, 2007, in forum: Javascript
    Replies:
    5
    Views:
    134
    David Mark
    Jul 27, 2007
Loading...

Share This Page