0

Hello I'm currently developing a wordpress application. I have been able to accomplish almost everything the application needs. I was even able to use Jquery-Ajax to insert data into my custom database table and get a background feedback of the submission.

But where I'm stock right now is autopopulating my textfields based on a dropdown selection. I have read several articles online and the answer I saw here Why is my AJAX call not working? but I still can't fix the problem Below are my codes:

/* Fetching file from the database*/
wp_enqueue_script('jquery');
function ajaxAutopopulate() {
    // The $_REQUEST contains all the data sent via ajax
    if ( isset( $_REQUEST['package'] ) ) {

        $birdday = $_REQUEST['package'];   // department day

        global $wpdb;
        // Let's take the data that was sent and do something with it
        $results = $wpdb->get_results("SELECT body_weight, daily_intake, fcr FROM bird_weight WHERE day=$birdday");

        $users_arr = array();

        foreach ( $results as $result ) {
            $bweight     = $result->body_weight;
            $dintake     = $result->daily_intake;
            $fcr         = $result->fcr;
            $users_arr[] = array("body_weight" => $bweight, "daily_intake" =>$dintake,"fcr"=>$fcr);
        }

        // encoding array to json format
        echo json_encode( $users_arr);

    } else {
        echo "error";
    }

    // Always die in functions echoing ajax content
    die();
}
add_action( 'wp_ajax_ajaxAutopopulate', 'ajaxAutopopulate' );
add_action( 'wp_ajax_nopriv_ajaxAutopopulate', 'ajaxAutopopulate' ); 

//The Html Form on the frontend
echo
    '<form action="" name="mybirdweight" method="post">
        <div>
            <select id="days" name="days">
                <option value=" " > Select Your Bird Age</option>
                <option value="1"> 1</option>
                <option value="2"> 2</option>
            </select>
        </div>
        <div>
            <p>Body Weight</p>
            <input id="bweight" type="text" name="bweight" value=""/>
        </div>
        <div>
            <p>Daily Intake</p>
            <input id="dintake" type="text" name="dintake" value=""/>
        </div>
        <div>
            <p>FCR</p>
            <input id="fcr" type="text" name="fcr" value=""/>
        </div>
    </form>';

//Here is the jquery-ajax javascript

/* the jquery ajax request*/
echo <<< END
    <script type="text/javascript">  
        jQuery(document).ready(function(){
            // On change of the dropdown do the ajax
            jQuery("#days").change(function() {
                var package = jQuery(this).val();
                jQuery.ajax({
                    // Change the link to the file you are using
                    url: "/wp-admin/admin-ajax.php",
                    type: 'POST',
                    // This just sends the value of the dropdown
                    data: {package: package},
                    success: function(response) {
                        // Parse the jSON that is returned
                        // Using conditions here would probably apply
                        // incase nothing is returned
                        var Vals =JSON.parse(response);
                        // These are the inputs that will populate
                        jQuery("input[name='bweight']").val(Vals.body_weight);
                        jQuery("input[name='dintake']").val(Vals.daily_intake);
                        jQuery("input[name='fcr']").val(Vals.fcr);

                    }
                });
            });
        });
    </script>
END;

Please where am I missing it?

  • Where is this code? Is this all actually together like this or in separate files? – Jacob Peattie Mar 21 '18 at 11:13
  • Try select drop-down jQuery("select#days").change(function(e) and var package = jQuery('#days option:selected').val(); and check your ajax link if it called properly or not. – DHL17 Mar 21 '18 at 11:44
  • Thanks for your suggestion, but I have tried it out as well but the auto-population is still not working – Emekrus Mar 22 '18 at 12:57
  • All the functions are located in the functions.php file. The database handling function is on its own, while the html form and the jquery-ajax javascript are on the same function inside the functions.php file. I'm using a child theme – Emekrus Mar 22 '18 at 13:01
1

You need to change the data that you are sending in the ajax request. For ajax to work in WordPress you need to send the action variable in ajax post request. Change

data: {package: package},

to

data: {action: 'ajaxAutopopulate',  package: package}

Also you can use the wordpress default function

wp_send_json( $response ) 

for encoding of data and

 admin_url( 'admin-ajax.php' )

for the ajax file url.

If you have your js code in a separate file , you may need to use

wp_localize_script

to pass the value to the js file

  • Thank you all very much let me try out your suggestions and get back to you – Emekrus Mar 22 '18 at 12:34
  • I have also tried your suggestion but it still didn't work – Emekrus Mar 22 '18 at 12:58
  • Can you please check what url the ajax is posting data. i think your ajax url is not correct . Add $ajax_url = admin_url( 'admin-ajax.php' ); before the line echo <<< END and then replace the line url: "/wp-admin/admin-ajax.php", with url: "{$ajax_url}", or try giving static url like localhost/practise/wordpress/wp-admin/admin-ajax.php to make sure that the ajax is posting data to correct url Also make sure that you are sending action variable in post data data: {action: 'ajaxAutopopulate', package: package} – Sumit Parkash Mar 23 '18 at 18:33
  • or may be try adding a alert in success function of ajax request – Sumit Parkash Mar 23 '18 at 18:47
  • Thanks for your answer but I have also tried it out and it still doesn't work. – Emekrus Mar 28 '18 at 9:26
0

I wasn't successful with the jquery/Ajax autopopulate, so I have been able to get the Job done from the server side, using PHP to fetch the information I need to display, on form submission.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.