|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="txt"><h2>Let Ajax change this text</h2></div> <button>Click to Change Content</button> <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='demo_wait.gif' width="64" height="64" /><br>Loading...</div> <script> $(document).ready(function(){ $(document).ajaxStart(function(){ $("#wait").css("display", "block"); }); $(document).ajaxComplete(function(){ $("#wait").css("display", "none"); }); $("button").click(function(){ $("#txt").load("data.asp"); }); }); </script> |
Combine with the script below to get all hrefs to load as ajax links into one main frame.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ $(document).ajaxStart(function(){ $("#wait").css("display", "block"); }); $(document).ajaxComplete(function(){ $("#wait").css("display", "none"); }); $("a").click(function(){ // Load the content of the page referenced in the a-tags href $("#pageLoad").load($(this).attr("href")); // Prevent browsers default behaviour to follow the link when clicked return false; }); }); |
|
1 2 3 4 |
<div id="wait">PLEASE WAIT...<br>Loading...</div> <div id="pageLoad"></div> |
