JS click on any tag to get the tag attribute, to get the ID as an example, and the async principle of Ajax and the $ (document). The difference between ready () and window.onload loading methods

JS Code:

//$(document).click(function (e) {// Click anywhere on the page to trigger this event
                    // var select = "";
                    // var i = $ (e.target) .attr ("id"); // e.target represents the clicked target
// This is how to find the drop-down box in the actual project
                    // select = e.target.parentNode.parentNode.getElementsByTagName (‘select‘)
// Look for the ID of the HTML tag in the point
                    // for (var i = 0; i <select.length; i ++) {
                    // selectId = select [i] .id;
                    // //$.parser.parse("# "+ selectId);
                    //}
After looking at AJAX for a long time, I found that asynchronous AJAX is to directly execute the method below AJAX when the method is submitted to the server, regardless of the results of the execution, and synchronization is to execute the method after AJAX after the server responds. Examples are as follows

$ (window) .load (function () {
                    $ .ajax ({
                        type: "POST",
                        url: "AdvancedQueryPage.aspx / CreatControl",
                        dataType: "json",
                        // To change to synchronization, please uncomment this part, and put the click event of the drop-down box after the ajax method
                        // async: false,
                        contentType: "application / json; charset = utf-8",
                        success: function (msg) {
                            var searchCoditionBody = "";
                            var num = 0;
                            // loop raw JSON data
                            $ .each (JSON.parse ("{" + msg.d + "}"), function (key, name) {
                                // Resolve the name of the key
                                var info = key.toString (). split (‘$‘);

                                if (num% 2 == 0) {
                                    searchCoditionBody + = "<tr>";
                                }
                                for (var i = 0; i <info.length; i ++) {
                                    // Dictionary-type stitching rules
                                    if (info [2] == "True") {
                                        searchCoditionBody + = "<td> <table style = \" width: 99% \ "> <tr> <td style = \" width: 90px; text-align: center \ ">" + info [0] + "< / td> <td colspan = \ "2 \"> <select id = \ "s_" + info [1] + "\" style = \ "width: 99% \" class = \ "easyui-combotree \"> </ select> </ td> </ tr> </ table> </ td> ";
                                        break;
                                    }
                                        // The splicing rule of time type
                                    else if (info [2] == "DateTime") {
                                        searchCoditionBody + = "<td> <table style = \" width: 99% \ "> <tr> <td style = \" width: 90px; text-align: center \ ">" + info [0] + "< / td> <td style = \ "width: 15% \"> <select id = \ "s_" + info [1] + "\" style = \ "width: 60% \" class = \ "easyui-combotree \ "> </ select> </ td> <td> <table style = \" width: 99% \ "> <tr> <td> <input id = \" txt_beg "+ info [1] +" \ " style = \ "width: 99% \" data-options = \ "editable: false \" class = \ "easyui-datebox \" /> </ td> <td style = \ "width: 6% \"> To </ td> <td> <input id = \ "txt_end" + info [1] + "\" style = \ "width: 99% \" data-options = \ "editable: false \" class = \ "easyui -datebox \ "/> </ td> </ tr> </ table> </ td> </ tr> </ table> </ td>";
                                        break;
                                    }
                                        // The stitching rule of string and number type
                                    else {
                                        searchCoditionBody + = "<td> <table style = \" width: 99% \ "> <tr> <td style = \" width: 90px \ "text-align: center \"> "+ info [0] +" </ td> <td style = \ "width: 15% \"> <select id = \ "s_" + info [1] + "\" style = \ "width: 60% \" class = \ "easyui- combotree \ "> </ select> </ td> <td> <input id = \" txt_ "+ info [1] +" \ "style = \" width: 99% \ "class = \" easyui-textbox \ "data-options = \" prompt: 'Enter here ...' \ "/> </ td> </ tr> </ table> </ td>";
                                        break;
                                    }
                                }
                                num ++;
                                if (num% 2 == 0) {
                                    searchCoditionBody + = "</ tr>";
                                }
                            })
                            // Append to the table and finally render the specified table
                            $ ("# searchCondition"). html (searchCoditionBody);
                            $ .parser.parse ($ (‘# searchCondition‘));
                            // Add data to these controls
                            $ .each (JSON.parse ("{" + msg.d + "}"), function (key, name) {
                                // Resolve the name of the key
                                var info = key.toString (). split (‘$‘);
                                for (var i = 0; i <info.length; i ++) {
                                    var content = eval (name);
                                    $ ("# s_" + info [1]). combotree (‘loadData’, content);
                                    break;
                                }
                            });
                            // If it is executed asynchronously, the method behind ajax must be executed at the same time when the method in success is executed
                            var selectId = "";
                            $ ("input"). click (function () {
                                var selectId = $ (this) .parent (). parent (). find ("select"). attr ("id");
                                $ ("#" + selectId) .combotree ({
onSelect: function (node) {
                                        selectId = selectId.replace ("s_", "");
                                        if (node.text == "between") {
                                            alert ($ ("# txt_end" + selectId) .attr ("id"));
                                            $ ("# txt_end" + selectId) .datebox ({
                                                disabled: true
                                            });
                                        } else {
                                            alert ($ ("# txt_end" + selectId) .attr ("id"));
                                            $ ("# txt_end" + selectId) .datebox ({
                                                disabled: false
                                            });
                                        }
                                    }
                                });
                            });
                        },
                        error: function (err) {
                            alert (err.error); 2
                        }
                    });
                    // The synchronous execution place after AJAX execution is successful, that is, if it is synchronized, this method needs to wait, if it is asynchronous, there is no need to wait here, continue to execute
                    // var selectId = "";
                    //$("input").click(function () {
                    // var selectId = $ (this) .parent (). parent (). find ("select"). attr ("id");
                    // $ ("#" + selectId) .combotree ({
                    // onSelect: function (node) {
                    // selectId = selectId.replace ("s_", "");
                    // if (node.text == "between") {
                    // alert ($ ("# txt_end" + selectId) .attr ("id"));
                    // $ ("# txt_end" + selectId) .datebox ({
                    // disabled: true
                    //});
                    //} else {
                    // alert ($ ("# txt_end" + selectId) .attr ("id"));
                    // $ ("# txt_end" + selectId) .datebox ({
                    // disabled: false
                    //});
                    //}
                    //}
                    //});
                    //});
This is because this example needs to load the labels of all pages and assign the labels to call the events of the labels to process the data. If it is asynchronous, placing the label processing method after the AJAX method will cause the AJAX method to not yet After loading, the label is incomplete, so the ID of the label cannot be obtained for data processing. The solution is to put the click event in the successful method to execute or change to the synchronized AJAX method

 

In addition, $ (function () {}) is short for $ (document) .ready (), which is the method that is executed after all DOM is loaded, and $ (window) .ready () is all that is loaded after the page The method is only started after the picture of the packet, which is the difference between the two, there is

   window.onload cannot be written at the same time, if there are multiple window.onload methods, only one will be executed
         $ (document) .ready () can write multiple at the same time, and all can be executed

JS clicks on any tag to get the tag attribute to get ID as an example, and the asynchronous principle of AJAX and the difference between $ (document) .ready () and window.onload loading