Wednesday, July 17, 2013

Loading a separate page to a DIV using AJAX

In some occasions we need to load a separate page or pages into a div tag without reloading the whole current page. That functionality can be implemented by using AJAX technology.

According to the below code xxxx.php page will be loaded to the div which has the id=content at the load event of the current page.


<html>

        <head>

       //Importing the Jquery library. Tgis can be through offline or online.
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

         <script>
                    function formLoad(){
                              $('#content').load('xxxx.php'); //AJAX function to load the page.

                      }
        
         </script>

       </head>

       <body OnLoad="formLoad()"> //Call the formLoad() on load event

                 <div id="content"></div>//div to where the external page will be loaded


       </body>

</html>