Advanced Search

Return to Snippet

Revision: 44589
at April 14, 2011 16:51 by jquery4u
Initial Code 
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...
});
Initial URL 
http://www.jquery4u.com/ajax/load-box-content-dynamically-ajax/
Initial Description 
This is how you can create page box elements that are loaded via AJAX and can be refreshed instantly without a whole page reload.
Initial Title 
Dynamically BOX using AJAX
Initial Tags 
ajax, jquery
Initial Language 
jQuery