Tag Archives: jQuery

XSLT og jQuery gratisprøver

2 svar

Jeg har gjort mye av XSLT og jQuery og tenkte jeg ville dele noen utdrag som andre vil finne nyttig i fremtiden.

Eksempel 1: Avgi enkel JavaScript / jQuery i XSLT:

<XSL:malen kamp = "noe" XML:Space = "bevare">

  <!– Viske ut det skjulte feltet for spørring-vennlig filtre –>
  <script type = "text/javascript">
    $(dokumentet).klar(funksjonen(){
      $("#QueryFriendlyFilters").Val("tom");
    });
  </skriptet>

</XSL:mal>

At bit avgir noen JavaScript som venter på side å slutten lessing (grunn av den $(dokumentet).klar(…)) og deretter Sett verdien for et skjult felt kalt QueryFriendlyFilters til den litterale verdien "tom".

Eksempel 2: Bruk <XSL:Hvis> å sjekke "større enn",  "mindre enn", osv..

<XSL:malen kamp = "noe" XML:Space = "bevare">

  <div id = "fdcAllFilters">
 
    <XSL:Hvis test="@Count>0">
      <span class = "fdcFilterLabel">Gjeldende filtre:</utstrekningen>
    </XSL:Hvis>

    <!– flere ting som skjer her. –>

</XSL:mal>

Ovenfor snippeten kontrollerer Hvis et attributt kalt "Antall" av "noe"-elementet er større enn null.  XML bak dette ville være noe sånt som:”

<noe Count = "5" />

Eksempel 3: Gå gjennom alle elementer, Interspersing jQuery samtaler.

<!– Gå gjennom alle filtre og vise riktig  koblinger. –>
<XSL:for each Velg = "UserFilter">

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

  <span class = "fdcFilterLabel"><XSL:verdien av select="@FilterValue"/></utstrekningen>

  <script type = "text/javascript">

    $(dokumentet).klar(funksjonen(){
        <XSL:tekst><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></XSL:tekst>\"<XSL:verdien av select="@FilterValue"/>\"<XSL:tekst><![CDATA["));]]></XSL:tekst>
    });

  </skriptet>

</XSL:for each>

Ovenfor snippeten er den mest kompliserte, og det kan være enklere måter å gjøre det.

XML bak dette ser omtrent slik ut:

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

Denne tekstutdrag veksle <UserFilter> noder. 

Den avgir først et anker kode som når klikket påkaller en JavaScript-funksjon som allerede finnes på siden, "mySubmitPage" og sender verdien av et attributt på den <UserFilter> kalt "ID"-noden. 

Den deretter avgir noen jQuery som venter på siden for å laste inn.  At jQuery oppdaterer et skjult felt som heter "QueryFriendlyFilters" ved å legge til verdien av attributtet FilterValue.  Legg merke til alle sprø <XSL:tekst> og <![CDATA[ … ]]> ting.

Det er det, håpe det hjelper!

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Lists.asmx, GetListItems og -mapper

6 svar

Jeg gjorde noen undersøkelser for noen i dag rundt list.asmx-webtjeneste som en del av SharePoint 2010 (og tidligere).  Hun var i stand til å få listeelementene i rotmappen (deriblant med navn på undermapper), men kunne ikke få elementer i undermapper.  Jeg gjorde noen ser på internets, og det er en overraskende vanlige spørsmål.  Ennå, Jeg kunne ikke få en bra svar pσ enkelt spørsmål, "Hvis jeg vet mappen, Hvordan får jeg elementene i mappen?”  For å være ærlig, Jeg gjorde ikke prøve alle at hardt siden jeg har ønsket å figur dette en ut på min egen for en stund Smil.

Sette opp dette, Jeg laget et nettsted som heter "Blogging scenarier" og en egendefinert liste som heter "Egendefinert liste med Sub mapper".  Jeg deretter opprettet mapper med navnet:

  • År 2005
  • År 2006
  • År 2007

Jeg har lagt noen elementer til mappen "Year 2006".  Dette er hvordan det ser ut:

