Question

我有一个日历控件并且在选择相应的日期时，我需要在手风琴中显示今天的截止日期和截止日期。我尝试添加带风格的div以给出手风琴的外观，但这会给出UI问题。目前，我计划添加Accordion（Jquery）。因此，在从日历控件中选择日期时会显示手风琴。我将代码中的accordion 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>

Answer 1

这是因为当DOM准备就绪时会调用accordion函数$(function () { ...而且DOM中没有动态添加的div ..所以在显示动态生成的div后调用accordion函数..

//code to display your dynamic div..
$("#addedDivID").accordion();  //call the accordion function (again) after that..

Answer 2

试试这个：

$(document).find("#accordion").accordion();

如何调用javascript函数绑定动态添加的div

2 个答案: