Load Box Content Dynamically using AJAX

This tutorial demonstrates creating dynamic page boxes loaded via AJAX, enabling instant refresh without full page reloads. It leverages jQuery and JavaScript. Think of it as a custom Facebook-style content box loader.

Key Concepts:

• AJAX and jQuery dynamically load and refresh page boxes without complete page reloads, mirroring the functionality of sites like Facebook and Twitter.
• The process involves loading boxes after the DOM is ready, using an AJAX function for each box, displaying loading messages, and employing a server-side script (e.g., PHP) to return the HTML for each box. This HTML is then inserted into the corresponding box on the webpage.
• The system's dynamism stems from using each box's id attribute to generate variables, which are then matched against the server-side script. Content is easily reloaded, and new boxes can be added without extra CSS or JavaScript.

Advantages of this AJAX Approach:

• Faster page load times due to content box loading after the DOM is ready.
• Content refresh within boxes without full page reloads.
• Aligns with modern web development practices used by major platforms (Facebook, Twitter, etc.).
• Adding new boxes requires no additional CSS or JavaScript code.

How it Works:

1. After page load, jQuery calls an AJAX function for each box.
2. A loading message is displayed.
3. A server-side script (e.g., PHP) returns the HTML for the box.
4. The content is loaded into the box.
5. Content is easily reloaded by hovering over the box to reveal a refresh image; clicking this image triggers a content refresh.

Dynamic Functionality:

Each box is a <div> with a unique <code>id attribute. Elements within this <div> use the same <code>id. jQuery uses this id to match against the server-side script, making the system dynamic because all variables are generated based on the box's id.

jQuery Code:

This code runs after page load, initializing box controls and attaching events.

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

This function loads content into a child <div> based on the provided <code>box_id. It dynamically creates variables to handle objects. The box_id is used to identify both the container <div> and the corresponding PHP script (e.g., <code>box_id.php).

function loadboxcontent(box_id){
    if (box_id == '') { return false; }

    var loading_image="/images/loader.gif";
    var loading_text = ' Loading '+box_id.replace(/-/g," ")+'...';
    var script_path = "../php/";
    var box_container = document.getElementById(box_id);
    box_container.innerHTML = loading_text;

    var result = false;
    $.ajax({
      url: script_path+box_id+".php",
      type: 'POST',
      async: true,
      data: {blogs: 30},
      success: function(data) {
         result = true;
         document.getElementById(box_id).innerHTML = data;
      }
    });
    if (result == false) { document.getElementById(box_id).innerHTML = 'Could not refresh data, try refreshing the page'; }
    else {  alert("Content refreshed successfully!");   }
}

HTML Code (Example):

<div id="box-id1" class="box">
  <h2><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">New Blogs</a></h2>
  <div id="controls-id1" class="controls">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174119443682979.png" class="lazy" alt="Load Box Content Dynamically using AJAX "></a>
  </div>
</div>

CSS Code:

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

Images:

• loader.gif
• refresh.png

(The FAQs section from the original input was omitted as it was a separate, unrelated section on general AJAX usage.)