jqueryajax的级联数据加载

Posted 2021-02-23

/* author : MD. MUZAHIDUL ISLAM ([email protected])
* file name : cascade-load.js
* This segment of code uses jQuery(jquery-1.7.2.js) that helps to load cascade data from sever.
* To use this code, 'div' element should contains a 'select' html element and
* needs following attributes of div element:
* class : class attribute must contain 'geo'
* load-data-container : selector of an element that will contain the response that comes from server
* url : server url to load data
*
*/

/**
 * author : MD. MUZAHIDUL ISLAM ([email protected])
 * file name : cascade-load.js
 * This segment of code uses jQuery(jquery-1.7.2.js) that helps to load cascade data from sever.
 * To use this code, 'div' element should contains a 'select' html element and
 * needs following  attributes of div element:
 *         class : class attribute must contain 'geo'
 *         load-data-container : selector of an element that will contain the response that comes from server
 *         url : server url to load data
 *
 * Sample code :
 * <!-- action div -->
 * <div id="parentDivId" class="geo" url="/loadGeoDistrict" load-datacontainer="#childDivId" >
 *     <select> <option>1</option><option>1</option></select>
 * </div>
 * <!-- load div -->
 * <div id ="childDivId">
 * </div>
 * */
$("document").ready(function(){
    $(".geo").on("change", function() {
        var currElement =  $(this);
        var loadDataContainer = $(currElement.attr("load-data-container"));
        loadDataContainer.empty();//to clear data container element
        loadDataContainer.trigger("change");//to clear all child needs a trigger
        var url = currElement.attr("url");
        var firstSelectElement = currElement.find("select:first");
        var geoId = $(firstSelectElement).find(":selected").attr("value");
 
        if(geoId) {
            loadData(url, "get", geoId).done(function(data) {
                loadDataContainer.html(data);
            });
        }
    });
    /**
     * return data from successful AJAX request
     * */
    function loadData(url, type, geoId) {
        return $.ajax(
            {
                url : url,
                type : type,
                data : {id : geoId}
            }
        );
    }
});