Dynamically BOX using AJAX


/ Published in: jQuery
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.