Модальный с AJAX в Bootstrap и PHP - PullRequest
Новая
       14

Модальный с AJAX в Bootstrap и PHP

0 голосов
/ 08 апреля 2020

Я прочитал несколько других тем с тем же вопросом, но мне не удалось найти мою ошибку. 

<script>
        $(document).ready(function(){

            $('.orderdetails').click(function(){

            var userid = $(this).data('id');

            // AJAX request
            $.ajax({
            url: 'ajax.php',
            type: 'post',
            data: {orderid: orderid},
            success: function(data){ 
                // Add response in Modal body
                $('.modal-body').html(data);

                // Display Modal
                $('#OrderDetails').modal('show'); 
            }
            });
            });
            });
    </script>

Этот скрипт-тег выполняется на той же странице, что и модальный, модальный выглядит так: 

<div class="modal fade" id="OrderDetails" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Order Details</h4>
                </div>
                <div class="modal-body">
                </div>

                <div class="modal-footer">
                </div>
        </div>
    </div>
</div>

Из вывода ajax. php я получаю чистую html, даже пытался удалить все и просто вставив эхо " test string "; (на данный момент я не использую переменную post, просто хочу, чтобы она работала) и получаю модал для всплывающего окна, но без содержимого. Также попытался поместить все выходные данные ajax. php в переменную с именем response и заменить (data) на (response) в jquery безуспешно.

EDIT:

Мой ajax. php контент 

<?php 
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once("vendor/autoload.php"); 

use Automattic\WooCommerce\Client;
use Automattic\WooCommerce\HttpClient\HttpClientException;
$woocommerce = new Client(
    'https://danielacevedo.com/store-sandbox',
    'KEY',
    'KEY2',
    [
        'wp_api' => true,
        'version' => 'wc/v2'
        
    ]
);


try {

	$details = $woocommerce->get('orders/94');
	$query = ['date_min' => '2017-10-01', 'date_max' => '2025-10-30'];

	$lastRequest = $woocommerce->http->getRequest();
	$lastRequest->getUrl(); // Requested URL (string).
	$lastRequest->getMethod(); // Request method (string).
	$lastRequest->getParameters(); // Request parameters (array).
	$lastRequest->getHeaders(); // Request headers (array).
	$lastRequest->getBody(); // Request body (JSON).

	$lastResponse = $woocommerce->http->getResponse();
	$lastResponse->getCode(); // Response code (int).
	$lastResponse->getHeaders(); // Response headers (array).
	$lastResponse->getBody(); // Response body (JSON).
}

catch(HttpClientException $e) {
	$e->getMessage(); // Error message.
	$e->getRequest(); // Last request data.
	$e->getResponse(); // Last response data.
}

?>


             <div class="container">
                              <h2 class="sub-header">Order detail</h2>
                                <div class='table-responsive'>
                                    <table id='myTable' class='table table-striped table-bordered'>
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Order #</th>
                                                <th>Customer</th>
                                                <th>Address</th>
                                                <th>Contact</th>
                                                <th>Order Date</th>
                                                <th>Status</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php 

                echo "<tr><td>";
                
                foreach($details->shipping_lines as $shipping_details){
                    if ($shipping_details->method_id == 'local_pickup'){
                        echo "<i class='fas fa-store-alt'></i>";
                    }
                    if ($shipping_details->method_id == 'flat_rate') {
                        echo "<i class='fas fa-motorcycle'></i>";
                    }
                    else {
                        
                    }
                }

                echo "</td>";
                echo "     <td>" . $details->id ."</td>
                          <td>" . $details->billing->first_name . " " . $details->billing->last_name ."</td>
                          <td>" . $details->shipping->address_1 ."</td>
                          <td>" . $details->billing->phone ."</td>
                          <td>" . date("jS F, Y g:i a", strtotime($details->date_created)) ."</td>
                          <td>" . $details->status ."</td>
                          </tr>";
                ?>
                                        </tbody>
                                    </table>
                                </div>
               </div>

1 Ответ

0 голосов
/ 08 апреля 2020

Более просто; -) 

<script>
$(function(){

   $('.orderdetails').click(function(){

   var userid = $(this).data('id');

   // AJAX request
   $.post( 'ajax.php', {orderid: orderid}, function(data){ 
   // Add response in Modal body
   $('.modal-body').html(data);

   // Display Modal
   $('#OrderDetails').modal('show'); 
});
</script>

Вам нужно больше возможностей для использования модели с параметром data-dismiss = "modal"

...