AJAX与PHP调试

Question

What I am creating looks like this:

The buttons Last Week and Next Week, the input area and the boxes are meant to retrieve the date they have written in them as the selected day.

Problem: the 'Next Week' button is having a weird behaviour.

This is what show up first when one click on it: (it's great)

This is what happens after: (it's not defining as date, the one that's being alerted) The date selected and alerted is not the one that gets rendered.

Instead, it selects the date appended after running the script (so, it selects 7 days afer).

The Ajax:

function foooo2(ctrl) {
        var mydate = extractContent(document.getElementsByClassName('herecode2')[0].innerHTML);
        alert(mydate);
        $.ajax({
            type: "POST",
            url: '/buttons_past_script.php',
            data: ({dates1: mydate}),
                dataType : 'html',
            success: function(data) {
                $('.past_button').html(data);
              //  alert(data);
                $.ajax({
            type: "POST",
            url: '/buttons_next_script.php',
            data: ({dates2: mydate}),
                dataType : 'html',
            success: function(data) {
                $('.next_button').html(data);
              //  alert(data);
                $.ajax({
                    type: "POST",
                    url: '/boxes_buttons_script.php',
                    data: ({dates3: mydate}),
                        dataType : 'html',
                    success: function(data) {
                        $('.caixas').html(data);
                     //   alert(data);
                        $.ajax({
                            type: "POST",
                            url: '/events_script.php',
                            data: ({dates4: mydate}),
                                dataType : 'html',
                            success: function(data) {
                                $('.results-ajax').html(data);
                          //  alert(data);
                            }
                        });//end of forth ajax call
                    }
                });//end of third ajax call
                }
            });//end of second ajax call
            }
        });//end of first ajax call
   }

The PHP for the next button:

<?php
    // Include and instantiate the class.
    require_once 'helpers/Mobile-Detect-2.8.24/Mobile_Detect.php';
    $detect = new Mobile_Detect;
    $dias= $_POST["dates2"];
    $first_date2 = strtotime($dias);
    $nweek_date = strtotime('+7 day', $first_date2);
    $nday_date = strtotime('+1 day', $first_date2);

    // Any mobile device (phones or tablets).
    if ( $detect->isMobile() ) {
        echo '<div class="day-after col-md-2 col-sm-2 col-xs-2">
                    <button type="button" onclick="foooo2(this)" class="btn btn-default herecode2">
                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">'.date('m/d/y', $nday_date).'</span>
                    </button>
                </div>';
    } else {
      echo '<div class="next-week col-md-2 col-sm-2 col-xs-2">
                    <button type="button" onclick="foooo2(this)" class="btn btn-gray btn-default herecode2">
                     Next Week <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">'.date('m/d/y', $nweek_date).'</span>
                    </button>
                </div>';
    }

    ?>

Note: This info should be ok for the help. If you need any other info just let me know.

Answer 1

You can fix it by adding an id to span in the PHP code:

Next Week <span id="nextdate" class="glyphicon glyphicon-chevron-right" aria-hidden="true">'.date('m/d/y', $nweek_date).'</span>

then, instead of:

var mydate = extractContent(document.getElementsByClassName('herecode2')[0].innerHTML);

you can use :

var mydate = $("#nextdate").html();