marcatori archivi: jQuery

Campioni di XSLT e jQuery

2 risposte

Ho fatto un sacco di XSLT e jQuery e ho pensato di che condividere alcuni frammenti che altri possono trovare utili in futuro.

Esempio 1: Emettono semplice JavaScript / jQuery in XSLT:

<xsl:partita modello = "qualcosa" XML:Space = "preserve">

  <!– Vuoto il campo nascosto filtri amichevole di query –>
  <tipo di script = "text/javascript">
    $(documento).pronto(funzione(){
      $("#QueryFriendlyFilters").Val("vuoto");
    });
  </script di>

</xsl:modello>

Quel ' emette alcuni JavaScript che attende la pagina alla fine del caricamento (causa della $(documento).pronto(…)) e quindi imposta il valore di un campo nascosto denominato QueryFriendlyFilters per il valore letterale "Svuota".

Esempio 2: Uso <xsl:Se> per controllare "maggiore di",  "meno di", ecc.

<xsl:partita modello = "qualcosa" XML:Space = "preserve">

  <div id = "fdcAllFilters">
 
    <xsl:Se test="@Count>0">
      <span class = "fdcFilterLabel">Filtri correnti:</arco>
    </xsl:Se>

    <!– più roba succede qui. –>

</xsl:modello>

Questo frammento di codice consente di verificare se un attributo denominato "Contare" dell'elemento "qualcosa" è maggiore di zero.  il XML dietro questo sarebbe qualcosa come:”

<qualcosa Count = "5" />

Esempio 3: Scorrere tutti gli elementi, inframmezzando chiamate jQuery.

<!– Scorrere tutti i filtri e visualizzare la corretta  link. –>
<xsl:for each selezionare = "Benutzerfilter">

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

  <span class = "fdcFilterLabel"><xsl:valore di select="@FilterValue"/></arco>

  <tipo di script = "text/javascript">

    $(documento).pronto(funzione(){
        <xsl:Testo><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></xsl:Testo>\"<xsl:valore di select="@FilterValue"/>\"<xsl:Testo><![CDATA["));]]></xsl:Testo>
    });

  </script di>

</xsl:for each>

Questo frammento di codice è il più complesso e ci possono essere più facili modi per farlo.

il XML dietro questo assomiglia all'incirca a questo:

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

Scorrimento di questo frammento <UserFilter> nodi. 

In primo luogo emette un ancoraggio etichetta che quando si fa clic richiama una funzione JavaScript che è già nella pagina, "mySubmitPage" e passa il valore di un attributo <UserFilter> nodo denominato "ID". 

Emette poi qualche jQuery che attende la pagina caricare.  Quel jQuery aggiorna un campo nascosto di nome "QueryFriendlyFilters", aggiungendo il valore dell'attributo FilterValue.  Nota tutti il pazzo <xsl:Testo> e <![CDATA[ … ]]> roba.

Questo è tutto, speranza che aiuta!

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Lists.asmx, GetListItems e le cartelle

6 risposte

Stavo facendo qualche ricerca per qualcuno oggi intorno al servizio di web list.asmx fornito come parte di SharePoint 2010 (e precedenti).  Lei era in grado di ottenere gli elementi dell'elenco alla cartella principale (anche i nomi delle sotto-cartelle), ma non poteva ottenere elementi in sotto-cartelle.  Ho fatto alcuni guardando in giro su internets ed è una domanda sorprendentemente comune.  Ancora, Non ho potuto ottenere una buona risposta alla domanda semplice, "se conosco la cartella, come ottenere gli elementi nella cartella?”  Ad essere onesti, Non provato duramente tutto ciò che dal momento che ho voluto capire questo una fuori il mio per un po ' sorriso, sorridere.

Per configurare questo, Ho creato un sito denominato "Blogging scenari" e un elenco personalizzato denominato "Elenco personalizzato con Sub cartelle".  Ho poi creato cartelle denominate:

  • Anno 2005
  • Anno 2006
  • Anno 2007

Ho aggiunto alcuni articoli nella cartella "Anno 2006".  Questo è quello che sembra:

image

