How to optimize and/or simplify this interaction of jQuery and PHP?

Question

I have a HTML page that interactues with a PHP file using jQuery and AJAX, and I want to improve and implement few things.

I load the <select>-boxes with the response returned by the previus <select>-box. So I did a simple function to save some code. Here it is:

$(document).ready(function(){ 

    $("#sex").click(function(){ 
        getPHPdata("sex", "age");
    }); 

    $("#age").click(function(){ 
        getPHPdata("age", "work");
    }); 

    $("#work").click(function(){ 
        getPHPdata("work", "country");
    }); 

    $("#country").click(function(){ 
        getPHPdata("country", "city");
    }); 

    function getPHPdata(oASelect, oFSelect) {
        $("#" + oFSelect).empty();

        $.ajax({
            type: 'POST',
            url: 'loadselect.php',
            data: 'id=' + encodeURIComponent(oASelect) + "&p=" + encodeURIComponent($("#" + oASelect).val()),
            dataType: 'json',
            success: function(data){
                for (var i = 0; i < data.length; i++) {
                    $("#" + oFSelect).append("<option>" + data[i] + "</option>");
                }
            }
        });
    };

});

Well, in this code I have only four <select>-boxes, but i'll need to use at least eight (all using the same parent as the code above). There is any way to optimize this or save more code?

My second question is:

When the length of the array returned by the PHP file is of only one element, then it'd call the function of its click event and load the next <select>-box because the user can only choose that option.

I don't know how what is the better way to do it, becouse if I control it in the php file, then I don't know how send the response and process it in the html file.

I hope I was clear in my explanation. Any help, advice or example would be appreciated. If you need more details let me know and I'll edit the post.

You could add some data-attributes and bind all events on the select ! — Flo Schild, Apr 20 '13 at 19:15

score 3 · Accepted Answer · edited May 23 '17 at 12:28

1st problem: Use the HTML5 data attributes, as long as you use the HTML5...

<select data-name='work' data-target='country' ...>
   <option...></option>
</select>

Then in JS

$('select').on('click', function () {
    getPHPData($(this).data('name'), $(this).data('target'));
});

2nd problem:

I am not sure of the way to trigger the "change" event, especially because I'm not sure you bind it istead of a "click", but I took a look at this thread: Trigger change() event when setting <select>'s value with val() function

I think this code should work, if not, say it to me, I'll try a JSFiddle.

function getPHPdata(oASelect, oFSelect) {
    $("#" + oFSelect).empty();

    $.ajax({
        type: 'POST',
        url: 'loadselect.php',
        data: 'id=' + encodeURIComponent(oASelect) + "&p=" + encodeURIComponent($("#" + oASelect).val()),
        dataType: 'json',
        success: function(data) {
            if (data.length == 1) {
                // It is a bit difficult to choose the right way for changing a select automatically,
                // I would suggest you to take a look at this:
                // https://stackoverflow.com/questions/5760873/trigger-change-event-when-setting-selects-value-with-val-function
                $("#" + oFSelect).append("<option>" + data[0] + "</option>").val(data[0]).trigger('click');
            } else {
                for (var i = 0; i < data.length; i++) {
                    $("#" + oFSelect).append("<option>" + data[i] + "</option>");
                }
            }
        },
        error: function (response) {
            // Manage any error here
        }
    });
};

Really thanks! nice solution! first problem solved! what about the second one? — mllamazares, Apr 20 '13 at 19:28
I think you could try something in this way (see the edited post), I'm not sure of the event to trigger and the way to select the only available option automatically, but regarding the other thread, it should work ! — Flo Schild, Apr 20 '13 at 20:04
I love you! It works perfectly. You had done the _good action_ of the day! — mllamazares, Apr 20 '13 at 21:03

How to optimize and/or simplify this interaction of jQuery and PHP?

1 Answers1