Arquivos de etiquetas: jQuery

XSLT e mostras jQuery

Teño benvida a facer unha chea de XSLT e jQuery e pensei en compartir algúns tramos que os outros poden ser útiles no futuro.

Exemplo 1: Emit JavaScript simple / jQuery en XSLT:

<XSL:template match="something" xml:space = "preserve">

  <!– En branco a filtros agradable campo oculto consulta –>
  <script type="text/javascript">
    $(documento).preparado(función(){
      $("#QueryFriendlyFilters").val("empty");
    });
  </guión>

</XSL:modelo>

Este bit emite algún JavaScript que agarda a páxina para completar a carga (por mor da $(documento).preparado(...)) e, a continuación, define o valor dun campo oculto chamado QueryFriendlyFilters ao valor literal "baleiro".

Exemplo 2: Usar <XSL:se> para comprobar a "maior que",  "Less than", etc.

<XSL:template match="something" xml:space = "preserve">

  <div id="fdcAllFilters">
 
    <XSL:if test="@Count>0">
      <span class="fdcFilterLabel">Filtros actuais:</van>
    </XSL:se>

    <!– máis cousas acontece aquí. –>

</XSL:modelo>

O tramo anterior para saber se un atributo chamado "Count" do elemento "algo" é maior que cero.  O XML detrás diso sería algo como:"

<algo Count = "5" />

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

<!– Percorrer todos os filtros e amosar o correcto  Ligazóns. –>
<XSL:for-each select="UserFilter">

  <a class="FilterHref" href="javascript:mySubmitPage(‘RemoveUserFilter’,'{@ ID}')">[X]</un>

  <span class="fdcFilterLabel"><XSL:value-of select="@FilterValue"/></van>

  <script type="text/javascript">

    $(documento).preparado(función(){
        <XSL:texto><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></XSL:texto>\"<XSL:value-of select="@FilterValue"/>\"<XSL:texto><![CDATA["));]]></XSL:texto>
    });

  </guión>

</XSL:a-cada>

O tramo anterior é o máis complexo e pode haber formas máis fáciles de facer isto.

O XML detrás desa aparencia máis ou menos así:

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

Este fragmento é iterado <Filtro de usuario> nodos. 

En primeiro lugar, el emite unha marca de referencia que, cando premendo chama unha función JavaScript que xa está na páxina, "MySubmitPage" e pasa o valor dun atributo no <Filtro de usuario> no chamado "ID". 

A continuación, el emite algúns jQuery que espera a páxina cargar.  Que as actualizacións jQuery un campo oculto chamado "QueryFriendlyFilters", engadindo o valor do atributo FilterValue.  Teña en conta todo o tolo <XSL:texto> e <![CDATA[ ... ]]> cousas.

É iso aí, espero que axude!

</final>

Rexístrate para o meu blog.

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

Lists.asmx, GetListItems e carpetas

Eu estaba facendo unha investigación para alguén hoxe en todo o servizo web list.asmx seleccionado como parte do SharePoint 2010 (e máis cedo).  Ela foi capaz de obter os elementos da lista no cartafol raíz (incluíndo os nomes dos subcartafoles), pero non podía elementos en subcartafoles.  I did some looking around on the internets and it’s a surprisingly common question.  Aínda, I couldn’t get a good answer to the simple question, “if I know the folder, how do I get the items in the folder?"  To be honest, I didn’t try all that hard since I’ve wanted to figure this one out on my own for a while sorriso.

To set this up, I created a site named “Blogging Scenarios” and a custom list named “Custom List with Sub Folders”.  I then created folders named:

  • Year 2005
  • Year 2006
  • Year 2007

I added a few items to the folder “Year 2006”.  Isto é o que parece:

image

My friend isn’t writing C# code but rather using Java, so the SOAP envelope was what she really needed.  To get that, I wrote a bit of jQuery and then used fiddler to get the actual HTTP conversation.

Here’s the relevant jQuery (I copied the code down below if you want to copy/paste):

