server not responding due to a long-running script

Question

User-809753952 posted

I have a CheckBoxList and I use an AJAX webmethod to load items to the list.

This is my Ajax call:

          function Load_Items() {
                $("[id*=CheckBoxList4] option").remove();

                var Regno = document.getElementById('hdProdGp').value;
                $.ajax({
                    type: "POST",
                    url: "AdvProdFailSplitIntoDELYear.aspx/GetItems",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: "{'prodgp':'" + Regno + "'}",

                    // success: OnSuccess,

                    success: function (r) {

                        var items = r.d;
                        var repeatColumns = parseInt("<%=CheckBoxList4.RepeatColumns%>");
                        if (repeatColumns == 0) {
                            repeatColumns = 1;
                        }
                        var cell = $("[id*=CheckBoxList4] td").eq(0).clone(true);
                        $("[id*=CheckBoxList4] tr").remove();
                        $.each(items, function (i) {
                            var row;
                            if (i % repeatColumns == 0) {
                                row = $("<tr />");
                                $("[id*=CheckBoxList4] tbody").append(row);
                            } else {
                                row = $("[id*=CheckBoxList4] tr:last-child");
                            }

                            var checkbox = $("input[type=checkbox]", cell);

                            //Set Unique Id to each CheckBox.
                            checkbox[0].id = checkbox[0].id.replace("0", i);

                            //Give common name to each CheckBox.
                            checkbox[0].name = "ItemNo";

                            //Set the CheckBox value.
                            checkbox.val(this.Value);

                            var label = cell.find("label");
                            if (label.length == 0) {
                                label = $("<label />");
                            }

                            //Set the 'for' attribute of Label.
                            label.attr("for", checkbox[0].id);

                            //Set the text in Label.
                            label.html(this.Text);

                            //Append the Label to the cell.
                            cell.append(label);

                            //Append the cell to the Table Row.
                            row.append(cell);
                            cell = $("[id*=CheckBoxList4] td").eq(0).clone(true);

                        });
                    },


                    failure: function (response) {

                        alert(response.d);

                    },
                    error: function (response) {
                        alert(response.d);

                    }
                }


    )
            }

I am calling this Load_Items function from a textbox click event.

  $("#TxtSelectItem").click(function () {
                 Load_Items();

            });

If the result contains more than 20 items, the script is running for a long time and I am getting "server not responding due to a long-running script" error.

What is wrong in my script?