CODEWITHSUNDEEP
javascriptphpjquery
user5923290
user5923290

Reputation:

on loading page, display a PHP file in a div and on clicks display other PHP files in the same div

I want to display a PHP file on loading the page and display other PHP files in the same div. Here is my code...

<ul id="nav" class="nav">
   <li><a class="ajax-link" href="menu.php">Menu</a></li>
   <li><a class="ajax-link" href="#">History</a></li>
   <li><a class="ajax-link" href="editdetails.php">Details</a></li>
   <li class="last"><a href="logout.php">Logout</a></li>
</ul> <!-- end #nav -->

<div class="page" id="main_content">
   <script type="text/javascript">
     $(function() {
       $("a.ajax-link").on("click", function(e) {
         e.preventDefault();
         $("#main_content").load(this.href);
       });
     });
    </script>
</div>

This code is displaying the pages only after clicking but, i want to display the menu page on loading itself. Help me.

Upvotes: 1

Views: 1001

Answers (2)

Jimish Gamit
Jimish Gamit

Reputation: 1024

<ul id="nav" class="nav">
    <li><a class="ajax-link" href="menu.php">Menu</a></li>
    <li><a class="ajax-link" href="#">History</a></li>
    <li><a class="ajax-link" href="editdetails.php">Details</a></li>
    <li class="last"><a href="logout.php">Logout</a></li>    
</ul> <!-- end #nav -->

<div class="page" id="main_content"></div>

<script type="text/javascript">
    //It will load content once your page get load
    $(document).ready(function(){
         $("#main_content").load('MENU_LINK');
    });

    //It will load on clicking of links
   $("a.ajax-link").on("click", function(e) {
         e.preventDefault();
         $("#main_content").load(this.href);
   });        
</script>

Upvotes: 1

Jicao
Jicao

Reputation: 96

Try this : 

<html>
    <head>
        <!-- Jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
             $("#main_content").load('http://your.link/');
        });        
        </script>
    </head>
    <body class="">
        <ul id="nav" class="nav">
            <li><a class="ajax-link" href="menu.php">Menu</a></li>
            <li><a class="ajax-link" href="#">History</a></li>
            <li><a class="ajax-link" href="editdetails.php">Details</a></li>
            <li class="last"><a href="logout.php">Logout</a></li>
        </ul>

        <div class="page" id="main_content"></div>

    </body>
</html>

Hope this will help ya :)

Upvotes: 0

Related Questions