Forward button and back ajax

Question

I need help making a forward and back button for a birthday list. The data will be sent via POST to a query class. The PHP is ok. I need to adapt the JavaScript.

PHP

$data = date('Y-m-d');

$data_explode = explode("-", $data);

$dia = $data_explode[2];
$mes = $data_explode[1];
$ano = $data_explode[0];


$v_mes = substr($mes, 0, 2); //voltar mes
$novo_mes = (int) $mes - 1; //avancar mes


$botoes_mes = '<div class="medium-2 columns float-left">
                    <a id="#action-aniver" rel="' . $v_mes . '"><i class="fi-arrow-left"></i></a></div>
                   <div class="medium-8 columns float-center">
                      <h4 class="text-center">' . $mes . '</h4>
                   </div>
                   <div class="medium-2 columns">
                     <a id="#action-aniver" rel="' . $novo_mes . '"><i class="fi-arrow-right float-right"></i></a>
                   </div>';

Ajax class:

case 'aniversario':

$char = $_POST['val'];
$body = '';

$dados = connection::select("SELECT * from aniversarios where MONTH(data_usuario) = '" . $char . "'");

foreach ($dados as $reg) {

         $body .= '<p>' . $reg['nome'] . '</p>';

}

retorno = $body;


break;

Javascript

$('#action-aniver').click(function () {
        var chars = (this.value);
        $.post(URL + 'Ajax/aniversario', {val: chars}, function (busca) {
            $('#aniver-ajax').html(busca);
        });
    });

Answer 1

You need to adapt some things in your code, but more important than solving this single problem, is you better understand the concepts of client-side and server-side, because clearly you’ve mixed up some things that are impossible to happen using these languages. But let’s get down to business, make the following adaptations:

HTML

<div class="medium-2 columns float-left">
    <a id="#action-aniver-prev">
        <i class="fi-arrow-left"></i>
    </a>
</div>
<div class="medium-8 columns float-center">
    <h4 class="text-center" id="month"></h4>
    <div id="aniver-ajax">
    </div>
</div>
<div class="medium-2 columns">
    <a id="#action-aniver-next">
        <i class="fi-arrow-right float-right"></i>
    </a>
</div>
<input type="hidden" name="current-month" value="0"/>

Javascript

    function changeMonth(month){
       var months = [
           "JAN",
           "FEV",
           "MAR",
           "ABR",
           "MAI",
           "JUN",
           "JUL",
           "AGO",
           "SET",
           "OUT",
           "NOV",
           "DEZ"
       ]; 

       $("#month").html(months[month-1]);
    }

    $(function(){
        $('#action-aniver-next').click(function () {
            var chars = $('[name="current-month"]').val();
            chars++;
            if(chars > 12)
                chars = 1;

            changeMonth(chars);

            $('[name="current-month"]').val(chars);

            $.post(URL + 'Ajax/aniversario', {val: chars}, function (busca) {
                $('#aniver-ajax').html(busca);
            });
        });

        $('#action-aniver-prev').click(function () {
            var chars = $('[name="current-month"]').val();
            chars--;
            if(chars < 1)
                chars = 12;

            changeMonth(chars);

            $('[name="current-month"]').val(chars);

            $.post(URL + 'Ajax/aniversario', {val: chars}, function (busca) {
                $('#aniver-ajax').html(busca);
            });
        });

        $('#action-aniver-next').trigger('click');
    });