Tag Archives: jQuery

Amostras de XSLT e jQuery

Eu tenho feito muita de XSLT e jQuery e pensei que iria partilhar alguns trechos que outros podem ser úteis no futuro.

Exemplo 1: Emit simples do JavaScript / jQuery em XSLT:

<XSL:jogo de modelo = "algo" XML:Space = "preserve">

  <!– Espaço em branco fora da consulta amigável filtra campo oculto –>
  <script type = "text/javascript">
    $(documento).pronto(função(){
      $("#QueryFriendlyFilters").Val("vazio");
    });
  </script>

</XSL:modelo>

Esse bit emite algum JavaScript que aguarda concluir Carregando a página (devido a $(documento).pronto(…)) e, em seguida, define o valor de um campo oculto chamado QueryFriendlyFilters para o valor literal "vazio".

Exemplo 2: Utilização <XSL:se> para verificar a "maior que",  "menor que", etc.

<XSL:jogo de modelo = "algo" XML:Space = "preserve">

  <div id = "fdcAllFilters">
 
    <XSL:se test="@Count>0">
      <span class = "fdcFilterLabel">Filtros atuais:</extensão>
    </XSL:se>

    <!– mais coisas acontece aqui. –>

</XSL:modelo>

O trecho acima verifica se um atributo chamado "Contar" do elemento "algo" é maior que zero.  O XML por trás disto seria algo como:”

<algo Count = "5" />

Exemplo 3: Percorrer todos os elementos, intercalando chamadas de jQuery.

<!– Iterar em todos os filtros e exibir o correto  ligações. –>
<XSL:for-each selecione = "UserFilter">

  <uma classe = "FilterHref" href = "javascript:mySubmitPage('RemoveUserFilter','{@ ID}’)">[X]</uma>

  <span class = "fdcFilterLabel"><XSL:valor de select="@FilterValue"/></extensão>

  <script type = "text/javascript">

    $(documento).pronto(função(){
        <XSL:texto><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></XSL:texto>\"<XSL:valor de select="@FilterValue"/>\"<XSL:texto><![CDATA["));]]></XSL:texto>
    });

  </script>

</XSL:for-each>

O trecho acima é a mais complexa e pode haver maneiras mais fácil de fazê-lo.

O XML por trás disso fica mais ou menos assim:

<UserFilter ID = "123" FilterValue = "xyzzy" />

Este trecho é iterar através de <UserFilter> nós. 

Ele primeiro emite uma âncora tag que quando clicado chama uma função JavaScript que já está na página, "mySubmitPage" e passa o valor de um atributo o <UserFilter> nó chamado "ID". 

Ele, em seguida, emite algum jQuery que aguarda carregar a página.  Esse jQuery atualiza um campo oculto chamado "QueryFriendlyFilters", adicionando o valor do atributo FilterValue.  Observe o louco <XSL:texto> and <![CDATA[ … ]]> coisas.

É isso, esperança que aquilo ajuda!

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin

Lists. asmx, GetListItems e pastas

Eu estava fazendo uma pesquisa para alguém hoje em torno de serviço da web list.asmx fornecido como parte do SharePoint 2010 (e versões anteriores).  Ela foi capaz de obter os itens da lista na pasta raiz (incluindo os nomes das subpastas), mas não poderia obter itens de subpastas.  Eu fiz alguns olhando em volta na Internet e é uma questão surpreendentemente comum.  Ainda, Eu não poderia obter uma boa resposta para a pergunta simples, "se eu sei que a pasta, Como faço para obter os itens na pasta?”  Para ser honesto, Eu não tentei tudo o que dura desde que eu tenho quis figura esta um fora em meu próprio por um tempo Sorriso.

Para configurá-lo, Eu criei um site chamado "Blogging cenários" e uma lista personalizada denominada "Lista com Sub pastas personalizadas".  Em seguida, criei pastas com o nome:

  • Ano 2005
  • Ano 2006
  • Ano 2007

Eu adicionei alguns itens para a pasta "Ano 2006".  Isso é o que parece:

image

Meu amigo não é escrever código c# mas sim usando Java, assim que o envelope SOAP foi o que ela realmente precisava.  Para obter que, Eu escrevi um pouco de jQuery e então usado fiddler para começar a conversa de HTTP real.

