only call the ajax function if there is value in the argument

Question

User-1355965324 posted

I have the following code. In onchange function I am calling FillEmployeeDropdown() . But this function only need to be called , if there is value in Depot, If we have selected any value from the dropdownDepot, then only need to call the function. How can I validate , Please help

<div class="form-group">
                            <label class="control-label control-label-left col-sm-2" for="field2"> Depot</label>
                            <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                <select id="dropdownDepot" class="form-control" multiple asp-for="Depot" onchange="FillEmployeeDropdown()" asp-items="@ViewBag.UserDepots" data-role="select"></select>
                            </div>
</div>



function FillEmployeeDropdown() {
        var depot = $('#dropdownDepot option:selected');
        var depots = "";
        $(depot).each(function (index, brand) {
            depots = depots + $(this).val() + ",";
        });
        var department = $('#dropdownDepartment option:selected');
        var departments = "";
        $(department).each(function (index, brand) {
            departments = departments + $(this).val() + ",";
        });
        $.ajax({
            type: "GET",
            url: "/Home/GetEmployeeByDepot?depots=" + depots + "&departments=" + departments,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                // var data = JSON.parse(response);
                $('#dropdownEmployee').empty();
                var Names = document.getElementById('dropdownEmployee');
                Names.length = 0;
                if (data.length > 0) {
                    $.each(data, function (i) {
                        opt = document.createElement('option');
                        Names.options.add(opt);
                        opt.text = data[i].text;
                        opt.value = data[i].value;
                    });

                    $('#dropdownEmployee').multiselect('reload');

                }
                else {
                    $('#dropdownEmployee').empty();
                }
            },
            failure: function (response) {
                console.log(response.responseText);
            },
            error: function (response) {
                console.log(response.responseText);
            }
        });
    }

Answer 1

User753101303 posted

Hi,

Seems you want to test the string and stop? What if you try :

if (depots=="") return;

(and/or maybe on departements as well)

Answer 2

User71929859 posted

$(depot).each(function (index, brand) { depots = depots + $(this).val() + ","; });

Change that to below

        $(depot).each(function (index, brand) {
            if (brand.value) {
                depots = depots + $(this).val() + ",";
            }
        });

That will make sure you add the value only if it's not empty. Otherwise you are just adding the comma to an empty value.

After you do that, you can simply check whether depots variable is empty or not like below 

if (depots) {
   $.ajax({
      //Ajax code here
   });
}
         

Answer 3

User283571144 posted

Hi polachan,

But this function only need to be called , if there is value in Depot, If we have selected any value from the dropdownDepot, then only need to call the function.

According to your description, I couldn't understand your requirement clearly.I found you get the selected value from dropdownDepot as depot in jquery codes. 

Could you please explian more about there is value in Depot?

Do you mean you want to check current page model's Depot property? If it contains the value, then we could call the ajax function.

If you could explian more, it will be more easily for us to find out the solution.   

Best Regards,

Brando

Answer 4

User-474980206 posted

just test the selected count:

function FillEmployeeDropdown() {
  // get selected options 
  var depots = $('#dropdownDepot option:selected');
  if (depots.length == 0)
       return;
  ....
}