chamar javascrippt com updatepanel

Question

Olá,

Como posso chamar o javascript com o updatepanel.

tenho este codigo em javascript, mas depois de executar um botao que está dentro de um updatepanel, o javascript não funciona.

javascript calendario

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript"><!--
    $(function () {
        $('input').filter('.datepicker2').datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: 'Images/cal.gif',
            buttonText: "Mostrar calendário",
            buttonImageOnly: true
        });
    });
    </script>
      <script type="text/javascript">
          function HideLabel(labelID) {
              setTimeout("HideLabelHelper('" + labelID + "');", 20000);
          }
          function HideLabelHelper(labelID) {
              document.getElementById(labelID).style.display = "none";
          }
    </script>

Answer 1

Olá Diogo,

Por conta do UpdatePanel renderizar apenas uma parte de do seu HTML de forma assíncrona, o jQuery não entende que houve um post para o servidor, sendo que quem gerenciar estas requisições é o ScriptManager, não executando novamente seu jQuery para aplicar o DatePicker.

Use da função pageLoad para força este recarregamento ou registre uma função no endRequest para executar seu jQuery novamente apos uma requisição.

Exemplo:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
    function pageLoad() {
    $(function () {
        $('input').filter('.datepicker2').datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: 'Images/cal.gif',
            buttonText: "Mostrar calendário",
            buttonImageOnly: true
        });
    });
   }
    </script>
      <script type="text/javascript">
          function HideLabel(labelID) {
              setTimeout("HideLabelHelper('" + labelID + "');", 20000);
          }
          function HideLabelHelper(labelID) {
              document.getElementById(labelID).style.display = "none";
          }
      
    </script>

<script>
//Registrando função que sera disparada toda vez que houve uma requisição onde possua UpdatePanel    
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(recarregarJquery);        
        
        function recarregarJquery(sender, args) {
            //Seus scripts jQuery aqui :D
        }


</script>

---

Vitor Mendes | http://www.vitormendes.com.br/

"Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)

Answer 2

Tenho chamar a funçao

recarregarJquery?

Answer 3

Use da primeira técnica com a função pageLoad:

function pageLoad() {
         //Seu jQuery aqui dentro...
}

---

Vitor Mendes | http://www.vitormendes.com.br/

"Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)

Answer 4

Não está a funcionar

Answer 5

Olá Diogo,

De que maneira você implementou as sugestões citadas acima ?

---

Vitor Mendes | http://www.vitormendes.com.br/

"Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)

Answer 6

assim

 <script type="text/javascript">
        //Registrando função que sera disparada toda vez que houve uma requisição onde possua UpdatePanel    
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(recarregarJquery);
        //Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(recarregarJquery);
        function recarregarJquery(sender, args) {
            $(function () {
                $('input').filter('.datepicker2').datepicker({
                    dateFormat: 'dd/mm/yy',
                    dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
                    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
                    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
                    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    nextText: 'Próximo',
                    prevText: 'Anterior',
                    changeMonth: true,
                    changeYear: true,
                    showOn: 'button',
                    buttonImage: 'Images/cal.gif',
                    buttonText: "Mostrar calendário",
                    buttonImageOnly: true
                });
            });
        }


</script>

Answer 7

Diogo,

Ficaria desta maneira.

Usando o endRequest:

 <script type="text/javascript">
        //Registrando função que sera disparada toda vez que houve uma requisição onde possua UpdatePanel    
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(recarregarJquery);
        //Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(recarregarJquery);

$(function () {
     recarregarJquery();
});
        function recarregarJquery(sender, args) {
                $('input').filter('.datepicker2').datepicker({
                    dateFormat: 'dd/mm/yy',
                    dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
                    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
                    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
                    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    nextText: 'Próximo',
                    prevText: 'Anterior',
                    changeMonth: true,
                    changeYear: true,
                    showOn: 'button',
                    buttonImage: 'Images/cal.gif',
                    buttonText: "Mostrar calendário",
                    buttonImageOnly: true
                });
        }

</script>

Ou usar da função pageLoad:

<script type="text/javascript">

        function pageLoad() {
            $(function () {
                $('input').filter('.datepicker2').datepicker({
                    dateFormat: 'dd/mm/yy',
                    dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
                    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
                    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
                    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    nextText: 'Próximo',
                    prevText: 'Anterior',
                    changeMonth: true,
                    changeYear: true,
                    showOn: 'button',
                    buttonImage: 'Images/cal.gif',
                    buttonText: "Mostrar calendário",
                    buttonImageOnly: true
                });
            });
        }
</script>

---

Vitor Mendes | http://www.vitormendes.com.br/

"Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)

Answer 8

Só funcionou com o pagLoad. Obrg :)

Answer 9

Como fica com mais do que 1