Aqui está o jQuery pertinente (Eu copiei o código para baixo abaixo se você quiser copiar/colar):

image

Eles primeiro chave deve incluir ambos um <queryOptions> and <QueryOptions> nó.  A segunda chave é que o <Pasta> nó é uma URL para que o cliente tem acesso.

Pode haver outras maneiras de obter esta, mas isso funcionou bem para mim quando usando jQuery.

Aqui está o envelope SOAP para o acima:

<soapenv:Envelope xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:Corpo>
    <GetListItems xmlns =’
http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Lista personalizada com Sub pastas</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef FieldRef nome =' título’ />
          <FieldRef FieldRef nome ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Pasta>
http://demoserver1/Blogs Lista de cenários/listas/Custom com Sub pastas/ano 2006</Pasta>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Corpo>
</soapenv:Envelope>

Um monte de exemplos e discussão em torno deste levou-me a crer que era tudo que eu preciso <QueryOptions> e especifique um nome de pasta.  Para mim, Eu preciso tanto para envolvê-lo dentro <queryOptions> assim como especificar um URL totalmente qualificado para o <Pasta> nó.

Aqui está o programa de configuração do AJAX jQuery:

$(documento).pronto(função() {
       var soapEnv =
           "<soapenv:Envelope xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Corpo> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Lista personalizada com Sub pastas</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef FieldRef nome =' título’ /> \
                              <FieldRef FieldRef nome ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Pasta>http://demoserver1/Blogging Lista de cenários/listas/Custom com Sub pastas/ano 2006</Pasta> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Corpo> \
           </soapenv:Envelope>";

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin

Infinitamente aninhando <div> Tags e jQuery

Este parece ser um tema tão excêntrico, Não tenho certeza realmente vale a pena blogar sobre, mas que nunca deixou de me antes, Então, aqui vamos nós Sorriso

Estou trabalhando fora de um projeto onde estou puxando alguns dados de uma pesquisa, embalagem em uma mensagem de XML e, em seguida, o XML é, finalmente, transformada em HTML através do XSLT.  Há um monte de jQuery envolvido, um pouco de que implementa algumas funcionalidades das tabulações.  Quando você clica em uma guia (realmente, uma <div>), jQuery chama Hide() e show() em várias divs (o carregamento da página inicial baixa todo o conteúdo assim lá não são nenhuma postagens neste caso).

Um monte de horas atrás, na guia comutação lógica começou a se comportar de forma irregular e ele não iria mostrar um dos meus guias.  Eu finalmente seguiu para baixo para o fato de que explorer internet (pelo menos) pensa-se que o <div> marcas aninhadas até agora, muito mais profundo do que se destinam.Mostra barra de ferramentas do desenvolvedor:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Finalmente mostrando ele foi fechado todo o caminho aqui!

Assim, se eu fiz um $("# Tab1Content").esconder(), Eu também esconderia Tab2 e nunca poderia mostrar Tab2 se eu não mostrar também Tab1.  Copiei e colei o código em visual studio e ele mostrou tudo de forro da div acima agradàvel, exatamente como eles deveriam estar fazendo, parecido com isto:

-<div id = "Tab1Content">
  +<div>
  +<div>
-<div id = "Tab2Content">
  +<div>
  +<div>

Eu bati minha cabeça contra a parede por um tempo e notei que no HTML real código foi gerando um monte de vazio <div> marcas, como:

<corpo>

  <div id = "Tab1Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

  <div id = "Tab2Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

</corpo>

(O acima é waaaaaaaaaaaay simplificado.  As tags div vazia são totalmente válidas. Alguns dos meus <div> marcas estavam cheias de conteúdo, mas muitos outros não foram.  Cheguei à conclusão de que meu <XSL:for-each> directivas foram emitindo a forma curta div marcas quando o xsl:for each não ' encontrar qualquer dados.  Forcei um comentário HTML na saída, como mostrado:

image

 

Depois que eu fiz que, o div alinhado perfeitamente e meu guia comutação começou a trabalhar.

Como sempre, Espero que isso ajude alguém em um beliscão.

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin

Ainda mais jQuery–Redimensionar um exemplo de imagem

Eu herdei uma web part de fornecedor antigo do cliente e tem um problema de tamanho de imagem.  As imagens devem ser 60×50 mas por algum motivo estranho, o fornecedor original forçou-os em 42×42, para que eles tenham aparência achatados:

 

Boa imagem

Imagem ruim

Aqui está a marcação (um pouco simplificado):

<classe de tabela = 'estendido-outlook'>
  <thead>
    <TR>
      <th  largura = 100′>3 Terça-feira</th>
    </TR>
  </thead>

  <tbody>
    <Classe TR = 'tempo'>
      <largura de TD = 100′>
        <UL>
          <Classe Li = 'alta'>Alta: 72&deg;F</Li>
          <Classe Li = 'baixa'>Baixo: 44&deg;F</Li>
          <Classe Li = 'condição'>Ensolarado
            <img src =’
http://deskwx.WeatherBug.com/images/Forecast/Icons/localized/60×50/en/trans/cond007.png’ Largura = 42’ altura = 42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</tabela>

Você notará que, embora o caminho para a própria imagem mostra a dimensão adequada (60×50) o fornecedor original forçou-42.×42.  Por que?  Louco.

De qualquer forma, Eu queria uma solução rápida e fácil para esse problema e eu me virei para jQuery.  O truque foi localizar todos os apropriado <img> marcas de formatação.  Eu não queria Muck com quaisquer outras tags img (de que há muitos).  Este pouco de jQuery feito a manha:

<script type = "text/javascript" src ="http://AJAX.googleapis.com/AJAX/libs/jQuery/1.5/jQuery.min.js"></script>

<script type = "text/javascript">
     $(documento).pronto(função () {

         $(' li.condition > img').cada(função (índice, item de)
           
{
             $(item de).CSS("largura", "60"); 
             $(item de).CSS("altura", "50");
            });
     }); // carga do documento
</script>

Esse pedaço de código localiza a coleção <Li> marcas cuja classe é "condição" e <img> crianças.  Ele, em seguida, itera Tudo isso.  Trabalhou como um encanto.

Eu provavelmente poderia simplificar ele, mas eu nunca fui um o tipo de cara de unix que resolveu π Para 18 precisão de dígitos usando sed e awk e eu não sou desse tipo se jQuery cara quer Sorriso.

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin

Assuma o controle de seu OK e cancelar botões

Eu escrevi Este artigo um tempo atrás, mas parece que não ligar para ele do meu blog no momento, por isso aqui vai:

image

Este artigo descreve como forçar NewForm. aspx para redirecionar para uma página quando o usuário clica OK e outra página quando ela clica em Cancelar.

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin

Dica rápida: Adicionando jQuery para páginas de publicação do MOSS

Quando melhorar páginas de publising MOSS usando jQuery, Eu bati a seguinte lombada:

Erro de servidor em ' /’ Aplicação.


Erro do analisador

Descrição: Ocorreu um erro durante a análise de um recurso necessário para atender esta solicitação. Por favor, revise os seguintes detalhes de erro de análise específica e modificar seu arquivo de origem apropriadamente.

Mensagem de erro do analisador: Somente controles de conteúdo é admitido diretamente em uma página de conteúdo que contém controles de conteúdo.

Erro de origem:

 
Line 10: 
Line 11: 
Line 12: <script 
Line 13:     type="text/javascript" 
Line 14:     src="/jQuery/jquery-1.4.min.js"> 

Arquivo de origem: /_catalogs/MasterPage/KCC_FacultyMember.aspx    Linha: 12


Informações sobre versão: Microsoft.NET Framework versão:2.0.50727.4927; ASP.NET versão:2.0.50727.4927

Foi bastante fácil de corrigir (h/t para meu colega, Ariane de Uday).  Certifique-se de que o código jQuery vive dentro da "PlaceHolderAdditionalPageHead", como mostrado:

<ASP:Conteúdo ContentPlaceholderID = "PlaceHolderAdditionalPageHead" runat = "server">

<script

    Type = "text/javascript"

    src="/jQuery/jQuery-1.4.min.js">

</script>

<script type = "text/javascript">

  $(documento).pronto(função() {

   // Coisas de jQuery brilhante vai aqui.

   });

</script>

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin