Posted By

jquery4u on 04/14/11


Tagged

ajax jquery


Versions (?)

Dynamically BOX using AJAX


 / Published in: jQuery
 

URL: http://www.jquery4u.com/ajax/load-box-content-dynamically-ajax/

This is how you can create page box elements that are loaded via AJAX and can be refreshed instantly without a whole page reload.

  1. jQuery(document).ready(function($) {
  2. //event to show the box controls when the mouse hovers the box
  3. //applies to all elements with class="box"
  4. $('.box').mouseover(function(){
  5. //replace string "box" with "controls"
  6. var dyn_var = "#" + this.id.replace("box","controls");
  7. $(dyn_var).show();
  8. });
  9.  
  10. //initialize box controls
  11. $('.box .controls').hide(); //hide all box controls
  12.  
  13. //hide box when mouse exits box
  14. $('.box').mouseout(function(){
  15. $('.box .controls').hide();
  16. });
  17.  
  18. //load box content (loads after page loads)
  19. loadboxcontent('box-id1');
  20. loadboxcontent('box-id2');
  21. //etc...
  22. });

Report this snippet  

You need to login to post a comment.