从包含的页面打开超链接而不更改页面

Question

I have one principal page with two links, and one switch to get those links, and create includes for both:

Links

<div id="g-menu">
<ul>
<li> <a href="?link=1"  name="link1">Home</a></li>
<li> <a href="?link=2"  name="link1">Calendar</a></li>
</ul>
</div>

Swith

 switch ((isset($_GET['link']) ? $_GET['link'] : '')) {
  case "1":
    include('modules/groups/principal_page.php');
    break;
  case "2":
    $current_month = date('m') - 1; //check the current month
    $_GET['id']= $current_month; 
    $_GET['year']=date('Y'); //check the current year
    include 'modules/groups/calendar.php';
    break;
  default:
   include('modules/groups/principal_page.php');
 }

The first page is the principal page, the second one, is a page with an calendar.

To do the calendar buttons(back and forward), i used parameters, example, if i want to check the April in 2004 i do that:

calendar.php?id=4&year=2004 //4 because january starts at 0

The problem is that i'm using parameters to do that, and i dont know how to connect the buttons from the links, to the file that the calendar page is being included.

Code from the buttons

<?php } 

$id = preg_replace('#[^0-9]#i', '', $_GET['id']); 

$get_year = preg_replace('#[^0-9]#i', '', $_GET['year']); 

$back= $id - 1;
$back2 = $get_year;
$next= $id + 1;

if($back == 0 || $back == -1){
  $back = 12;
  $back2 = $get_year - 1;
}

if($id ==12){
  ++$get_year;
  $next= 1;
}


 ?>
<a href="calendar.php?id=<?= $back?>&year=<?= $back2; ?>"><button class="offersbtn">Back</button></a>
<a href="calendar.php?id=<?= $next?>&year=<?= $get_year; ?>"><button class="offersbtn">Next</button></a>

</div>
<br>
<?php
  echo get_date($id,$get_year);
?>

How can I use the navigation buttons without changing the current page that the calendar is being included?

Answer 1

Since you are using php, you'll have to implement some kind of client side scripting to make requests without reloading the page your on.

I would suggest using jquery if you are not to sharp on Javascript.

http://jquery.com/

This is similar to a project I have completed.

Put your output of calendar.php in a div, that your comfortable with the content being replaced and give it an id.I would not suggest using an iFrame because it will limit the functionality of your app. In most cases once your in an iFrame you can't get out.

<div id=calendar><!---Contents of calendar.php---></div>

Then create forms for your buttons passing your variables data through hidden input fields.

<form id="back" method="GET" >
<input name="id" type="hidden" value="<?= $back ?>"/>
<input name= "year" type="hidden" value="<?= $back2; ?>"/>
<button type="button" id="back_btn"class="offersbtn">Back</button>
</form>

<form id="next" method="GET">
<input name="id" type="hidden" value="<?= $next ?>"/>
<input name= "year" type="hidden" value="<?= $get_year; ?>"/>
<button type="button" id="next_btn" class="offersbtn">Next</button>
</form>

Finally setup place some Jquery functions at the header of your file. (don't forget to include the library)

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
 $(function(){
    $(document).on("click","#back_btn",function() {
        $.ajax( {
            type: $(this).attr('method'),
            url: "calendar.php",
            data: $('#back').serialize(),
            success: function( response ) {
                $( "#calendar" ).replaceWith( response );
            }
        });
    });
 });
$(function(){
    $(document).on("click","#next_btn",function() {
        $.ajax( {
            type: $(this).attr('method'),
            url: "calendar.php",
            data: $('#next').serialize(),
            success: function( response ) {
                $( "#calendar" ).replaceWith( response );
            }
        });
    });
 });

</script>

I'm sure there are many different ways with different frameworks and client side scripting. Hopefully this can get you off to a start. This is just one of the ways I have done it.