taggarkiv: XSLT

XSLT- med jQuery prover

2 svar

Jag har gjort mycket av XSLT- och jQuery och trodde jag skulle dela några kodavsnitt som andra kan vara användbara i framtiden.

Exempel 1: Släpper ut enkelt JavaScript / jQuery i XSLT:

<XSL:mallen matchning = "något" XML:mellanslag = "bevara">

  <!– Tomt ut frågan vänligt filter dolt fält –>
  <skript type = "text/javascript">
    $(dokument).redo(funktionen(){
      $("#QueryFriendlyFilters").val("Tom");
    });
  </skript>

</XSL:mall>

Denna bit avger några JavaScript som väntar på sidan Slutför lastning (på grund av den $(dokument).redo(…)) och sedan anger värdet av ett dolt fält namnet QueryFriendlyFilters teckenvärde "Tom".

Exempel 2: Användning <XSL:om> att kontrollera "större än",  "mindre än", m.m..

<XSL:mallen matchning = "något" XML:mellanslag = "bevara">

  <div id = "fdcAllFilters">
 
    <XSL:om test="@Count>0">
      <span class = "fdcFilterLabel">Aktuella filter:</Spänn>
    </XSL:om>

    <!– mer grejer händer här. –>

</XSL:mall>

Ovanstående kodutdrag kontrollerar om ett attribut med namnet "Greve" av elementet "något" är större än noll.  XML-koden bakom detta skulle vara ungefär:”

<något Count = "5" />

Exempel 3: Iterera genom alla element, sammanblandningarna jQuery samtal.

<!– Iterera genom alla filter och visa rätt  Länkar. –>
<XSL:för varje Välj = "UserFilter">

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

  <span class = "fdcFilterLabel"><XSL:värde-av select="@FilterValue"/></Spänn>

  <skript type = "text/javascript">

    $(dokument).redo(funktionen(){
        <XSL:texten><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></XSL:texten>\"<XSL:värde-av select="@FilterValue"/>\"<XSL:texten><![CDATA["));]]></XSL:texten>
    });

  </skript>

</XSL:för varje>

Ovanstående kodutdrag är den mest komplicerade och det kan finnas enklare sätt att göra det.

XML-koden bakom detta ser ut ungefär så här:

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

Detta utdrag iterera genom <UserFilter> noder. 

Det första avger en fästpunkt etikett som när du klickar på åberopar en JavaScript-funktion som redan finns på sidan, "mySubmitPage" och skickar värdet av ett attribut på det <UserFilter> noden heter "ID". 

Det avger sedan några jQuery som väntar på sidan om du vill läsa in.  Att jQuery uppdaterar ett dolt fält med namnet "QueryFriendlyFilters" genom att lägga till värdet för attributet FilterValue.  Observera alla crazy <XSL:texten> och <![CDATA[ … ]]> grejer.

Det är det, hoppas det hjälper!

</slutet>

Prenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin

Oändligt kapsla <div> Märken och jQuery

Lämna ett svar

Detta verkar vara sådan en oddball-avsnittet, Jag är inte säker på att det verkligen är värt att blogga om, men det har aldrig hindrat mig innan, Så här går vi Leende

Jag arbetar med ett projekt där jag dra vissa data från en sökning, förpackning till ett XML-meddelande och sedan att XML till slut förvandlas till HTML via XSLT.  Det finns mycket av jQuery, en bit som implementerar tabbing funktionalitet.  När du klickar på en flik (Verkligen, en <div>), jQuery anropar .hide() och .show() på olika Divar (första sidan laddar hämtningar allt innehåll så det finns ingen postbacks i detta fall).

Ett gäng timmar sedan, fliken växling logik började bete sig underligt och det skulle inte visar en av Mina flikar.  Jag slutligen spårade det till faktum att internet explorer (minst) trodde att det <div> Märken som kapslade långt, mycket djupare än avsett.Verktygsfältet utvecklare skulle visa:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Slutligen visar det lades hela vägen ner här!

Så, om jag gjorde en $("# Tab1Content").Dölj(), Jag döljer också Tab2 och jag kunde aldrig visa Tab2 om jag inte visar också på Tab1.  Jag kopierade och klistrade in koden till visual studio och det visade alla den div beklädnad upp snyggt, precis som de ska göra, Titta här:

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

Jag slog mitt huvud mot väggen ett tag och märkte att koden i den faktiska HTML genererar mycket tom <div> Märken, liksom:

<organ>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</organ>

(Ovanstående är waaaaaaaaaaaay banaliseras.  Tom div-taggarna är helt giltiga. Några av mina <div> Märken var fulla av innehåll, men många fler var inte.  Jag kom till insikten att min <XSL:för varje> direktiven avger i kortform div-taggar när xsl:för varje inte "hitta några data.  Jag tvingas en HTML-kommentar till utdata, som visas:

image

 

När jag gjorde det, alla div uppradade snyggt och min fliken växling började arbeta.

Som alltid, Jag hoppas att detta hjälper någon i en nypa.

</slutet>

Prenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin

Exempel: XSLT skapa HTML-Href

1 Svar

Jag har varit gör lite XSL-grejer på sistone och trodde jag skulle sätta ihop ett prov för min framtida referens och som kan vara av värde för oss alla XSLT-ers gör en levande i Internet.

Överväga följande XML:

<FdcSearchTabsCollection Count = "2">
  <SearchTab Label = "industrin" Sorteringsordning = "00" Label = "Industri" SearchConstraints = "contenttype:Industrin" TabID = "831b2a74-98c4-4453-8061-86e2fdb22c63" />
  <SearchTab Label = "praxis" Sorteringsordning = "01" Label = "Praxis" SearchConstraints = "contenttype:PracticeGroups" TabID = "678e206b-6996-421f-9765-b0558fe1a9c0" />
</FdcSearchTabsCollection>

Följande XSL-utdrag kommer att generera en sorterad lista över href flikar:

<XSL:mallen matchning = "FdcSearchTabsCollection" XML:mellanslag = "bevara">
   
    <!– Alla"" fliken –>
    <a href = "javascript:ViewTab("Alla")">Visa alla</en>
   
    <!– Varje enskild flik –>
    <!– Iterera genom alla flikar och Visa rätt  Länkar. –>
    <XSL:för varje Välj = "SearchTab">
      <XSL:sortera select="@SortOrder"/>

      …
      <a href = "javascript:ViewTab(‘{@TabID}’)"><XSL:värdet av select="@Label"/></en>
    </XSL:för varje>

    <br /> 
   

   </XSL:mall>

Här är vad det ser ut i SharePoint:

SNAGHTML78aa2cb

 

 

</slutet>

Prenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin