Ajax和PHP调试

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.

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.

The data can be seen sent to the browser here:

enter image description here

The first part of the data is being appended to the browser, as you can see in the images.

enter image description here

Why is not working everything?

3个回答


更改</ p>

data1:({{dates1:this.value})</ code> </ p>

到</ p>

 数据:({dates1:this.value})
</ code> </ pre>
     </ div>

展开原文

原文

Change

data1: ({dates1: this.value})

to

data: ({dates1: this.value})


  var mydate = this.value;  //在第一个ajax调用之前添加
</ code> </ pre>

更改-</ p>

  data1:({dates1:mydate})
</ code> </ pre>
     </ div>

展开原文

原文

var mydate = this.value; // add before the 1st ajax call

change -

data1: ({dates1: mydate})


这就是解决问题并得出以下最终结果的原因:</ p>

”在此处输入图片描述“ </ p>

旧</ strong>:</ p>

  

     

         

               </ ul>
             

              </ div>
          </ div>
    </ div>
    </ code> </ pre>

    新</ strong>:</ p>

      

          

               

                  </ ul>
                 

                      
      </ div>
                  </ div>
             </ div>
        </ div>
      </ code> </ pre>

      因此,基本上使用results-ajax作为自己div的类</ strong>解决了该问题。</ p>
           </ div>

展开原文

原文

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

enter image description here

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.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