vb.net jquery datepicker回发

时间:2017-02-08 08:31:17

标签: jquery vb.net jquery-ui-datepicker autopostback

我在我的项目(http://keith-wood.name/datepick.html

上使用此日期选择器

我在asp:TextBox控件上使用它,问题是控件失去了AutopostBack功能。

我希望实现的是更新链接到所选日期的gridview,并且在使用此特定日期选择器之前它正在工作(但我必须因各种原因更改datepicker)。

如果我更改日期或从下拉列表中选择用户,则应更新gridview。

我的代码的相关部分:

<script language="javascript" type="text/javascript">
    $(document).ready(function () { $('#txtData').datepick({ dateFormat: 'dd/mm/yyyy'});
</script>

以下是更新面板,脚本管理器已在页面上声明

<div class="generic">
    <div class="panel">
        <div class="title"><h1>Chiamate del giorno</h1></div>
            <div >
                 <asp:TextBox runat="server" ID="txtData" CssClass="calendarTxt" placeholder="Data" BorderStyle="Solid" BorderColor="#d13f31" BorderWidth="2px" required="required" AutoPostBack="true"></asp:TextBox>
                <asp:DropDownList ID="ddlUtenti" runat="server" AppendDataBoundItems="true" CssClass="dropdown" placeholder="Scegli a chi riassegnare la chiamata" AutoPostBack="true" OnSelectedIndexChanged="ddlUtenti_SelectedIndexChanged">
        <asp:ListItem Value="-1">Tutti</asp:ListItem>
    </asp:DropDownList>
            </div>


        <br />
        <div class="content">
            <div id="divChiamateGiorno" class="scrollDiv" >
            <asp:GridView ID="grdChiamateGiorno" runat="server" AutoGenerateColumns="False" DataKeyNames="idchia,dalle,alle,idstato" DataSourceID="SqlDataSource1" AllowSorting="True" CssClass="tablestyle"  >
                <AlternatingRowStyle BackColor="WhiteSmoke" CssClass="altrowstyle"/>
                 <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
                <HeaderStyle Font-Bold="True" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" Height="30px"  CssClass="headerstyle" />
                <RowStyle CssClass="rowstyle" />

                <Columns>
                    <asp:BoundField DataField="tecnico" HeaderText="Tecnico" SortExpression="tecnico" />
                    <asp:BoundField DataField="ragsoc" HeaderText="Cliente" SortExpression="ragsoc" ItemStyle-Width="30%" />
                    <asp:BoundField DataField="rdescr" HeaderText="Richiesta" SortExpression="rdescr" ItemStyle-Width="50%" />
                    <asp:BoundField DataField="prior" HeaderText="Priorità" SortExpression="prior" ItemStyle-HorizontalAlign="Center" >
                    <ItemStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="app" HeaderText="Appuntamento" SortExpression="app" ItemStyle-HorizontalAlign="Center" >
                    <ItemStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="assremota" HeaderText="Remoto" SortExpression="assremota" ItemStyle-HorizontalAlign="Center"  >
                    <ItemStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="idchia" HeaderText="idchia" InsertVisible="False" ReadOnly="True" SortExpression="idchia" Visible="false" />
                    <asp:BoundField DataField="tipo" HeaderText="tipo" SortExpression="tipo" Visible="false" />
                    <asp:BoundField DataField="rforo" HeaderText="rforo" SortExpression="rforo" Visible="false" />
                    <asp:BoundField DataField="dalle" HeaderText="dalle" SortExpression="dalle" Visible="false" />
                    <asp:BoundField DataField="alle" HeaderText="alle" SortExpression="alle" visible="false"/>
                    <asp:BoundField DataField="idstato" HeaderText="idstato" SortExpression="idstato" visible="false"/>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
    <div class="clearing"></div>

<div class="tooltip">
    <i id="collapse3" runat="server" class="fa fa-caret-square-o-left fa-lg" aria-hidden="true"></i>
    <span class="tooltiptext" id="litGestioneGiorn" runat="server"></span>
    </div>
                        </ItemTemplate>

                    </asp:TemplateField>

                </Columns>

            </asp:GridView>
                </div>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="select utenti.nome as tecnico, Richieste.IDRic as idchia, richieste.descr as rdescr, ISNULL(richieste.assistremota,0) as assremota, Clienti.RagSociale as ragsoc, richieste.descr as descr, richieste.priorita as prior, richieste.tipo as tipo, richieste.rforologio as rforo, ISNULL(statoric.appuntamento,0) as app, ISNULL(statoric.oradalle,0) as dalle, ISNULL(statoric.oraalle,0) as alle, statoric.ID as idstato from clienti inner join richieste on clienti.idcliente = richieste.rfcliente inner join statoric on statoric.rfric = richieste.idric inner join stati on stati.idstato = statoric.rfstato inner join utenti on utenti.idutente=statoric.rftecnico where statoric.attuale = 1 and statoric.rfstato &lt; 14 and statoric.dataass = @data and (@tecnico = -1 or statoric.rftecnico = @tecnico) order by app desc, oraalle asc, prior desc">
                <SelectParameters>
                    <asp:ControlParameter ControlID="txtData" DefaultValue="17/01/2017" Name="data" PropertyName="Text" Type="DateTime" />
                    <asp:ControlParameter ControlID="ddlUtenti" DefaultValue="0" Name="tecnico" PropertyName="SelectedValue" Type="Int32"  />
                </SelectParameters>
            </asp:SqlDataSource>
            <p>
                &nbsp;
            </p>
            <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
    <tr>
        <td></td>
        <td align="right">
            <input runat="server" name="Stampa" type="button" class="gbutton" id="btnStampa" value="Stampa" onclick="printdiv('divChiamateGiorno');"  />
        </td>
    </tr>
</table>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

回发可能没有触发,因为控件不知道内容已更改,而且更改事件将导致控件执行回发。

我没有完全检查插件,但在jQuery ui datepicker中我使用onslect命令手动执行回调并触发更改事件:

  $('.calendarTxt').datepick({
    onSelect: function (dateText) {
      $(this).trigger('change');
    }
  });

示例

$(document).ready(function () { $('#txtData').datepick({ 
  dateFormat: 'dd/mm/yyyy',
  onSelect: function (dateText) {
    $(this).trigger('change');
  }
});

最后,如果您使用css类而不是id,则可以从主脚本页面触发此代码。这意味着您不需要将代码放在您只需要添加类的每个日期输入控件上。