PHP and AJAX Loading Data

Question

Good Day. I'm trying to develop a plugin for WordPress that manually sends an e-mail (containg the WooCommerce Order details) to a desired supplier's e-mail. I'm having a hard time figuring out on how to load a data when a user select from a drop down list. I would like to load the data using AJAX on multiple fields without leaving the page. Here's some part of the code:

<select id = "dropdown_orders" class = "dropdown_orders" name="dropdown_orders" onchange="myFunction(this.value)">
    <option value=""><?php _e( 'Select an Order', 'woocommerce-manual-order-forwarding' ); ?></option>

                <?php
                    foreach($order_details as $details => $value)
                    {
                        echo '<option value="' . $value['ID'] . '">' . "Order ID: " .$value['ID'] . '</option>';
                    }
                ?>
</select>

That is the code for the drop down list to show all the Orders with "Complete" Status. And here is the AJAX part.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"</script>
     <script type="text/javascript">
          function myFunction(value)
                    {
                        if(value!="")
                        {
                            $.ajax(
                            {
                                type: "GET",
                                url: '<?php echo $_SERVER['PHP_SELF']; ?>',
                                data: { experience: value},
                                success: function(data) {

                                    alert("You have selected the Order ID of:  " + value);
                              //I want to display a div element that contains all the data from the WordPress database.
                            }
                        });
                        }
                        else
                        {
                            alert("Please Select and Order ID first!");
                        }
                    }
</script>

What I want to achieve is that, when the user select from one of the options from the drop down list, the page will display a div element that displays all the details about the order. Is it possible to do that? Any help would be appreciated. I know that it's impossible to call a PHP function after the "success" part of AJAX.

EDIT HERE On display-orders-admin.php

<div id="forward-field" class="wrap">
    <h2><?php _e( 'WooCommerce Order Forwarding System',  'woocommerce-manual-order-forwarding' ); ?></h2>
        <p><?php _e( '<strong>Note:</strong> This add-on gives you the capability to forward your WooCommerce orders individually on your desired supplier.', 'woocommerce-manual-order-forwarding');?></p>
    </div>

    <div class="container-box">
                <h2><?php _e( 'Order Details', 'woocommerce-manual-order-forwarding' ); ?></h2>
                <p><?php _e( '<strong>Note:</strong> Please select an order from the drop down list below to use the order e-mail forwarding feature.', 'woocommerce-manual-order-forwarding');?></p>

                <select id = "dropdown_orders" class = "dropdown_orders" name="dropdown_orders">
                <option value=""><?php _e( 'Select an Order', 'woocommerce-manual-order-forwarding' ); ?></option>

                <?php
                    foreach($order_details as $details => $value)
                    {
                        echo '<option value="' . $value['ID'] . '">' . "Order ID: " .$value['ID'] . '</option>';
                    }
                ?>

                </select>

                <div class="custom-border"></div>   

                <!--    TRIGGER AN ACTION HERE WHEN THE USER SELECT FROM ONE OF THE ORDER IDS FROM DROPDOWN   -->
                <!--    EXECUTE A JQUERY | AJAX REQUEST TO PULL OUT ALL THE DETAILS OF THE ORDER WITH THE GIVEN ID   -->
                <!--   DISPLAY THE ORDER DETAILS USING DIV ELEMENTS ON THE SAME PAGE   -->

        </div>

How can I achieve those in comments?

I have stored the Order details in an array, I just need to pass the selected option from the jquery on a php variable then process the value to display the correct details on the fields without having the browser to reload. How can I achieve this one? — Eson Roxas
– Eson Roxas, Commented Jul 18, 2016 at 0:55
I'd take a look at this: stackoverflow.com/questions/34560666/… and this: codex.wordpress.org/AJAX_in_Plugins — offchance
– offchance, Commented Jul 18, 2016 at 4:48

Mikey · Accepted Answer · 2016-07-18 03:58:39Z

1

First you are using jQuery, yet you are doing things old-school by using onchange. Let's not do that.

Remove onchange attribute and instead attach an onchange event listener to your dropdown using .change() method.

<select id="dropdown_orders" class="dropdown_orders" name="dropdown_orders">
    <option value=""><?php _e( 'Select an Order', 'woocommerce-manual-order-forwarding' ); ?></option>
    <?php foreach ($order_details as $details => $value) : ?>
        <option value="<?php echo $value['ID'] ?>">Order ID: <?php echo $value['ID'] ?></option>
    <?php endif ?>
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"</script>
<script>
$(function () {
    $('#dropdown_orders').change(function () {
        if (this.value != "") {
            // fyi: $.getJSON() method is a shorter syntax
            $.ajax({
                type: "GET",
                url: '<?php echo $_SERVER['PHP_SELF'] ?>',
                data: { experience: this.value },
                dataType: "json",
                success: function (res) {
                    // ...
                }
            });
        } else {
            alert("Please Select and Order ID first!");
        }
    });
});
</script>

Now, regarding your actual problem, make your PHP return back a JSON string using json_encode(). A starter example of how your PHP script would look like:

// first step: check the request parameter
if (isset($_GET['experience'])) {
    // get the order detail e.g. $order based on the request parameter
    // let's assume $order is an associative array e.g. $order = ['id' => 123, 'price' => 12.40]

    // final step: send back a JSON-encoded response
    header('Content-Type: application/json');
    echo json_encode($order); // only this should be echo'd
}

Back to the HTML/JS code, all you have to do is process the response res once it is received in the success callback. First, it may be a good idea to create and re-use a hidden block element to store your order detail's information. This will be like a template. You will just need to show it once the order information is ready.

So, first add the following to your HTML:

<div id="order-detail" style="display: none;">
    <div class="id"></div>
    <div class="price"></div>
</div>

Next, change your JS.

$(function () {
    $('#dropdown_orders').change(function () {
        if (this.value != "") {
            // fyi: $.getJSON() method is a shorter syntax
            $.ajax({
                type: "GET",
                url: "<?php echo $_SERVER['PHP_SELF'] ?>",
                data: { experience: this.value },
                dataType: "json",
                success: function (res) {
                    // load the information from your response into the DIV
                    var $div = $('#order-detail');
                    $div.find('.id').html(res.id);
                    $div.find('.price').html(res.price);
                    // show the DIV once everything is ready
                    $div.show();
                }
            });
        } else {
            alert("Please Select and Order ID first!");
        }
    });
});

Instead of having a template to store your order details, you can also build the DIV with the order information within your success callback; however, this may lead to messy code.

answered Jul 18, 2016 at 3:58

Mikey

6,7564 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eson Roxas Over a year ago

Hi, thank you for the reply. I just have a question, where would I put this part

// first step: check the request parameter if (isset($_GET['experience'])) {     // get the order detail e.g. $order based on the request parameter     // let's assume $order is an associative array e.g. $order = ['id' => 123, 'price' => 12.40]      // final step: send back a JSON-encoded response     header('Content-Type: application/json');     echo json_encode($order); // only this should be echo'd }

I'm being confused @Mikey

Eson Roxas Over a year ago

I've tried your suggested code, but that doesn't seem to display anything. I tested it using this:

var $div = $('#order-detail');                     //$div.find('.id').html(res.id);                     //$div.find('.price').html(res.price);                     // show the DIV once everything is ready                     $div.show();

but that doesn't show the div element. I've placed some <p> elements to test it.

Collectives™ on Stack Overflow

PHP and AJAX Loading Data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related