Il mio amico non è scrittura di codice c#, ma piuttosto utilizzando Java, così la SOAP envelope era cosa aveva bisogno.  Per ottenere che, Ho scritto un po ' di jQuery e quindi utilizzato violinista per ottenere la conversazione reale HTTP.

Ecco le pertinenti jQuery (Ho copiato il codice giù sotto se volete copiare/incollare):

image

Essi prima chiave consiste nell'includere sia un <queryOptions> e <QueryOptions> nodo.  La seconda chiave è che il <Cartella> il nodo è un URL a cui il cliente ha accesso.

Ci possono essere altri modi per arrivare a questo, ma questo ha funzionato bene per me quando si utilizza jQuery.

Ecco la SOAP envelope sopra:

<soapenv:Busta xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:Corpo>
    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Elenco personalizzato con sottocartelle</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef Name =' titolo’ />
          <FieldRef Name ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Cartella>http://demoserver1/Blogging Elenco di scenari/liste/Custom con Sub cartelle/anno 2006</Cartella>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Corpo>
</soapenv:Busta>

Un sacco di esempi e la discussione intorno a questo mi ha portato a credere che tutto quello che serve è stato <QueryOptions> e specificare un nome di cartella.  Per me, Io ho bisogno di entrambi avvolgerla all'interno <queryOptions> così come specificare un URL completo per il <Cartella> nodo.

Qui è l'installazione di AJAX jQuery:

$(documento).pronto(funzione() {
       var soapEnv =
           "<soapenv:Busta xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Corpo> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Elenco personalizzato con sottocartelle</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Name =' titolo’ /> \
                              <FieldRef Name ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Cartella>http://demoserver1/Blogging Elenco di scenari/liste/Custom con Sub cartelle/anno 2006</Cartella> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Corpo> \
           </soapenv:Busta>";

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Nidificazione all'infinito <div> Tag e jQuery

Lascia un commento

Questo mi sembra un soggetto così stravaganti, Non sono sicuro che vale davvero la pena bloggare su, ma che non ha mai smesso prima di me, quindi qui si va sorriso, sorridere

Sto lavorando su un progetto dove sto tirando alcuni dati da una ricerca, imballaggio in un messaggio XML e poi il codice XML viene trasformato in definitiva in HTML tramite XSLT.  C'è un sacco di jQuery coinvolte, un bit di che implementa alcune funzionalità di tabulazione.  Quando fa clic su una scheda (davvero, un <div>), jQuery richiama .hide() e .show() su vari DIV (il caricamento della pagina iniziale Download tutto il contenuto, quindi non ci sono in questo caso postback).

Un mucchio di ore fa, la scheda logica di commutazione ha iniziato a comportarsi in modo strano e non mostra una delle mie schede.  Io alla fine esso monitorati al fatto che internet explorer (almeno) pensava che la <div> tag nidificati lontano, molto più profondo da desiderata.Avrebbe mostrato la developer toolbar:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Infine mostrandolo è stata chiusa fino in fondo!

Così, Se ho fatto un $("# Tab1Content").Nascondi(), Sarebbe anche nascondere Tab2 e mai potuto mostrare Tab2 anche se non ha mostro Tab1.  Ho copiato e incollato il codice in visual studio e ha mostrato a tutti di rivestimento del div fino piacevolmente, proprio come avrebbero dovuto fare, guardando come questo:

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

Ho battuto la testa contro il muro per un po' e ho notato che nel codice HTML effettivo codice era generando un sacco di vuoto <div> Tag, come:

<corpo>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</corpo>

(Quanto sopra è waaaaaaaaaaaay semplificato.  I tag div vuota sono totalmente validi. Alcuni dei miei <div> Tag erano piene di contenuti, ma molti altri non hanno.  Sono venuto alla realizzazione che mio <xsl:for each> le direttive sono state che emettono la forma abbreviata div tag quando xsl:for each non ' trovare tutti i dati.  Sono costretto a un commento HTML nell'output, come illustrato:

image

 

Dopo che ho fatto che, il div in fila piacevolmente ed il mio switching tab iniziò a lavorare.

Come sempre, Spero che questo aiuta a qualcuno in un pizzico.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Ancora più jQuery–Ridimensionare un esempio di immagine

Lascia un commento

Ho ereditato una web part da vecchio fornitore di un client ed ha un problema di dimensioni immagine.  Le immagini dovrebbero essere 60×50 ma per qualche strano motivo, il fornitore originale li ha costretti in 42×42, modo da apparire schiacciati:

 

Buona immagine

Cattiva immagine

Ecco il codice (un po' semplificato):

<table class = 'esteso-outlook'>
  <thead>
    <TR>
      <TH  Width = 100′>3 Martedì</TH>
    </TR>
  </thead>

  <tbody>
    <Classe TR = 'previsioni'>
      <larghezza TD = 100′>
        <UL>
          <Classe li = 'high'>Alta: 72&deg;F</li>
          <Classe li = 'bassa'>Basso: 44&deg;F</li>
          <Classe li = 'condizione'>Sunny
            <img src =’http://deskwx.WeatherBug.com/images/forecast/icons/Localized/60×50/en/trans/cond007.png’ larghezza = 42’ altezza = 42’ Alt =” />
          </li>
        </UL>
      </TD>
    </TR>

  </tbody>

</tabella>

Avrete notato che anche se il percorso dell'immagine di sé Mostra la dimensione corretta (60×50) il fornitore originale costretto in 42×42.  Perché?  Crazy.

In ogni caso, Volevo una soluzione rapida e semplice a questo problema e mi rivolsi a jQuery.  Il trucco è stato quello di individuare tutte le appropriate <img> Tag.  Non volevo fare muck con qualsiasi altro tag img (di cui ci sono molti).  Questo po ' di jQuery ha fatto il trucco:

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

<tipo di script = "text/javascript">
     $(documento).pronto(funzione () {

         $(' li.condition > img').ogni(funzione (indice, elemento)
            {
             $(elemento).CSS("larghezza", "60"); 
             $(elemento).CSS("altezza", "50");
            });
     }); // al caricamento del documento
</script di>

Quel po ' di codice trova la collezione <li> Tag cui classe è "condizione" e <img> bambini.  Esso quindi scorre tutto ciò.  Ha lavorato come un fascino.

Probabilmente potrei a razionalizzare e, ma non sono mai stato un tipo di ragazzo di unix che risolto π A 18 precisione di cifre usando sed e awk e io non sono quel tipo se jQuery ragazzo sia sorriso, sorridere.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Prendere il controllo del vostro OK e Annulla i pulsanti

3 risposte

Ho scritto in questo articolo un po ' indietro, ma sembra che non ha link ad esso dal mio blog al momento, così qui va:

image

In questo articolo viene descritto come forzare NewForm. aspx per reindirizzare a una pagina quando l'utente fa clic su OK e un'altra pagina quando si fa clic su Annulla.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Suggerimento rapido: Aggiunta di jQuery per pagine di pubblicazione MOSS

1 Risposta

Quando aumenta la pagine di pubblicazione MOSS utilizzando jQuery, Mi ha colpito il seguente speed bump:

Errore del server in ' /’ Applicazione.

Errore del parser

Descrizione: Si è verificato un errore durante l'analisi di una risorsa necessaria per questa richiesta. Si prega di rivedere i seguenti dettagli errore parse specifici e modificare i file di origine in modo appropriato.

Messaggio di errore del parser: Sono consentiti solo controlli contenuto direttamente in una pagina di contenuto che contiene controlli contenuto.

Errore di fonte: 

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

File di origine: /_catalogs/masterpage/KCC_FacultyMember.aspx    Linea: 12

Informazioni sulla versione: Microsoft.NET Framework versione:2.0.50727.4927; ASP.NET versione:2.0.50727.4927

E ' stato abbastanza facile da risolvere (h/t al mio collega, Uday Ethirajulu).  Assicurarsi che il codice jQuery vive all'interno del "PlaceHolderAdditionalPageHead", come mostrato:

<ASP:Contenuto ContentPlaceholderID = "PlaceHolderAdditionalPageHead" runat = "server">

<script di

    Type = "text/javascript"

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

</script di>

<tipo di script = "text/javascript">

  $(documento).pronto(funzione() {

   // JQuery brillante roba va qui.

   });

</script di>

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin