Posted By

jquery4u on 04/14/11

Tagged

ajax
jquery

Versions (?)

Last Edited at 04/14/11 04:51pm

Statistics

Viewed 682 times

Favorited by 0 user(s)

Related snippets

Dynamically BOX using AJAX

/ Published in: jQuery

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

jQuery(document).ready(function($) {
    //event to show the box controls when the mouse hovers the box
    //applies to all elements with class="box"
    $('.box').mouseover(function(){
        //replace string "box" with "controls"
        var dyn_var = "#" + this.id.replace("box","controls");
        $(dyn_var).show();
    });
 
    //initialize box controls
    $('.box .controls').hide(); //hide all box controls
 
//hide box when mouse exits box
    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });
 
    //load box content (loads after page loads)
    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    //etc...
});