image

Min venn er ikke skrive C#-kode, men heller benytter Java, SOAP-konvolutten var så hva hun virkelig trengte.  Å få det, Jeg skrev en bit av jQuery og deretter brukt fiddler for å få faktiske HTTP samtale.

Her er den aktuelle jQuery (Jeg kopierte koden ned nedenfor hvis du vil kopiere/lime):

image

De første nøkkelen er å inkludere både en <queryOptions> og <QueryOptions> noden.  Den andre nøkkelen er at den <Mappen> noden er en URL-adresse som klienten har tilgang.

Det kan være andre måter å få dette, men dette jobbet godt for meg da ved hjelp jQuery.

Her er SOAP-konvolutten for det over:

<soapenv:Konvolutt xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’>                
  <soapenv:Kroppen>
    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Egendefinert liste med Sub-mapper</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef navn =' tittel’ />
          <FieldRef navn ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mappen>http://demoserver1/Blogging Scenarier, lister, egendefinert liste med Sub-mapper/år 2006</Mappen>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Kroppen>
</soapenv:Konvolutt>

Mange eksempler og diskusjon rundt dette førte meg til å tro at alt jeg trenger var <QueryOptions> og angi et mappenavn.  For meg, Jeg trenger både brytes det i <queryOptions> i tillegg til å angi et fullstendig kvalifisert for den <Mappen> noden.

Her er oppsettet jQuery AJAX:

$(dokumentet).klar(funksjonen() {
       var soapEnv =
           "<soapenv:Konvolutt xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’> \
               <soapenv:Kroppen> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Egendefinert liste med Sub-mapper</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef navn =' tittel’ /> \
                              <FieldRef navn ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mappen>http://demoserver1/Blogging Scenarier, lister, egendefinert liste med Sub-mapper/år 2006</Mappen> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Kroppen> \
           </soapenv:Konvolutt>";

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Uendelige fuglefjell <div> Koder og jQuery

Legg igjen et svar

Dette virker som en så underlig tema, Jeg er ikke sikker på at det er virkelig verdt blogging om, men som har aldri stoppet meg før, så her gå vi Smil

Jeg arbeider på et prosjekt der jeg trekke noen data fra et søk, emballasje det i en XML-meldingen og deretter at XML er til slutt transformert til HTML via XSLT.  Det er mye av jQuery involvert, en bit av som implementerer noen tabulatornumre funksjonalitet.  Når du klikker på en kategori (virkelig, en <div>), jQuery påkaller .hide() og .show() på ulike divs (Startside belastningen laster ned alt innholdet slik at det er ingen postbacks i dette tilfellet).

En haug med timer siden, kategorien bytte logikk begynte å virke uregelmessig og det vil ikke vise en av Mine fliker.  Jeg til slutt spores det ned til faktum at internet explorer (minst) tenkte at den <div> koder som er nestet langt, langt dypere enn beregnet.Ville vise utviklerverktøylinjen:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-til slutt viser det ble lukket hele veien ned her!

Så, Hvis jeg gjorde en $("# Tab1Content").Skjul(), Jeg ville også skjule Tab2 og jeg kunne aldri vise Tab2 hvis ikke jeg også vise Tab1.  Jeg kopierte og limte inn koden i visual studio og det viste alle div's lining opp pent, akkurat som de skulle gjøre, ser ut som dette:

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

Jeg slo hodet mot veggen for en stund, og la merke til at i den faktiske HTML koden var genererer mye er tom <div> Tags, som:

<kroppen>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</kroppen>

(Dette er waaaaaaaaaaaay oversimplified.  Tom div-koder er helt gyldig. Noen av mine <div> koder var fulle av innhold, men mange flere ble ikke.  Jeg kom til realisering som min <XSL:for each> direktiver var emitting kort-skjemaet div koder når xsl:for each gjorde ikke ' finne noen data.  Jeg tvunget en HTML-kommentar i utdataene, som vist:

image

 

Etter at jeg gjorde det, alle div lined opp pent og min kategorien bytte begynte å arbeide.

Som alltid, Jeg håper dette hjelper noen i en klemme.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Ennå mer jQuery–Endre størrelsen på et bilde-eksempel

Legg igjen et svar

Jeg arvet en webdel fra en klient gamle leverandør, og den har en problem med bilde-filstørrelsen.  Bildene skal være 60×50 men for noen merkelig grunn, den originale forhandleren tvunget dem i 42×42, slik at de ser squashed:

 

God bilde

Dårlig bilde

Her er markup (noe forenklet):

<tabellen klasse = 'utvidet outlook'>
  <thead>
    <tr>
      <th  Bredde ='100′>3 Tirsdag</th>
    </tr>
  </thead>

  <tbody>
    <tr-klassen = 'Vær'>
      <TD bredde ='100′>
        <UL>
          <Li class = 'high'>Høy: 72&deg;F</Li>
          <Li class = "lav">Lav: 44&deg;F</Li>
          <Li class = "tilstand">Sunny
            <img src =’http://deskwx.WeatherBug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.PNG’ Bredde ='42’ høyde ='42’ alt =” />
          </Li>
        </UL>
      </TD>
    </tr>

  </tbody>

</tabell>

Vil du merke at selv om den banen til bildet selv viser den riktige dimensjonen (60×50) den originale forhandleren tvang det i 42×42.  hvorfor?  gal.

Allikevel, Jeg ønsket en rask og enkel løsning på dette problemet, og jeg slått til jQuery.  Trikset var å finne alle de riktige <IMG> koder.  Jeg ønsker ikke å muck med andre img-koder (som er det mange).  Denne bit av jQuery did kunsten:

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

<script type = "text/javascript">
     $(dokumentet).klar(funksjonen () {

         $(' li.condition > IMG').hver(funksjonen (index, element)
            {
             $(element).CSS("bredden", "60"); 
             $(element).CSS("høyde", "50");
            });
     }); // på dokument-Last
</skriptet>

At litt av koden finner samlingen <Li> koder som har klasse er "tilstand" og <IMG> barn.  Det går deretter gjennom alt dette.  Arbeidet like en ynde.

Jeg kunne sannsynligvis strømlinjeforme it, men jeg var aldri en type unix-fyr som løst π til 18 sifre samplepresisjon sed og awk og jeg er ikke det slag Hvis jQuery fyren enten Smil.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Ta kontroll over din OK og Avbryt-knappene

3 svar

Jeg skrev Denne artikkelen en stund tilbake, men ser ut som jeg ikke koble til den fra bloggen min på tiden, så her går:

image

Denne artikkelen beskriver hvordan du tvinger newform.aspx skal omadresseres til én side når brukeren klikker OK og en annen side når hun klikker på Avbryt.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Quick Tips: Å legge til jQuery i MOSS publiseringssider

1 Svar

Når styrke MOSS publising sider ved hjelp jQuery, Jeg traff den følgende hastighet brak:

Serverfeil inne ' /’ Program.

Parserfeil

Beskrivelse: Det oppstod en feil under analysering av en ressurs som er nødvendig for å behandle denne forespørselen. Gå gjennom følgende bestemte feildetaljer og endre konfigurasjonsfilen på riktig måte.

Parserfeilmelding: Innholdskontroller er bare tillatt i en innholdsside som inneholder Content-kontroller.

Kildefeil: 

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

Kildefilen: /_catalogs/masterpage/KCC_FacultyMember.aspx    Linje: 12

Versjonsinformasjon: Microsoft.Framework versjon:2.0.50727.4927; ASP.NET-versjon:2.0.50727.4927

Det var lett nok å fastsette (h/t til min kollega, Uday Ethirajulu).  Sørg for at jQuery koden bor inne "PlaceHolderAdditionalPageHead" som vist:

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

<skriptet

    type = text/javascript""

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

</skriptet>

<script type = "text/javascript">

  $(dokumentet).klar(funksjonen() {

   // Strålende jQuery ting her.

   });

</skriptet>

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin