none
JQuery Recarregar apos postback RRS feed

  • Pergunta

  • Bom dia!!!

    Estou com um problema com JQuery que some quando a página faz um postback. Para solucionar o problema eu adicionei o código jquery toda vez que realizar o postback dessa forma:

            js_Script.Append("$(function() {")
            js_Script.Append("$.fn.jPicker.defaults.images.clientPath = '../../Imagens/jPicker/';")
            js_Script.Append("var LiveCallbackElement = $('#Live'),")
            js_Script.Append("LiveCallbackButton = $('#LiveButton');")
            js_Script.Append("$('#Inline').jPicker({ window: { title: 'Inline Example'} });")
            js_Script.Append("$('#Ger_Fundo_Cor').jPicker({ window: { expandable: true, title: 'Expandable Example'} },")
            js_Script.Append("function() {")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').css('background-color', $.jPicker.List[0].color.active.val('hex'));")
            js_Script.Append("});")
            js_Script.Append("$('#Ger_Cor_Padrao_1').jPicker({ window: { expandable: true, title: 'Expandable Example'} },")
            js_Script.Append("function() {")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_1').attr('value', $.jPicker.List[1].color.active.val('hex'));")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_1').css('background-color', $.jPicker.List[1].color.active.val('hex'));")
            js_Script.Append("});")
            js_Script.Append("$('#Ger_Cor_Padrao_2').jPicker({ window: { expandable: true, title: 'Expandable Example'} },")
            js_Script.Append("function() {")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_2').attr('value', $.jPicker.List[2].color.active.val('hex'));")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_2').css('background-color', $.jPicker.List[2].color.active.val('hex'));")
            js_Script.Append("});")
            js_Script.Append("$('#Alpha').jPicker({ window: { expandable: true, title: 'Alpha (Transparency) Example)', alphaSupport: true }, color: { active: new $.jPicker.Color({ ahex: '99330099' })} });")
            js_Script.Append("$('#Binded').jPicker({ window: { title: 'Binded Example' }, color: { active: new $.jPicker.Color({ ahex: '993300ff' })} },")
            js_Script.Append("function() {")
            js_Script.Append("alert('Cancel Button Clicked 1');")
            js_Script.Append("alert($.jPicker.List[0].color.active.val('hex'));")
            js_Script.Append("$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));")
            js_Script.Append("});")
    
            js_Script.Append("$('.Multiple').jPicker({ window: { title: 'Multiple Binded Example'} });")
            js_Script.Append("$('#Callbacks').jPicker(")
            js_Script.Append("{ window: { title: 'Callback Example'} },")
            js_Script.Append("function(color, context) {")
            js_Script.Append("var all = color.val('all');")
            js_Script.Append("alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') + ' - alpha: ' + (all && all.a + '%' || 'none'));")
            js_Script.Append("$('#Commit').css({ backgroundColor: all && '#' + all.hex || 'transparent' });")
            js_Script.Append("},")
            js_Script.Append("function(color, context) {")
            js_Script.Append("if (context == LiveCallbackButton.get(0)) alert('Color set from button');")
            js_Script.Append("var hex = color.val('hex');")
            js_Script.Append("LiveCallbackElement.css({ backgroundColor: hex && '#' + hex || 'transparent' });")
            js_Script.Append("},")
            js_Script.Append("function(color, context) {")
            js_Script.Append("alert('Cancel Button Clicked');")
            js_Script.Append("});")
            js_Script.Append("$('#LiveButton').click(")
            js_Script.Append("function() {")
            js_Script.Append("$.jPicker.List[7].color.active.val('hex', 'e2ddcf', this);")
            js_Script.Append("});")
            js_Script.Append("$('#AlterColors').jPicker({ window: { title: 'Color Interaction Example'} });")
            js_Script.Append("$('#GetActiveColor').click(")
            js_Script.Append("function() {")
            js_Script.Append("alert($.jPicker.List[8].color.active.val('ahex'));")
            js_Script.Append("});")
            js_Script.Append("$('#GetRG').click(")
            js_Script.Append("function() {")
            js_Script.Append("var rg = $.jPicker.List[8].color.active.val('rg');")
            js_Script.Append("alert('red: ' + rg.r + ', green: ' + rg.g);")
            js_Script.Append("});")
            js_Script.Append("$('#SetHue').click(")
            js_Script.Append("function() {")
            js_Script.Append("$.jPicker.List[8].color.active.val('h', 133);")
            js_Script.Append("});")
            js_Script.Append("$('#SetValue').click(")
            js_Script.Append("function() {")
            js_Script.Append("$.jPicker.List[8].color.active.val('v', 38);")
            js_Script.Append("});")
            js_Script.Append("$('#SetRG').click(")
            js_Script.Append("function() {")
            js_Script.Append("$.jPicker.List[8].color.active.val('rg', { r: 213, g: 118 });")
            js_Script.Append("});")
            js_Script.Append("});")
    
            ScriptManager.RegisterStartupScript(Me, Me.Page.GetType, "jQuery", js_Script.ToString, True)
    

    Funcionou em parte, porque apesar do componente jquery sumir apos o postback esse codigo faz ele voltar, porem parece de de alguma forma ele permanece no browser e para de funcionar corretamente apos o 2º postback.

    Teria uma forma de eu limpar totalmente qualquer jquery que esteja no browser antes de recarregá-lo? Ou teria alguma outra alternativa?

    Obrigado!!

    terça-feira, 16 de outubro de 2012 14:55

Respostas

  • Em aplicações  com UpdatePanel e é necessário registrar novamente todos os scripts clientside após o PostBack dentro do UpdatePanel. 

    Tente isso:

     1. Crie um arquivo js separado (por exemplo jpicker.js)
     2. Coloque todo o seu script dentro de uma função única.

        Exemplo:    

    function setup_jPicker()
    {
       	$.fn.jPicker.defaults.images.clientPath = '../../Imagens/jPicker/';
    	var LiveCallbackElement = $('#Live'),
    	LiveCallbackButton = $('#LiveButton');
    	$('#Inline').jPicker({ window: { title: 'Inline Example'} });
    
    	// Restante de todo o codigo...
    }

     3. Registre o arquivo no javascript na sua página  
     4. Registre a chamada da função no evento OnInit da página  

    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);
      this.Page.ClientScript.RegisterClientScriptBlock(
         this.GetType(), 
         "jPicker", 
         "setup_jPicker()", true);
    }

    Com isso, seu script sempre será registrado na página após o PostBack.

    Uma outra possibilidade é registrar a chamada no ClientSide mesmo, utilizando os objetos nativos. Veja:

    <script type="text/javascript">
       var prm = Sys.WebForms.PageRequestManager.getInstance();
       prm.add_endRequest(EndRequestHandler);
       function EndRequestHandler(sender, args) { setup_jPicker(); }
    </script>

    Entretanto essa segunda opção somente irá funcionar para PostBack's feitos dentro de UpdatePanel.

    ou conforme citado pelo Guilherme no post acima.

    Abraços


    Washington Luíz

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:02
    terça-feira, 16 de outubro de 2012 17:17
  • Vitor,

    Pelo primeiro post não estava claro que ele usava Update Panel.

    Davi,

    Você pode tanto usar a solução do Vitor quanto a do Murilo, ambas funcionam.

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:03
    terça-feira, 16 de outubro de 2012 17:23
  • Boa tarde!

    A sugestão do Murilo funcionou, porem esta sem o UpdatePanel e a pagina é recarregada.

    A sugestão do Vitor funcionou, porem ocorre o mesmo problema de parecer existir 2 componentes. Como recupero o valor do componente com esse comando javascript:

     function() {
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').css('background-color', $.jPicker.List[0].color.active.val('hex'));
              });

    Quando ele é recarregado o index nao é mais o ZERO ... 

    jPicker.List[0].color.active.val('hex')

    Davi se você estiver registrando o script através do método RegisterStartupScript, retire ele e faça o teste.

    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:02
    quarta-feira, 17 de outubro de 2012 19:12

Todas as Respostas

  • Como assim o JQuery some?

    Como você está incluindo ele?


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    terça-feira, 16 de outubro de 2012 15:22
  • Olá Davi. Sua explicação está um pouco confusa. 

    "JQuery que some quando a página faz um postback"

    O que some? O controle? A referencia do script? Algum plugin que voce está usando?

    "Funcionou em parte, porque apesar do componente jquery sumir apos o postback esse codigo faz ele voltar, porem parece de de alguma forma ele permanece no browser e para de funcionar corretamente apos o 2º postback."

    Voce está usando UpdatePanel? Como este jQuery está registrado na sua página? Via code-behind? Via HTML?

    Se possível, poste o código para que possamos dar uma olhada e entender melhor o que está acontecendo, ok?

    Abraços.


    Washington Luíz

    terça-feira, 16 de outubro de 2012 15:51
  • Pelo que eu vi você não usa variáveis ao registrar esse script, ele realmente precisa ser registrado via servidor?

    terça-feira, 16 de outubro de 2012 16:00
  • Vou tentar mostrar todo o comportamento que ocorre:

    Eu fiz da forma normal que sempre utilizo:

    HEAD da página:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <link rel="Stylesheet" type="text/css" href="../../App_CSS/jPicker/jpicker-1.1.6.min.css" />
        <link rel="Stylesheet" type="text/css" href="../../App_CSS/jPicker/jPicker.css" />
        <script src="../../App_Scripts/jPicker/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="../../App_Scripts/jPicker/jpicker-1.1.6.min.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            $(function() {
                $.fn.jPicker.defaults.images.clientPath = '../../Imagens/jPicker/';
                var LiveCallbackElement = $('#Live'),
                LiveCallbackButton = $('#LiveButton');
                $('#Inline').jPicker({ window: { title: 'Inline Example'} });
                $('#Ger_Fundo_Cor').jPicker({ window: { expandable: true, title: 'Expandable Example'} },
              function() {
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').css('background-color', $.jPicker.List[0].color.active.val('hex'));
              });
                $('#Ger_Cor_Padrao_1').jPicker({ window: { expandable: true, title: 'Expandable Example'} },
              function() {
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_1').attr('value', $.jPicker.List[1].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_1').css('background-color', $.jPicker.List[1].color.active.val('hex'));
              });
                $('#Ger_Cor_Padrao_2').jPicker({ window: { expandable: true, title: 'Expandable Example'} },
              function() {
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_2').attr('value', $.jPicker.List[2].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_2').css('background-color', $.jPicker.List[2].color.active.val('hex'));
              });
                $('#Alpha').jPicker({ window: { expandable: true, title: 'Alpha (Transparency) Example)', alphaSupport: true }, color: { active: new $.jPicker.Color({ ahex: '99330099' })} });
                $('#Binded').jPicker({ window: { title: 'Binded Example' }, color: { active: new $.jPicker.Color({ ahex: '993300ff' })} },
              function() {
                  alert('"Cancel" Button Clicked 1');
                  alert($.jPicker.List[0].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
              });
    
                $('.Multiple').jPicker({ window: { title: 'Multiple Binded Example'} });
                $('#Callbacks').jPicker(
              { window: { title: 'Callback Example'} },
              function(color, context) {
                  var all = color.val('all');
                  alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') + ' - alpha: ' + (all && all.a + '%' || 'none'));
                  $('#Commit').css({ backgroundColor: all && '#' + all.hex || 'transparent' });
              },
              function(color, context) {
                  if (context == LiveCallbackButton.get(0)) alert('Color set from button');
                  var hex = color.val('hex');
                  LiveCallbackElement.css({ backgroundColor: hex && '#' + hex || 'transparent' });
              },
              function(color, context) {
                  alert('"Cancel" Button Clicked');
              });
                $('#LiveButton').click(
              function() {
                  $.jPicker.List[7].color.active.val('hex', 'e2ddcf', this);
              });
                $('#AlterColors').jPicker({ window: { title: 'Color Interaction Example'} });
                $('#GetActiveColor').click(
              function() {
                  alert($.jPicker.List[8].color.active.val('ahex'));
              });
                $('#GetRG').click(
              function() {
                  var rg = $.jPicker.List[8].color.active.val('rg');
                  alert('red: ' + rg.r + ', green: ' + rg.g);
              });
                $('#SetHue').click(
              function() {
                  $.jPicker.List[8].color.active.val('h', 133);
              });
                $('#SetValue').click(
              function() {
                  $.jPicker.List[8].color.active.val('v', 38);
              });
                $('#SetRG').click(
              function() {
                  $.jPicker.List[8].color.active.val('rg', { r: 213, g: 118 });
              });
            });
        </script>
    </asp:Content>
    

    No Content referente ao conteúdo do site eu coloque o span que gere uma palheta para o usuário selecionar a cores.

    <span id="Ger_Fundo_Cor"></span>

    Quando roda o site, esse span juntamente com o jquery que estão dentro de uma tabcontainer e um updatepanel. Quando carrega a pagina pela primeira vez, esta tudo la funcionando corretamente. Quando executa um postback, a palheta de cores simplesmente some. Eu resolvi isso adicionando o codigo jquery no codigo, porem ao selecionar a cor estava selecionando a cor do primeiro componente carregado, e nao do segundo.

    É isso que esta ocorrendo, espero ter conseguido explicar.

    Obrigado!

    terça-feira, 16 de outubro de 2012 16:26
  • Não sei se entendi muito bem mas se você está usando o updatepanel o problema já fica mais claro..

    Quando o update panel faz uma ação ele acaba modificando completamente todo o html que está dentro dele, ou seja, se você modificou o html com javascript no load da página essas alterações vão ser perdidas quando o updatepanel faz a requisição ajax.

    A melhor solução é parar de usar ele..

    A outra é reatribuir as configurações que você fez no load da página.

    Tenta colocar aquele seu js dentro de um método só e quando a página é carregada ou o updatepanel faz algo você chama o método.


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    terça-feira, 16 de outubro de 2012 16:38
  • ...que estão dentro de uma tabcontainer e um updatepanel....

    Guilherme,

    Toda vez que ocorre o postback, todos os elementos de dentro do update panel são gerados novamente, como se fossem novos, toda a estrutura DOM é refeita dentro daquele update panel. Logo o script que consta no head não sera aplicado novamente. Tente usar da função pageLoad do javascript para aplicar o seu jQuery. Exemplo:

    <script type="text/javascript">
    function pageLoad()
    {
       $(function() {
         //Seu código....
       });
    }
    </script>

    Veja este artigo para mais detalhes:
    http://encosia.com/document-ready-and-pageload-are-not-the-same/



    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    terça-feira, 16 de outubro de 2012 16:58
  • Em aplicações  com UpdatePanel e é necessário registrar novamente todos os scripts clientside após o PostBack dentro do UpdatePanel. 

    Tente isso:

     1. Crie um arquivo js separado (por exemplo jpicker.js)
     2. Coloque todo o seu script dentro de uma função única.

        Exemplo:    

    function setup_jPicker()
    {
       	$.fn.jPicker.defaults.images.clientPath = '../../Imagens/jPicker/';
    	var LiveCallbackElement = $('#Live'),
    	LiveCallbackButton = $('#LiveButton');
    	$('#Inline').jPicker({ window: { title: 'Inline Example'} });
    
    	// Restante de todo o codigo...
    }

     3. Registre o arquivo no javascript na sua página  
     4. Registre a chamada da função no evento OnInit da página  

    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);
      this.Page.ClientScript.RegisterClientScriptBlock(
         this.GetType(), 
         "jPicker", 
         "setup_jPicker()", true);
    }

    Com isso, seu script sempre será registrado na página após o PostBack.

    Uma outra possibilidade é registrar a chamada no ClientSide mesmo, utilizando os objetos nativos. Veja:

    <script type="text/javascript">
       var prm = Sys.WebForms.PageRequestManager.getInstance();
       prm.add_endRequest(EndRequestHandler);
       function EndRequestHandler(sender, args) { setup_jPicker(); }
    </script>

    Entretanto essa segunda opção somente irá funcionar para PostBack's feitos dentro de UpdatePanel.

    ou conforme citado pelo Guilherme no post acima.

    Abraços


    Washington Luíz

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:02
    terça-feira, 16 de outubro de 2012 17:17
  • Vitor,

    Pelo primeiro post não estava claro que ele usava Update Panel.

    Davi,

    Você pode tanto usar a solução do Vitor quanto a do Murilo, ambas funcionam.

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:03
    terça-feira, 16 de outubro de 2012 17:23
  • Boa tarde!

    A sugestão do Murilo funcionou, porem esta sem o UpdatePanel e a pagina é recarregada.

    A sugestão do Vitor funcionou, porem ocorre o mesmo problema de parecer existir 2 componentes. Como recupero o valor do componente com esse comando javascript:

     function() {
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').css('background-color', $.jPicker.List[0].color.active.val('hex'));
              });

    Quando ele é recarregado o index nao é mais o ZERO ... 

    jPicker.List[0].color.active.val('hex')

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:03
    • Não Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:03
    terça-feira, 16 de outubro de 2012 17:35
  • Boa tarde!

    A sugestão do Murilo funcionou, porem esta sem o UpdatePanel e a pagina é recarregada.

    A sugestão do Vitor funcionou, porem ocorre o mesmo problema de parecer existir 2 componentes. Como recupero o valor do componente com esse comando javascript:

     function() {
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
                  $('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').css('background-color', $.jPicker.List[0].color.active.val('hex'));
              });

    Quando ele é recarregado o index nao é mais o ZERO ... 

    jPicker.List[0].color.active.val('hex')

    Davi se você estiver registrando o script através do método RegisterStartupScript, retire ele e faça o teste.

    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    • Marcado como Resposta DaviSaba sexta-feira, 19 de outubro de 2012 18:02
    quarta-feira, 17 de outubro de 2012 19:12
  • Boa tarde!!!

    Eu fiz o seguinte. Usei alguns UpdatePanel onde precisava e deixei os objetos jquery fora do updatepanel e funcionou.

    Agradeço a ajuda de todos.

    sexta-feira, 19 de outubro de 2012 18:02