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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Location
    Canada
    Posts
    137
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Once content loaded continue

    I have a script that loads content using AJAX, and I also have another script that makes effects with AJAX.

    But I want to make it so when the user clicks the link to hides the old content, show a loading image till the content is loaded, and then fades it in.

    Here is my javascript
    Code:
    <script src="ajax.js" type="text/javascript"></script>
    	<script src="prototype.js" type="text/javascript"></script>
    	<script src="scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA{
    	
    	function loadmerch(im)
    	{
    			Element.hide('full-merch');
    			new Effect.Appear('full-merch');
    			ajaxpage('merchpic.php?im='+im, 'full-merch');
    	}
    //]]>
    </script>
    And here is what the link would look like:
    <a onclick="loadmerch('ep.jpg');" href="#">

    Thanks!

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    let me guess, you tried doing all that in one function right?
    I came across the same problem myself.

    the work around i came across is using different event handlers, that way each thing i want done gets doen.

    <a href='#' onmousedown="DoHide('myelementsid');" onmouseup="ajaxpage('merchpic.php?im='+im, 'full-merch');">

    <element id="myelementsid"></element>

    <div style="position:absolute; left:??px; top:??px; display:none;">
    <table><tr><td align=center valign=middle>
    please wait while content loads...
    </td></tr></table>
    </div>


    function DoHide(Id){
    document.getElementById(Id).style.display="none";
    document.getElementById('wait').style.display="block";
    }

    function ajaxpage(location){
    your script;
    //at end of script be sure to make wait div hide again
    document.getElementById('wait').style.display="none";
    }



    the only thing i dont like though is that if the user clicks the mouse down and holds it then does a mouseout, the ajax function doesnt get called and the wait div is displayed. this of course means that it doesnt get re hidden either cuz it gets hid at the end of the ajax function.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    Canada
    Posts
    137
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brandonH View Post
    let me guess, you tried doing all that in one function right?
    I came across the same problem myself.

    the work around i came across is using different event handlers, that way each thing i want done gets doen.

    <a href='#' onmousedown="DoHide('myelementsid');" onmouseup="ajaxpage('merchpic.php?im='+im, 'full-merch');">

    <element id="myelementsid"></element>

    <div style="position:absolute; left:??px; top:??px; display:none;">
    <table><tr><td align=center valign=middle>
    please wait while content loads...
    </td></tr></table>
    </div>


    function DoHide(Id){
    document.getElementById(Id).style.display="none";
    document.getElementById('wait').style.display="block";
    }

    function ajaxpage(location){
    your script;
    //at end of script be sure to make wait div hide again
    document.getElementById('wait').style.display="none";
    }



    the only thing i dont like though is that if the user clicks the mouse down and holds it then does a mouseout, the ajax function doesnt get called and the wait div is displayed. this of course means that it doesnt get re hidden either cuz it gets hid at the end of the ajax function.
    That function works for me. It just doesn't look proper because unless the images is already cached, it fades in the alt text as the image downloads.
    And I am very confused by what you posted for me...


  •  

    Posting Permissions

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