jquery datepicker ms ajax updatepanel ne fonctionne pas après la publication

J'ai donc fait un peu de lecture des questions connexes et a des trucs intéressant mais n'a pas trouvé ma réponse, à tout le moins, ne pas comprendre la réponse.

Je suis très nouveau à l'AJAX, javascript et sclient côté de script en général.

J'ai été en utilisant C# asp.net pour un peu, et récemment ajouté des updatepanels de mon côté lisse donc de contrôle de l'utilisateur et les bits mis à jour de sorte que la page n'a pas été rechargé à chaque fois. Tout fonctionne à merveille et j'ai été très heureux avec elle jusqu'à ce que je décide d'essayer et d'utiliser certains JQuery.

J'ai ramassé le datepicker de ui.jquery.js ce qui est cool et fonctionne très bien sur une page normale. Mon problème arrive quand je fais une publication dans un updatepanel. Le datepicker juste arrêts de travail.

de ce que j'ai lu, j'ai besoin manuellement le fil de ce retour à la hausse après la publication.

1) je ne comprends vraiment pas pourquoi. sur ma page principale, j'ai:

<script type="text/javascript">
    $(function() {
        $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
    });
</script>

qui ramasse mes boîtes de saisie avec la mydatepickerclass attribué. et tous les travaux. Pourquoi en serait-il arrêter de travailler sur la publication.

2) Comment puis-je résoudre ce problème.... comment dois-je virer vers le haut de sorte que, après une publication dans un updatepanel, il fonctionne toujours.

Je comprends que le code peut changer sur une publication, je pense, mais comme je suis en utilisant des classes je ne sais pas ce qui ne va pas.

modifier

J'ai le code suivant dans mon usercontrol où la mise à jour se passe:

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server">
<ContentTemplate>
    <%-- Start of Company History section --%>
    <fieldset>
        <legend>Activity History</legend>

           <script type="text/javascript">
              $(function() {
              $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
              });
           </script>            

        <div>
            <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" />
            <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" />
            <label>Date To:</label><input class="mydatepickerclass" type="text" />
            <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" />
            <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" />
        </div>


    </fieldset>
</ContentTemplate>

Ne le script à l'intérieur de l'updatepanel pas rewire?

Grâce

Jon Hawkins

source d'informationauteur Jon

asp.net-ajax c#jquery updatepanel

le panneau de mise à jour va recharger le contenu de l'html. Vous aurez à écouter l'UpdatePanel à remplir et à recréer le datepicker.

Voici un exemple très simple. Ce n'est pas prendre en compte de multiples mise à jour des panneaux sur votre page ou d'éventuelles fuites de mémoire de ne pas correctement la destruction de votre datepicker.

Une autre chose à noter lors du mélange ASP.NET Ajax et jQuery être prudent, car les deux utilisent le $ dans différents contextes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
            }

        });
    </script>   
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
                onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

8

Je sais c'est vieux mais ... essayez de remplacer:

$(document).ready(function() {

avec:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

Au lieu de faire cela, il existe une alternative simple.

Dans la publication de l'élément dans le panneau de mise à jour d'ajouter ce code

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();",   True)

Et ceci en javascript

function getjquerydate() {

$(".datepicker").datepicker({
    numberOfMonths: 2,
    showButtonPanel: true,
    minDate: 1,
    dateFormat: 'dd/mm/yy',
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true
});

}

Après la publication Partielle dans les mises à jour du panneau de nouveau appel du datepicker fonction

$(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
        function EndRequestHandler(sender, args) {
            $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
        }
    });

Vous pouvez faire comme ceci. dans ce cas, il fonctionnera toujours ;))

"jQuery UI Datepicker ne fonctionne pas après l'ajax partielle publication"

Place d'un gestionnaire de script et un panneau de mise à jour sur la page.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
 </ContentTemplate>
</asp:UpdatePanel>

Maintenant, placez une zone de texte et un bouton à l'intérieur du contrôle updatepanel.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
     <div style="font-family: Arial; font-size: small;">
        Select Date :
        <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">           
        </asp:TextBox>
     </div>
     <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack"  
       OnClick="btnAjax_Click" />
  </ContentTemplate>
</asp:UpdatePanel>

Maintenant lier le contrôle datepicker avec la zone de texte.

<script type="text/javascript" language="javascript">
$(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
}); 
<script>

Maintenant créer un serveur side cliquez sur le bouton qui va provoquer un ajax partielle de publication.

protected void btnAjax_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(1000);
}

Sur l'exécution de la page, u serait quelque chose comme ceci

jquery datepicker ms ajax updatepanel ne fonctionne pas après la publication

Cliquez sur datepicker. Le datepicker est ouvert et la date sélectionnée devient la valeur de la zone de texte.
Maintenant, cliquez sur le bouton. Du côté serveur, cliquez sur le bouton est appelé et maintenant, vous verrez quelque chose comme ceci.

jquery datepicker ms ajax updatepanel ne fonctionne pas après la publication

Le datepicker bouton a disparu.Alors, que faisons-nous maintenant pour qu'il fonctionne à l'intérieur de l'ajax. Voir code ci-dessous.

<script type="text/javascript" language="javascript">
function pageLoad(sender, args)
{
  $(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
  }); 
}
</script>

pageLoad() la fonction est disponible en JavaScript si vous utilisez ASP.NET ajax. AJAX automatiquement les fils jusqu'côté client fonction nommée pageLoad() comme une Application.Gestionnaire de chargement

Lien Source Des Crédits

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

Sys.Application.add_load(LoadHandler);

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() {
    $(document).ready(function () {
        $(".datepicker").datepicker({
            dateFormat: "M d, yy",
            changeMonth: true,
            changeYear: true,
            onSelect: function (dateText, ubst) { your code here... }
        }).val();
    });
}

0

Je sais que c'est un vieux post, mais je viens de rencontrer ce problème et trouvé la réponse dans ce fil. J'espère que ça peut aider toute personne qui rencontre ce.

Je n'ai pas mis tout le script côté client, dans le code derrière. Je ne mets ce code:
```
       <script type="text/javascript">       
         Sys.WebForms.PageRequestManager.getInstance().add_pageL
              Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

              function EndRequestHandler() {
                  $('.default-date-picker').datepicker({
                      format: 'dd-mm-yyyy'
                  });
              }

             });
             </script>  
```
Le code ci-dessus doivent être à l'intérieur de la section de corps et non pas le chef de section. J'ai essayé de le mettre avant et après le gestionnaire de script, ou à l'intérieur et à l'extérieur de l'UpdatePanel et n'a trouvé aucun problème avec toutes les options. Donc, tant que ce code est dans le corps de l'article, elle travail pour moi.

Assurez-vous de changer votre défini datetimepicker classe. Le mien est "par défaut-date-picker" dans le fichier js.
-1

Je sais que ce post est vieux, mais il suffit de placer votre datepicker de jquery à l'extérieur du panneau de mise à jour - faut-il travailler à 100%...

Vous devez vous connecter pour publier un commentaire.