Multiple Ajax posting to different PHP scripts - debug

PHP
1

Building a script that once a date is selected in a datepicker calendar, it uses ajax to post the selected date in a php script;

in the success of that ajax call, it uses another ajax call to post the same selected date to another php script and displays that in the page.

Did some research around and this seemed to be the best solution for what I try to do.

I don’t have much experience in this.

The script is the following:

<script> //for the events
    jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input's current value: " + this.value);
      $(this).change();
    }
  }).on("change", function() {
    display("Got change event from field");
    // call next ajax function

    var mydate = this.value;
    $.ajax({
        type: "POST",
        url: 'boxes_script.php',
        data: ({dates: mydate}),
            dataType : 'html',
        success: function(data) {
            $('.caixas').html(data);
            alert(data);
            $.ajax({
                type: "POST",
                url: 'events_script.php',
                data: ({dates1: mydate}),
                    dataType : 'html',
                success: function(data) {
                    $('.results-ajax').html(data);
                alert(data);
                }
            });
        }
    });

});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
    </script>

This is the code being used atm. Got some updates because of the feedback given here, but the solution still hasn’t worked 100%

There’s a problem on it and I think it’s because the second Ajax call is inside of a success Ajax.

The problem is the following: The data is being posted in the php scripts, which run like how they should.
The array gets populated with the right information.

The

$(‘.caixas’).html(data);

works fine and displays data from ‘boxes_script.php’ there.

The

$(‘.results-ajax’).html(data);

receives 100% of the data being sent from ‘events_script.php’ but for any weird reason, doesn’t append it to the page…

I can see the data in alert messages and it’s the right data being sent to the browser.

Why isn’t that data being appended to the page?

This is the php code for 'events_script.php’:

<?php
include 'config/config.php';
include 'libraries/database.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  print_r($_POST);
  echo $_POST[dates1];

    $dias= $_POST[dates1];
    $mysql_date = date('Y-m-d', strtotime($dias));
    echo $mysql_date;

   //Make database query
   $sql = "***";

    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $image = $row['Company_Logo'];
        $myArray = json_decode($image, true);
        $event=$row['eventID'];
        echo '<div class="tab-pane" role="tabpanel">
                          <div id="'.$dias.'"  class="container day-events">
                                <div class="row event-list">
                                    <div class="event-list-time col-md-3 col-sm-3 center" style="background-image:url('.$myImage = $myArray[0]['name'].');">
                                        <p class="event-list-start-time">'.$row['Start_Date'].'</p>
                                        <hr class="event-list-time-divider">
                                        <p class="event-list-end-time">'.$row['End_Date'].'</p>
                                    </div>
                                    <div class="event-list-info col-md-9 col-sm-9">
                                        <h2 class="event-list-name">'.$row['Event_Name'].'</h2>
                                        <p>Organized by <span class="event-list-organizer"><a href="mini-about.php?$company='.$row['Ref_ID'].'">'.$row['Company_Name'].'</a></span></p>
                                        <p class="event-list-description">'.$row['Event_Description'].'</p>
                                        <a href="mini-single-event.php?event='.$event.'"><button type="button" class="btn more-info-list">More Information</button></a>
                                    </div>
                                </div> 
                            </div> 
                        </div>';
        }} else { echo 'No results found.'; }
}
?>

Note: no errors were found in the error log. The network gives status 200.

2

You should be using a callback function instead of putting an ajax call inside another ajax call.

3

This was what I testes, still doesn’t work…

 
<script> //for the events
    jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input's current value: " + this.value);
      $(this).change();
    }
  }).on("change", function() {
    display("Got change event from field");
    // call next ajax function
    
    var mydate = this.value;
    function eventos(mydate) {
      $.ajax({
                type: "POST",
                url: 'events_script.php',
                data: ({dates1: mydate}),
                    dataType : 'html',
                success: function(data) {
                    $('.results-ajax').html(data);
                alert(data);
                }
            });
  }
    $.ajax({
        type: "POST",
        url: 'boxes_script.php',
        data: ({dates: mydate}),
            dataType : 'html',
        success: function(data) {
            $('.caixas').html(data);
            alert(data);
            eventos(mydate);
        }
    });

});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
    </script>
4

This was what fixed the problem and made the following final result:

Old:

<div class="row events-tabs">
     <div class="container" data-example-id="togglable-tabs"> 
         <ul class="nav nav-pills center caixas" id="myTabs" role="tablist">
          </ul> 
         <div class="results-ajax tab-content" id="myTabContent">
         </div> 
     </div>
</div>

New:

<div class="row events-tabs">
      <div class="container" data-example-id="togglable-tabs"> 
           <ul class="nav nav-pills center caixas" id="myTabs" role="tablist">
           </ul> 
           <div class="tab-content" id="myTabContent">
                <div class="results-ajax"></div>
           </div> 
      </div>
 </div>

So, basically using results-ajax as class of an own div fixed the problem.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.