can't get returns from ajax success callback function

pizzipie · 08-15-2021, 10:55 AM

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
    }

dugan · 08-15-2021, 12:04 PM

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

pizzipie · 08-15-2021, 04:00 PM

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