Change PHP include ("link.php") by click buttons - php

Question

how to change PHP include ("link.html") by click buttons.
<?php include('link1.html')?>
BUTTON 1 change <?php include('link1.html')?> to <?php include('link2.html')?>
BUTTON 2 change <?php include('link1.html')?> to <?php include('link3.html')?>
BUTTON 3 change <?php include('link1.html')?> to <?php include('link4.html')?>
how to do this without refreshing page. using ajax?

Answer 1

Wrap include('link1.html'); with a DIV with unique ID. And on click on button call a ajax and replace the DIV content.
Please try with below code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DIVID">
<?php
include('link1.html');
?>
</div>
<button onclick="btnclick('link2.html')">Button 1</button>
<button onclick="btnclick('link3.html')">Button 2</button>
<button onclick="btnclick('link3.html')">Button 3</button>
<script type="text/javascript">
function btnclick(_url){
$.ajax({
url : _url,
type : 'post',
success: function(data) {
$('#DIVID').html(data);
},
error: function() {
$('#DIVID').text('An error occurred');
}
});
}
</script>

Answer 2

You can do that with jquery, example:
PHP Code:
<div id="mainDiv"><?php include('link1.html')?></div>
<button onclick="change2()">Button 1</button><br />
<button onclick="change3()">Button 2</button><br />
<button onclick="change4()">Button 3</button><br />
JQuery code
function change2() {
$('#mainDiv').load('link2.html');
}
function change3() {
$('#mainDiv').load('link3.html');
}
function change4() {
$('#mainDiv').load('link4.html');
}
Don't forget to include de JQuery
<script src="jquery/jquery.min.js"></script>

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="include( $( this ) )" value="2">Button 1</button>
<button onclick="include( $( this ) )" value="3">Button 2</button>
<button onclick="include( $( this ) )" value="4">Button 3</button>
<div id="included_page"><?php include('link1.html')?></div>
function include(elem)
{
var page = elem.val();
$.ajax({
url: "link" + page + ".html",
type: "GET"
}).done(function(msg) {
$('#included_page').html(msg);
})
})
}
I am not great at ajax but something along these lines may work, if you get any problems let us know.