JS functions not working while loading html using Ajax
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 6 of 6

Thread: JS functions not working while loading html using Ajax

  1. #1
    Join Date
    Feb 2009
    Posts
    3

    Lightbulb JS functions not working while loading html using Ajax

    friends,
    I am trying to load a html into some div using ajax tech. the UI I am getting. but not the js functions. I am embedding the js file w.r.t external html file.
    for eg:
    from Main.html page I want to load local.html file.
    In local.html file I have specified the related js file local.js.
    But once I load the local.html into some div of the Main.html, the js functions in local.js is not working. I think this happens due to src path problem. but the onLoad function in local.html is also not working.

    any idea why it is so? and any solution for the same???

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: JS functions not working while loading html using Ajax

    You cannot use AJAX to import other JavaScripts, because JavaScript cannot be written dynamically. Functions and variables can be created dynamically, but that is by code already in existence within the page.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Feb 2009
    Posts
    3

    Re: JS functions not working while loading html using Ajax

    Thanks for the reply. In fact I don't want to import javascript files directly. The html file that I am loading has js file info to embed in it. but thing is that, when I load an html file it onload event and any function invocation is not working. There is were I am stuck in.

    for eg:-

    <head><script type="text/javascript" src="JsFile.js"></script></head>
    <body onload="loadFunctions()"><button onclick="buttonClicked()">click me</button><body>

    This is the html file I am trying to load using ajax. Now loadFunctions() & buttonClicked() residing in JsFile.js are not executed while the event happens.

    Please let me know where things go wrong.

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: JS functions not working while loading html using Ajax

    That is exactly what I am saying. The functions loadFunctions() and buttonClicked() will only work if they are already created when the main page is rendered.

    As I already stated...JsFile.js will not be loaded as additional JavaScript because it cannot be created at runtime.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Feb 2009
    Posts
    3

    Lightbulb Re: JS functions not working while loading html using Ajax

    Ok friend, I understood. I changed the way to parse the html string and trying to load the scripts. everything is working fine. But any onload function in body tag not executed.
    I need to execute it once the html view content is loaded in the DOMElement (div).
    I tried with adding event listener. Just have look at the code.

    Code:
        if (document.addEventListener)
        {
    	element.addEventListener("DOMContentLoaded", function(){alert('this is callback function')}, false);
        } else if (document.compatMode && document.all && !window.opera)
        {
            // For IE
            document.write('<scr' + 'ipt type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/scr' + 'ipt>')
            var contentloadtag = document.getElementById("contentloadtag")
            contentloadtag.onreadystatechange = function()
            {
                if (this.readyState == "complete")
                {
                    callback.apply(element, arguments);
                }
            }
        } else if(/Safari/i.test(navigator.userAgent))
        {
            // For Safari
            var _timer = setInterval(function()
    	{
                if(/loaded|complete/.test(document.readyState))
                {
                    clearInterval(_timer);
    		callback.apply(element, arguments);
                }
    	}, 10);
        }
    element - DOMElement, where I need to place the html view.
    callback - is the function to be executed once the event happened.

    Consider that b4 these lines of code, I ve done,
    element.innerHTML = htmlText;
    created as many script elements in the htmlText and added into the head element.

    So what could be the problem here....
    Last edited by PeejAvery; March 11th, 2009 at 06:27 AM. Reason: Added code tags.

  6. #6
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: JS functions not working while loading html using Ajax

    I'm confused...why aren't you just using the following? It works for every browser.

    Code:
    xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState==4) {
        // do your stuff here
        // not only do you have the response, but that means the page has loaded
      }
    }
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center