LinuxQuestions.org - can't get returns from ajax success callback function

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - can't get returns from ajax success callback function (https://www.linuxquestions.org/questions/programming-9/cant-get-returns-from-ajax-success-callback-function-4175699189/)

can't get returns from ajax success callback function

Object: Create dropdown list for general use by only sending one parameter.

I am trying to call 1. Ajax with a parameter then 2. process that Ajax data to select an option from a database and 3. return that option selected to the calling function - in order to populate an input tag. I am running into trouble in returning my selection to the calling function. I know this is tied into the asynchronous nature of Ajax but I don't know how to fix this.

Here is the code I'm using:

Code:

    <!-- ======  HTML  =========== -->



        <label for='dr'>Doctor</label>

        <input class="hov" id="dr" type="text" name="dr" /><br>  <!-- Populate This -->



    <div id="category">       <!-- Show Select Box Here -->



    </div>

    <!-- ======== SCRIPT ============ -->



    <script type="text/javascript" >



    var myselection="";   // Global var's

    var str="";

    var ret="";



    $(document).ready(function(){



    $("input[name=dr").focus(function(){  // FOCUS is on INPUT

            str="doctors";              // str - any array name in PHP file to get the database info

            ret=callAjaxDr(str);    // return value from select box to populate input

            $("input[name=dr]").val(ret);

    });



    </script>

    //  =========  JS FILE  =============



    in .js file



    function callAjaxDr(str) {  // gets data from mysql database using PHP script

            $.ajax({

            url: "listArrays.php",

            type: "POST",

            data: {"lstnm":str},

            dataType: "json",

            success: getDr        

        }); // ajax

    }



    function getDr(data) {

                $('#category').show();

                $('#category').append($("<h4>Selection Offered</h4>"))          // create select table

                                .append($("<select id='cats' name='cats' size='5'></select>"));

                for (const val of data) {

                  $('#cats').append($("<option>").prop({ value: val, text: val }));

                }

            $('#category').append("<br><br>");

        

            $("#cats").on('change', function () {                                // make selection

                myselection=$("#cats option:selected").text();

                $('#category').empty();

            }); // change

          

            return myselection;  // TROUBLE AREA - return selected option to calling function

    }

Define getDr inside callAjaxDr, and have it modify a variable that's in callAjaxDr's scope.

Thanks for your reply Dugan,

Quote:

Define getDr inside callAjaxDr, and have it modify a variable that's in callAjaxDr's scope.

I have included all files to run this if you want to see what happens. In lieu of that:

Start program:
click on Doctor input
-> select box appears
-> alert appears "in drop9999 line 40 return is and type is string" - in focus
click ok
-> clears alert, select box stays
click on option
-> select box clears
click on Doctor
-> Doctor input populated
-> alert appears "in drop9999 line 40 return is Allen, Peter W OD and type is string" - in focus
click ok
-> alert clears
-> Doctor populated input still shows
-> select box still shows
click on option
-> select box clears
-> Doctor populated input still shows
click done
-> Start Over

Sooooooo .. This partially works in that I can get a return value back but with the penalty of bizarre behavior. Do you have suggestion as to how to fix this? I Hope!!!

Because of Linux Questions File restrictions

dropdown9999.txt is dropdown9999.php
listArrayTest.txt is listArrayTest.php
testnew.txt is testnew.js

R