I am building a web page with a left navbar and a right div content area.

What I would like to do is load a new php file into the right div content area when a menu item li is clicked. I am new to ajax so am having difficulty with it. I'm somebody can help me.

The link is

Here is my header.php file, which is included along with the other php files:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />

    <title>Admin</title>

    <link href="../css/admin.css" rel="stylesheet">

    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/jquery.dataTables.min.js"></script>
    <script> src="../js/admin-dynamic.js"</script>

    <style>
        html, body {
            height: 100%;
        }
        body {
        }
        .page-content {
            padding-top: 3.125rem;
            min-height: 100%;
            height: 100%;
        }
        .table .input-control.checkbox {
            line-height: 1;
            min-height: 0;
            height: auto;
        }

        @media screen and (max-width: 800px){
            #cell-sidebar {
                flex-basis: 52px;
            }
            #cell-content {
                flex-basis: calc(100% - 52px);
            }
        }
    </style>

    <script>
        function pushMessage(t){
            var mes = 'Info|Implement independently';
            $.Notify({
                caption: mes.split("|")[0],
                content: mes.split("|")[1],
                type: t
            });
        }

        $(function(){
            $('.sidebar').on('click', 'li', function(){
                if (!$(this).hasClass('active')) {
                    $('.sidebar li').removeClass('active');
                    $(this).addClass('active');
                }
            })
        })
    </script>
</head>

Here is the left navbar php:

<div class="page-content">
    <div class="flex-grid no-responsive-future" style="height: 100%;">
        <div class="row" style="height: 100%">
            <div class="cell size-x200" id="cell-sidebar" style="background-color: #71b1d1; height: 100%">
                <ul class="sidebar">
                    <li><a href="#">
                        <span class="mif-apps icon"></span>
                        <span class="title">Home</span>
                        <span class="counter">0</span>
                    </a></li>
                    <li><a href="#">
                        <span class="mif-vpn-publ icon"></span>
                        <span class="title">US Migration</span>
                        <span class="counter">0</span>
                    </a></li>
                    <li class="active"><a href="test.php">
                        <span class="mif-drive-eta icon"></span>
                        <span class="title">Virtual machines</span>
                        <span class="counter">2</span>
                    </a></li>
                    <li><a href="#">
                        <span class="mif-cloud icon"></span>
                        <span class="title">Cloud services</span>
                        <span class="counter">0</span>
                    </a></li>
                    <li><a href="#">
                        <span class="mif-database icon"></span>
                        <span class="title">SQL Databases</span>
                        <span class="counter">0</span>
                    </a></li>
                    <li><a href="#">
                        <span class="mif-cogs icon"></span>
                        <span class="title">Automation</span>
                        <span class="counter">0</span>
                    </a></li>
                    <li><a href="#">
                        <span class="mif-apps icon"></span>
                        <span class="title">all items</span>
                        <span class="counter">0</span>
                    </a></li>
                </ul>
            </div>

Here is the page I am starting with, which needs refreshing:

                <div class="cell auto-size padding20 bg-white" id="cell-content">
                    <h1 class="text-light"> Project<span class="mif-drive-eta place-right"></span></h1>
                    <hr class="thin bg-grayLighter">
                    <button class="button primary" onclick="pushMessage('info')"><span class="mif-plus"></span> Create...</button>
                    <button class="button success" onclick="pushMessage('success')"><span class="mif-play"></span> Start</button>
                    <button class="button warning" onclick="pushMessage('warning')"><span class="mif-loop2"></span> Restart</button>
                    <button class="button alert" onclick="pushMessage('alert')">Stop all </button>
                    <hr class="thin bg-grayLighter">
                    <table class="dataTable border bordered" data-role="datatable" data-auto-width="false">
                        <thead>
                        <tr>
                            <td style="width: 20px">
                            </td>
                            <td class="sortable-column sort-asc" style="width: 100px">ID</td>
                            <td class="sortable-column">name</td>
                            <td class="sortable-column">Address</td>
                            <td class="sortable-column" style="width: 20px">Status</td>
                            <td style="width: 20px">Switch</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <label class="input-control checkbox small-check no-margin">
                                    <input type="checkbox">
                                    <span class="check"></span>
                                </label>
                            </td>
                            <td>123890723212</td>
                            <td>No.</td>
                            <td><a href="#">link</a></td>
                            <td class="align-center"><span class="mif-checkmark fg-green"></span></td>
                            <td>
                                <label class="switch-original">
                                    <input type="checkbox" checked>
                                    <span class="check"></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="input-control checkbox small-check no-margin">
                                    <input type="checkbox">
                                    <span class="check"></span>
                                </label>
                            </td>
                            <td>123890723212</td>
                            <td>No.2</td>
                            <td><a href="#">link</a></td>
                            <td class="align-center"><span class="mif-stop fg-red"></span></td>
                            <td>
                                <label class="switch-original">
                                    <input type="checkbox">
                                    <span class="check"></span>
                                </label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

