Storing JSON result from ajax request to a javascript variable for Easyautocomplete

Question

I'm trying to implement the EasyAutoComplete plugin on a field based on the value filled in another field, using ajax requests.

I have a customerid field and when it's value changes, I want the productname field to show all products related to that customerid using the EasyAutoComplete plugin.

Here is what I have so far:

$('#customerid').on('change',function() {
    var products2 = {
          url: function(phrase) {
            return "database/FetchCustomerProducts.php";
        },  
        ajaxSettings: {
            dataType: "json",
            method: "POST",
            data: {
                dataType: "json"
            }
        },
        preparePostData: function(data) {
            data.phrase = $("#customerid").val();
            return data;
          },
        getValue: "name",
        list: {
            onSelectItemEvent: function() {
                var value = $("#productname").getSelectedItemData().id;
                $("#productid").val(value).trigger("change");
            },
            match: {
              enabled: true
            }
        }
    };

$("#productname").easyAutocomplete(products2);
});

Contents of FetchCustomerProducts.php:

if(!empty($_POST["customerid"])){

    $products = $app['database']->Select('products', 'customerid', $_POST['customerid']);

    echo json_encode(['data' => $products]);

}

However it's not working. The code is based on the 'Ajax POST' example found on this page.

@SupunDharmarathne It says content length as zero and under size tab, it is 0B as well. Does that mean nothing is being sent? — Inception, Jun 19 '18 at 07:33
@SupunDharmarathne Data is being sent, here are the contents: dataType=json&phrase=2186 — Inception, Jun 19 '18 at 07:53
Can you share the screenshot from the browser (Chrome) network tab on what is being sent to server? — Supun Dharmarathne, Jun 19 '18 at 08:13
@SupunDharmarathne https://i.imgur.com/32ixqOv.png Now I'm getting the proper response as you can see in the image. But the plugin itself is not working — Inception, Jun 19 '18 at 10:49
@SupunDharmarathne Yes, and it's working now! It seems I was not properly setting the variable value from the ajax response. — Inception, Jun 19 '18 at 11:38

score 3 · Accepted Answer · edited Jun 19 '18 at 13:28

you can using element select category add is class "check_catogory" after using event click element select get value is option, continue send id to ajax and in file php, you can get $_POST['id'] or $_GET['id'], select find database,after echo json_encode

$("#customerid").change(function(){
    var id = $(this).val();
    if(id!=""){
        $.ajax({
            url:"database/FetchCustomerProducts.php",
            type:"POST",
            data:{id:id},
            dataType: "json",
            cache:false,
            success:function(result){
                 var options = {
                    data:result,
                    getValue: "name",
                    list: {

                        onSelectItemEvent: function() {
                            var value = $("#productname").getSelectedItemData().id;
                            $("#productid").val(value).trigger("change");
                        },

                        match: {

                          enabled: true

                        }

                    }
                };
                $("#productname").easyAutocomplete(options);

            }
        })
    }
});

Is it absolutly necessary to add `trigger("change")` to `$("#productid").val(value)`? — Ivan Z, Feb 02 '20 at 21:38

Storing JSON result from ajax request to a javascript variable for Easyautocomplete

1 Answers1