Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to do ajax loading using prototype downloaded

    hi i have the javascripot framework in existing project which need me to update the ajax effect.
    i have this downloaded http://www.prototypejs.org/

    i am looking for how to do the ajax loading when the page is waiting the query to run? The page need to show a .gif picture Requesting data until the data are shown.

    Pls help thanks

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    which prototype call are you using?



    and they mostly share options

    http://www.prototypejs.org/api/ajax/options

    you could pick one of the callbacks and go off that event. when it hits the desired readystate you would have it drop your loading img in the element you're updating.

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i just downloaded the ajax prototype as below and keep that code below in the .js file .

    but may i know how do i connect to the javascript funciton below from my php page?

    how do i fire the function fireContentLoadedEvent() from my php page ?
    thanks


    Code:
    function() {
      /* Support for the DOMContentLoaded event is based on work by Dan Webb,
         Matthias Miller, Dean Edwards and John Resig. */
    
      var timer;
    
      function fireContentLoadedEvent() {
        if (document.loaded) return;
        if (timer) window.clearInterval(timer);
        document.fire("dom:loaded");
        document.loaded = true;
      }
    
      if (document.addEventListener) {
        if (Prototype.Browser.WebKit) {
          timer = window.setInterval(function() {
            if (/loaded|complete/.test(document.readyState))
              fireContentLoadedEvent();
          }, 0);
    
          Event.observe(window, "load", fireContentLoadedEvent);
    
        } else {
          document.addEventListener("DOMContentLoaded",
            fireContentLoadedEvent, false);
        }
    
      } else {
        document.write("<script id=__onDOMContentLoaded defer src=//:><\/script>");
        $("__onDOMContentLoaded").onreadystatechange = function() {
          if (this.readyState == "complete") {
            this.onreadystatechange = null;
            fireContentLoadedEvent();
          }
        };
      }
    })();

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    var loaded = false;
    function startLoading(){
    loaded =false;
    window.setTimeout('showLoadingImage()',10);
    }

    function showLoadingImage(){
    var box = document.getElementById("loading_pic");
    if(box && !loaded){
    box.innerHTML ='"../images/indicator.gif" />';
    new Effect.Appear('loading_pic');
    }
    }

    function stopLoading(){
    Element.hide('loading_pic');
    loaded = true;
    }



    then i put my ajax fuction into .js page.

    Ajax.Responders.register({
    onCreate : startLoading,
    onComplete : stopLoading
    });


    but i am not able to display the effect

    "new Effect.Appear('loading_box');"
    "Effect is not defined"

    also
    Element.hide('loading_pic');
    element also not defined..

    may i knwo what this things happen ?

  • #5
    SSJ
    SSJ is offline
    Regular Coder
    Join Date
    Mar 2007
    Posts
    230
    Thanks
    0
    Thanked 4 Times in 4 Posts
    how do i fire the function fireContentLoadedEvent() from my php page ?

    -You can call it on body's onload event


  •  

    Posting Permissions

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