1

The PHP:

<?php

$mainView = "views/dashboardView.php";

?>

The HTML:

<div class="mainContent">
    <?php include($mainView); ?>
</div>

I would like the click event of a button to change what view .mainContent shows and I believe AJAX can accomplish this but as yet have not been able to get it to work.

Any advice?

Craig Thomas
  • 89
  • 1
  • 2
  • 10
  • since the variable is hard coded in your script and will not change until you edit the file on the server, you should think of storing it in a database or session instead. – Waygood Nov 02 '12 at 14:16
  • Changing that variable won't change your include. AJAX is the right way to go but not like that. You should have AJAX get "views/dashboardView.php" (or other) when the button is clicked, as opposed to changing the variable within the include. Does this make sense? – George Nov 02 '12 at 14:17
  • George - I believe it does. Can you give me a quick example? – Craig Thomas Nov 02 '12 at 14:20
  • Do you want to change the view as a one-off, just for the user (temporary) __session__, just for the user from now on (perminent) __db for user__ , for all visitors __db for site__ – Waygood Nov 02 '12 at 14:33

4 Answers4

3

You would have to modify your PHP script to allow for this.

For example:

PHP: 

if (isset($_POST['change']))
{
    $mainView = $_POST['change'];
    echo $mainView;
}

HTML & jQuery:

<button id="change">Change the var</button>
<script>
$("#change").click(function() {
    $.post("file.php", {change: $(this).val()},
        function (data)
        {
           $("#mainContent").html(data);
        });
});
</script>
narruc
  • 350
  • 4
  • 9
1
<script type="text/javascript>

    function changePage(pageDest){
    var xmlobject = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

        xmlobject.onreadystatechange = function (){
            if(xmlobject.readyState == 4 && xmlobject.status == 200){
                document.getElementById("mainContent").innerHTML = xmlobject.responseText;
            }
            else{
                document.getElementById("mainContent").innerHTML = 'Loading...';
            }
        }
        xmlobject.open("GET",pageDest,true);
        xmlobject.send();
    }

</script> 



<div class="mainContent" id="mainContent">
    Change this HTML
</div>

<div onmouseup="changePage('views/dashboardView.php')">Get dashboard view</div>

The parameter in the changePage function is the location of the page that you would like to place in your mainContent <div>

Does this help?

George
  • 36,413
  • 9
  • 66
  • 103
1

You cannot change the value of a PHP variable, as PHP is Server Side (done first), and JS is Client Side (done after Server Side).

Typically AJAX is used to repopulate an area of a web page, but that would suit your purpose. In the example below, ajax/test.php is the new file you want to include. Obviously change the path/name as you wish, and create that file.

I will add though, if you are repopulating a large chunk of your page, it will probably be just as quick to fully reload it.

$(function(){

    $('.your-button-class').on('click', function(){

        $.post('ajax/test.php', function(data) {
            $('.mainContent').html(data);
        });

    });

});
David Gard
  • 11,225
  • 36
  • 115
  • 227
1

Storing the View in the session, will keep the site displaying this view until the user closes the browser and ends the session, the session expires or they change the view again.

The include that sets mainView

<?php
    session_start();
    $mainView = "views/dashboardView.php";  // default
    if(isset($_SESSION['mainView']))
    {
        $mainView =$_SESSION['mainView'];
    }
?>

// the ajax script that sets the mainView

<?php
    session_start();
    $_SESSION['mainView']='views/'.$_GET['mainView'].'.php';
?>

the javascript link for ajax

ajaxURL='ajax.php?mainView=otherDasboard';

you may also want to check for empty session variable and that the file exists before setting it

Waygood
  • 2,657
  • 2
  • 15
  • 16