0

私はカレンダーコントロールを持っており、それぞれの日付を選択する際に、今日の期限と期限超過をアコーディオンの2つのセクションとして表示する必要があります。アコーディオンのように見えるようにdivをスタイルで追加しようとしましたが、UIの問題が発生しています。現在、アコーディオン(Jquery)を追加する予定です。カレンダーコントロールから日付を選択すると、アコーディオンが表示されます。それぞれの日付を選択しながら、コードビハインドでアコーディオンdivをバインドし、表示するJsonに変換しています。divを追加するコードは次のとおりです。

[WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string CalenderBinderAccordian()
    {
        try
        {
            //Code to fetch ProductGroup is not shown
        foreach (var p in productGroup)
        {
            string todoString = "";
            int uniqueID = Guid.NewGuid().GetHashCode();
            todoString = "<div id='accordion' class='ui-accordion ui-widget ui-helper-reset' role='tablist'><h3><a href=#" + uniqueID + "><b>Due Today</b></a></h3>";
            todoString += "<div>";
            foreach (var t in p.todo)
            {
                var tempAmt = String.Empty;
                if ((t.Amount == null) || t.Amount == String.Empty)
                    tempAmt = "0";
                else
                    tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                todoCount++;
            }
            todoString += "</div>";
            var overDue = temps.Select(x => new { x.DueDate }).Distinct().ToList();
            int overDueCount = 0;
            uniqueID = Guid.NewGuid().GetHashCode();
            todoString += "<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3>";
            int todoCount1 = 1;
            todoString += "<div>";
            for (int i = 0; i < overDue.Count(); i++)
            {
                if ((Convert.ToDateTime(overDue[i].DueDate) - Convert.ToDateTime(p.dates)).Days < 0)
                {
                    overDueCount++;
                    var overDueList = temps.FindAll(x => x.DueDate.Equals(overDue[i].DueDate)).ToList();
                    foreach (var t in overDueList)
                    {
                        var tempAmt = String.Empty;
                        if ((t.Amount == null) || t.Amount == String.Empty)
                            tempAmt = "0";
                        else
                            tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                        todoString += "<p  style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount1.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                        todoCount++;
                        todoCount1++;
                    }
                }
            }
            todoString += "</div>";
            todoString = todoString + "</div>\",\"count\":\"" + todoCount + "\"},";
            jsonString = jsonString + String.Format("{{\"{0}\" : \"{1}\",\"{2}\" : \"{3}", "dates", p.dates, "todo", todoString);
            if (overDueCount.Equals(0))
            {
                jsonString = jsonString.Replace("<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3><div></div>", "");
            }
        }
        jsonString = jsonString.TrimEnd(',');
        jsonString = '[' + jsonString + ']';
        string data= jsonString;
        return data;
    }
    catch (Exception ex)
    {
        throw;
    }
}    

ascxページのコードは次のとおりです。/

/Scripts for Calender control
           <script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="../../Content/jquery.calendarPicker.css" type="text/css" media="screen"/>
   <script type="text/javascript" src="../../Scripts/jquery.calendarPicker.js"></script>
    <link rel="stylesheet" href="../../Content/style.css" type="text/css" media="screen"/>
//Scripts for accordion
  <link rel="stylesheet" href="../../Content/jquery-ui.css" />
  <script  type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
  <script  type="text/javascript">
        $(function () {
            $("#accordion").accordion();
        });
    </script>
     <div class="calendercontent">
        <div id="dsel1" style="width:200px;">
            <a href="" onclick="calendarPicker1.changeDate(new Date())"></a>
            <span id="span1"></span>        
        </div>
        <img class="ref" src="../../Images/refresh_circle.gif" alt="refresh" title="refresh"/>
        <div id="todo"></div>
    </div> 

ascxページにdivデータを追加すると、アコーディオンは正常に機能し、fireBugを使用すると、アコーディオンクラスが表示されますが、アコーディオンデータはコードビハインドに追加され、Javaスクリプトを使用して表示されるため、以下に表示される関数は働く。親切に助けてください、私はJqueryの初心者です。

<script  type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>
4

2 に答える 2

1

これは、DOMの準備ができたときにアコーディオン関数が呼び出されるため$(function () {です...そして動的に追加されたdivがDOMに存在しないため、動的に生成されたdivが表示された後にアコーディオン関数を呼び出します。

//code to display your dynamic div..
$("#addedDivID").accordion();  //call the accordion function (again) after that..
于 2013-01-15T05:57:10.780 に答える
1

これで試してください:

$(document).find("#accordion").accordion();
于 2013-01-15T06:03:42.220 に答える