And this is the test.php file that I want the content to be placed into the above page:

        <div class="cell auto-size padding20 bg-white" id="cell-content">
            <h1 class="text-light">TEST REFRESH CONTENT PAGE<span class="mif-drive-eta place-right"></span></h1>
            <hr class="thin bg-grayLighter">
            <button class="button primary" onclick="pushMessage('info')"><span class="mif-plus"></span> Create...</button>
            <button class="button success" onclick="pushMessage('success')"><span class="mif-play"></span> Start</button>
            <button class="button warning" onclick="pushMessage('warning')"><span class="mif-loop2"></span> Restart</button>
            <button class="button alert" onclick="pushMessage('alert')">Stop all machines</button>
            <hr class="thin bg-grayLighter">
            <table class="dataTable border bordered" data-role="datatable" data-auto-width="false">
                <thead>
                <tr>
                    <td style="width: 20px">
                    </td>
                    <td class="sortable-column sort-asc" style="width: 100px">ID</td>
                    <td class="sortable-column">TEST</td>
                    <td class="sortable-column">TEST</td>
                    <td class="sortable-column" style="width: 20px">Status</td>
                    <td style="width: 20px">Switch</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <label class="input-control checkbox small-check no-margin">
                            <input type="checkbox">
                            <span class="check"></span>
                        </label>
                    </td>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td><a href="http://virtuals.com/machines/123890723212">link</a></td>
                    <td class="align-center"><span class="mif-checkmark fg-green"></span></td>
                    <td>
                        <label class="switch-original">
                            <input type="checkbox" checked>
                            <span class="check"></span>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="input-control checkbox small-check no-margin">
                            <input type="checkbox">
                            <span class="check"></span>
                        </label>
                    </td>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td><a href="http://virtuals.com/machines/123890723212">link</a></td>
                    <td class="align-center"><span class="mif-stop fg-red"></span></td>
                    <td>
                        <label class="switch-original">
                            <input type="checkbox">
                            <span class="check"></span>
                        </label>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

I am trying to use ajax to accomplish this, here's my ajax code which is stored in admin-dynamic.js file which is called in header.php:

$.ajaxSetup ({
  // disable caching of ajax responses */
  cache: false
});


// Admin body refresh


$(document).ready(function(){
    //for every a tag in the ul sidebar, on click execute the function
    $("ul.sidebar li a").click(function(){
        //run an ajax get request and the page is the href in the a tag clicked. this refers to the a tag clicked. attr("href") gets the value in the href tag.
        $.get($(this).attr("href"), function(data){
            //on successful request the element with id 'cell-content' will have its innerHTML set to the contents of the page requested
            $("#cell-content").html(data);
        });
        //this stops the browser going to href page
        return false;
    });
});

It is not working for me. What it's doing is redirecting the browser to test.php page, instead of loading the content of test.php into the cell-content div.

Thanks in advance to anyone that can help me do what I need to do. I might be taking the wrong approach here completely, I'm not sure...

1 Answers

0
Mohammad C On Best Solutions

Here you go. Try this. I have added comments to hopefully add your understand.

<div id="cell-content">
    <h1>This is where the content will appear when you click a link</h1>
</div>

<!--link jquery to page otherwise jquery commands will not work-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
//happens once the document is loaded
$(document).ready(function(){
    //for ever a tag in the ul sidebar on click execute the function
    $("ul.sidebar li a").click(function(){
        //run an ajax get request and the page is the href in the a tag clicked. this refers to the a tag clicked. attr("href") gets the value in the href tag.
        var link = $(this).attr("href");
        if (link != "#") {
            $.get(link, function(data){
                //on successful request the element with id 'cell-content' will have its innerHTML set to the contents of the page requested
                $("#cell-content").html(data);
            });
        }
        //this stops the browser going to href page
        return false;
    });
});
</script>