Tag Archives: XSLT

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

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

Eksempel: XSLT opprette HTML-Href

1 Svar

Jeg har gjort litt av XSL ting i det siste og tenkte jeg skulle sette sammen et utvalg for min fremtidig referanse og som kan være av verdi for oss alle XSLT-ers å lage en levende i internets.

Vurder følgende XML:

<FdcSearchTabsCollection-Count = "2">
  <SearchTab Label = "industri" SortOrder = "00" Label = "Industries" SearchConstraints = "contenttype:Industri" TabID = "831b2a74-98c4-4453-8061-86e2fdb22c63" />
  <SearchTab Label = "praksis" SortOrder = "01" Label = "Praksis" SearchConstraints = "contenttype:PracticeGroups" TabID = "678e206b-6996-421f-9765-b0558fe1a9c0" />
</FdcSearchTabsCollection>

Følgende XSL tekstutdrag vil generere en sortert liste over hrefs faner:

<XSL:mal kamp = "FdcSearchTabsCollection" XML:Space = "bevare">
   
    <!– "Alt" kategorien –>
    <a href = "javascript:ViewTab(' Den)">Vis alle</en>
   
    <!– Hver enkelt kategori –>
    <!– Gå gjennom alle kategoriene og vise riktig  koblinger. –>
    <XSL:for hver Velg = "SearchTab">
      <XSL:sortere select="@SortOrder"/>

      …
      <a href = "javascript:ViewTab(‘{@TabId}’)"><XSL:verdien av select="@Label"/></en>
    </XSL:for each>

    <br /> 
   

   </XSL:mal>

Her er hva det ser ut i SharePoint:

SNAGHTML78aa2cb

 

 

</slutten>

Abonner på bloggen min.

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