image

They first key is to include both a <queryOptions> e <QueryOptions> node.  The second key is that the <Folder> node is a URL to which the client has access.

There may be other ways to get this, but this worked well for me when using jQuery.

Here is the SOAP envelope for the above:

<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org / xabón / Sobre /’>                
  <soapenv:Corpo>
    <GetListItems xmlns=’
http://schemas.microsoft.com / SharePoint / xabón /’>
      <listName>Custom List with Sub Folders</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef Name=’Title’ />
          <FieldRef Name=’EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>
http://demoserver1/Blogging Scenarios/lists/Custom List with Sub Folders/Year 2006</Folder>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Corpo>
</soapenv:Sobre>

A lot of examples and discussion around this led me to believe that all I need was <QueryOptions> and specify a folder name.  Para min, I need to both wrap it inside <queryOptions> as well as specify a fully qualified URL for the <Folder> node.

Here’s the jQuery AJAX setup:

$(documento).preparado(función() {
       var soapEnv =
           "<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org / xabón / Sobre /’> \
               <soapenv:Corpo> \
                    <GetListItems xmlns=’http://schemas.microsoft.com / SharePoint / xabón /’> \
                       <listName>Custom List with Sub Folders</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Name=’Title’ /> \
                              <FieldRef Name=’EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Scenarios/lists/Custom List with Sub Folders/Year 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Corpo> \
           </soapenv:Sobre>";

</final>

Rexístrate para o meu blog.

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

Endlessly Nesting <p> Etiquetas e jQuery

Este semella ser un excéntrico como tema, Eu non estou seguro se é realmente paga a pena blog sobre, pero iso nunca me impediu antes de, entón aquí imos nós sorriso

Eu estou a traballar nun proxecto onde estou tirando algúns datos dunha investigación, embalaxe-lo nunha mensaxe XML e logo, que o XML é finalmente transformada HTML vía XSLT.  Hai unha morea de jQuery implicados, un pouco do que aplica algunhas funcións tabulación.  Cando fai clic nunha guía (realmente, un <p>), jQuery invoca. ocultar() e. espectáculo() en varios divs (a cargar a páxina de inicio traslada todo o contido para que non haxa mensaxes neste caso).

Unha banda de horas, a lóxica de conmutación guía comezou a comportarse de forma irregular e que non ía amosar un dos meus guías.  Eu finalmente Rastrexar-lo para o feito de que a Internet Explorer (polo menos) pensado que o <p> tags noutras citas lonxe, moito máis profundo do que Developer Toolbar intended.The mostraría:

-<div id = "Tab1Content">
  -<p>
    -<p>
      -<div id = "Tab2Content">
        -<p>
           ..............................
                   </p>  <-Por último mostrando que estaba pechado todo o camiño ata aquí!

Así, se eu fixese un $("# Tab1Content").agochar(), Gustaríame tamén de ocultar Tab2 e eu nunca podería mostrar Tab2 se eu non mostran tamén Tab1.  Copiei e colei o código en Visual Studio e mostrou toda a mucosa da div-se ben, exactamente como se supón que deberían estar facendo, dese xeito:

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

Eu bati miña cabeza contra a parede por un tempo e notei que o código HTML real estaba xerando unha chea de baleiro <p> Tag, como:

<corpo>

  <div id = "Tab1Content">

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

  </p>

  <div id = "Tab2Content">

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

  </p>

</corpo>

(A descrición anterior é waaaaaaaaaaaay simplificado.  As etiquetas div baleiros son totalmente válido. Algúns dos meus <p> marcas estaban cheos de contido, pero moitos outros non eran.  Cheguei á conclusión de que a miña <XSL:a-cada> directivas emitían as etiquetas div de forma curta, cando o XSL:for-each non "atopa algunha datos.  Forcei un comentario HTML na saída, como se mostra:

image

 

Despois de que eu fixen, toda div está aliñado ben e meu guía cambio comezou a traballar.

Como sempre, Espero que isto axude alguén nunha pitada.

</final>

Rexístrate para o meu blog.

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

JQuery aínda máis–Redimensionar un exemplo de imaxe

Eu herdei unha parte web do antigo provedor de un cliente e el ten un problema de tamaño da imaxe.  As imaxes deben ser de 60×50 pero por algún motivo estraño, o provedor orixinal forzado los 42×42, para que queden esmagados:

 

Boa Imaxe

Bad Image

Aquí está o marcado (tanto simplificada):

<mesa class = "extended-Outlook '>
  <thead>
    <tr>
      <º  width = '100′>3 Martes</º>
    </tr>
  </thead>

  <tbody>
    <tr class = 'previsión'>
      <td width = '100′>
        <ª>
          <li class = "alto">Alto: 72&ti;F</li>
          <li class = 'baixa'>Baixo: 44&ti;F</li>
          <li class = 'condición'>Soleado
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ height = '42’ alt =” />
          </li>
        </ª>
      </td>
    </tr>

  </tbody>

</mesa>

Vai notar que, aínda que o camiño cara á propia imaxe amosa a dimensión axeitada (60×50) o provedor orixinal forzado en 42×42.  ¿Por que?  Tolo.

De calquera xeito, Eu quería unha solución rápida e fácil a esta cuestión e eu me virei para jQuery.  O truco era localizar as apropiado <img> etiquetas.  Eu non quería muck sobre con calquera outras etiquetas img (de que son moitos).  Este pouco de jQuery fixo o truco:

<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></guión>

<script type="text/javascript">
     $(documento).preparado(función () {

         $(‘li.condition > img ').cada(función (índice, elemento)
           
{
             $(elemento).css("width", "60"); 
             $(elemento).css("height", "50");
            });
     }); // na carga documento
</guión>

Este anaco de código atopa a colección <li> marcas cuxa clase é "condición" e <img> nenos.  A continuación, el percorre todo isto.  Traballou como un encanto.

Eu probablemente podería acelerar isto, pero eu nunca fun un tipo de unix cara que resolveu π para 18 díxitos de precisión usando sed e awk, e eu non son ese tipo cara jQuery ou sorriso.

</final>

Rexístrate para o meu blog.

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

Asuma o control da súa botóns Aceptar e Cancelar

Escribín Neste artigo un tempo, pero parece que non conectar a el do meu blog no momento, entón aquí vai:

image

Este artigo describe como facer NewForm.aspx para redireccionar a unha páxina cando o usuario fai clic en Aceptar e unha páxina diferente, cando fai clic en Cancelar.

</final>

Rexístrate para o meu blog.

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

Consello Rápida: Engadido jQuery para Moss Publicación Páxinas

Cando mellorar Moss páxinas publising usar jQuery, Eu bati o seguinte lombo:

Server Error in ‘/’ Aplicación.


Erro do analizador

Descrición: Houbo un erro durante a análise dun recurso necesario para atender esta solicitude. Examina os detalles específicos do erro de análise e modificar o seu ficheiro de orixe apropiadamente.

Mensaxe de erro Parser: Só os controis de contido están permitidos directamente nunha páxina de contido que contén controis de contidos.

Erro de Orixe:

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

Arquivo de Orixe: /_catalogs / masterpage / KCC_FacultyMember.aspx    Liña: 12


Información sobre a versión: Microsoft. Net Framework:2.0.50727.4927; Versión de ASP.NET:2.0.50727.4927

Foi fácil o suficiente para corrixir (h / t para o meu compañeiro, Uday Ethirajulu).  Asegúrese de que o código jQuery vive dentro do "PlaceHolderAdditionalPageHead", como se mostra:

<áspide:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">

<guión

    type="text/javascript"

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

</guión>

<script type="text/javascript">

  $(documento).preparado(función() {

   // Cousas jQuery brillante vai aquí.

   });

</guión>

</final>

Rexístrate para o meu blog.

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