jQuery Ajax追加功能

问题描述

想知道如何显示值使用附加函数从数据库中检索并以表格式动态显示Div值.

我的任务:

我参加了3个Divs，一个是标准Div，第二个是Category Div，第三个是积分div.

并且我追加了三个Divs.values的显示，但这些点未以正确的格式显示.表示此Div(for循环)对单个值执行两次.

我的实际输出就像

MBC HSC GD EF

BC 5 9 7

OC 8 7 6

SC 9 6 8

类别是指MBC，Bc，SC，ST，OBC.

标准意味着更高的中学分数，英语流利度，小组讨论.

在我的代码下面:

Want to know how to display the values Retrieve from DB and display the Div values dynamically in a table format using append function.

My Task:

I am taking 3 Divs one is criteria Div, second is category Div, third is points div.

And I append the three Divs.values is displayed, but the points are not displayed correct format. Means this Div (for loop) execute twice a single value.

My actual output is like

MBC HSC GD EF

BC 5 9 7

OC 8 7 6

SC 9 6 8

Category means MBC, Bc, SC, ST, OBC.

Criteria means Higher secondary marks,English fluence,Group discussion.

Below my code:

$(document).ready(function () {
                           $('#<%=ddlcourse.ClientID %>').change(function () {
                           var ddlCourse = document.getElementById('<%=ddlcourse.ClientID %>');
                           var sCourseCode = $('#<%=ddlcourse.ClientID %>').val();
                           var sAcademicYear = "2011-2012";
                           var iCategoryOpr = 13;
                           var iCategoryId = 0;
                                              // alert(sAcademicYear); alert(iCategoryOpr); alert(iCategoryId);
                     $.ajax(
                     {
                            type: "POST",
                            //Calling Webservice to fetch Course List
                            url: "<%=Request.ApplicationPath %>/service/Autocomplete.asmx/getCategory",
                            data: "{'data': '" + "" + "','academicyear':'" + sAcademicYear + "','iopr':'" + iCategoryOpr + "','id': '" + iCategoryId + "'}",
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {

                            $("#dynlabel1").empty();
                            $("#dynlabel2").empty();
                            $("#dynlabel3").empty();
                            $("#dynlabel4").empty();
                            $("#dynlabel5").empty();
                            $("#dynlabel6").empty();

                            var sAcademicYear = "2011-2012";
                            var iCriteriaOpr = 1;
                            //var table1 = document.getElementById("table1");
                    $.ajax(
                    {
                            type: "POST",
                            //Calling Webservice to fetch Course List
                            url: "<%=Request.ApplicationPath %>/service/Autocomplete.asmx/getCriteria",
                            data: "{'data': '" + "" + "','academicyear':'" + sAcademicYear + "','opr':'" + iCriteriaOpr + "'}",
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {

                            for (var i = 0; i < data.d.length; i++) {

                            $("#dynlabel2").append('               ' + '<label id="dynlabel2' + [i] + '"> ' + data.d[i].sCriteriaName + '</label>' + '</br>' + '</br>');
                    }
                  }
               });

                            for (var i = 0; i < data.d.length; i++) {

                            $("#dynlabel1").append('<br/>' + '<br/>' + '<label id="dynlabel1' + [i] + '" > ' + data.d[i].sCategoryName + '</label>' + '</br>' + '</br>');



                    $.ajax(
                      {
                           type: "POST",
                           //Calling Webservice to fetch Course List
                           url: "<%=Request.ApplicationPath %>/service/Autocomplete.asmx/CourseDetails",
                           data: "{'data': '" + "" + "', 'coursecode': '" + sCourseCode + "','category': '" + data.d[i].iparent_id + "'}",
                           contentType: "application/json",
                           dataType: "json",
                           success: function (data) {

                          //$("#table1").append('<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>,<tr> <td></td></tr>');

                           for (var i = 0; i < data.d.length; i++) {

                               $("#dynlabel3").append('<label id="dynlabel3' + [i] + '">' + data.d[i].iPoints + '</label>' + '                        ');
//                                                    $("#table1").append('<tr><td class="rowEven"> ' + data.d[i].iPoints +
//                                                                           '</td><td class="rowEven">' + data.d[i].iPoints +
//                                                                           '</td><td class="rowEven">' + data.d[i].iPoints +
//                                                                           '</td><td class="rowEven">' + data.d[i].iPoints +
//                                                                           '</td><td class="rowEven">'+ data.d[i].iPoints +
//                                                                                         '</td></tr>');

                     }
                   }
                 });

                }

             }
        });

请任何人为这个问题提供解决方案.



谢谢与问候
sujitha;

Please any body give the solution for this question.



Thanks and Regards
sujitha;

推荐答案

这篇关于jQuery Ajax追加功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！