taggarkiv: jQuery

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

Lists.asmx, GetListItems och mappar

6 svar

Jag gjorde lite forskning för någon dag runt webbtjänsten list.asmx som ingår i SharePoint 2010 (och tidigare). Hon kunde få listobjekten i rotmappen (inklusive namnen på undermappar), men det gick inte att hämta objekt i undermappar. Jag gjorde några titta på Internet och det är en förvånansvärt gemensamma fråga. Ännu, Jag kunde inte få ett bra svar på den enkla frågan, "om jag vet att mappen, Hur skaffar jag objekten i mappen?” Att vara ärlig, Jag försöker inte allt hårt eftersom jag har ville bild man ut på min egen ett tag Leende .

Att ställa in här, Jag har skapat en webbplats med namnet "Blogga Scenarios" och en anpassad lista med namnet "Anpassad lista med Sub mappar". Mappar med följande namn skapas:

År 2005
År 2006
År 2007

Jag lade till ett par artiklar till mappen "År 2006". Det är vad det ser ut:

Min vän inte skriva C#-kod utan snarare använda Java, SOAP-kuvertet var alltså det hon verkligen behövs. Att få som, Jag skrev en bit av jQuery och sedan används Spelman för att få http-samtalet.

Här är den relevanta jQuery (Jag kopierade koden anges nedan om du vill kopiera och klistra in):

De första nyckeln är omfatta både en <queryOptions> och <QueryOptions> nod. Den andra nyckeln är att den <Mappen> noden är en URL-adress som klienten har tillgång.

Det kan finnas andra sätt att få detta, men detta fungerat bra för mig när du använder jQuery.

Här är SOAP-kuvertet för ovanstående:

<soapenv:Kuvert xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>
<soapenv:Organ>
    <GetListItems xmlns =’http://schemas.microsoft.com/SharePoint/SOAP/’>
      <Listnamn>Anpassad lista med undermappar</Listnamn>
      <viewFields>
        <ViewFields>
          <FieldRef namn = "titel’ />
          <FieldRef namn ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mappen>http://demoserver1/Blogging Scenarier/listor/Custom lista med Sub mappar/år 2006</Mappen>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
</soapenv:Organ>
</soapenv:Kuvert>

En hel del exempel och diskussion kring detta ledde mig att tro att allt jag behöver var <QueryOptions> och ange ett mappnamn. För mig, Jag behöver både radbryta det inuti <queryOptions> samt ange en fullständig URL för den <Mappen> nod.

Här är jQuery AJAX installationsprogrammet:

$(dokument).redo(funktionen() {
       var soapEnv =
           "<soapenv:Kuvert xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Organ> \
                    <GetListItems xmlns =’http://schemas.microsoft.com/SharePoint/SOAP/’> \
                       <Listnamn>Anpassad lista med undermappar</Listnamn> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef namn = "titel’ /> \
                              <FieldRef namn ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mappen>http://demoserver1/Blogging Scenarier/listor/Custom lista med Sub mappar/år 2006</Mappen> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Organ> \
           </soapenv:Kuvert>";

</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:

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

Ännu mer jQuery–Ändra storlek på en bild-exempel

Lämna ett svar

Jag ärvt en webbdel från en gammal klienttillverkaren och har ett imageproblem storlek. Bilderna ska vara 60×50 men av någon udda anledning, den ursprungliga leverantören tvingade dem till 42×42, så det ser ut squashed:

Bra bild	Dålig bild

Här är markering (något förenklat):

<tabell klass = "extended-outlook">
<thead>
    <TR>
      <TH bredd = 100′>3 Tisdag</TH>
    </TR>
</thead>

<tbody>
    <TR klass = "prognos">
      <TD bredd = "100′>
        <UL>
          <Li klass = 'hög'>Hög: 72°F</Li>
          <Li klass = "låg">Låg: 44°F</Li>
          <Li klass = "villkor">Soliga
            <img src =’http://deskwx.WeatherBug.com/images/Forecast/icons/Localized/60×50/en/trans/cond007.PNG’ Bredd ='42’ höjd ='42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

</tbody>

</tabell>

Du ska notera att även om den sökvägen till själva bilden visar korrekt (60×50) den ursprungliga leverantören tvingade det 42×42. Varför? Galen.

Hur som helst, Jag ville ha en snabb och enkel lösning på denna fråga och jag vände sig till jQuery. Tricket var att hitta alla de tillämpliga <IMG> taggar. Ville inte dölja med andra img-taggar (som finns det många). Denna bit av jQuery gjorde tricket:

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

<skript type = "text/javascript">
     $(dokument).redo(funktionen () {

         $("li.condition > IMG ").varje(funktionen (index, objekt)
            {
             $(objekt).CSS("bredd", "60");
             $(objekt).CSS("höjd", "50");
            });
     }); // Om dokumentet belastning
</skript>

Den biten av kod finner insamling <Li> Märken vars klass är "villkor" och <IMG> barn. Det går sedan igenom allt detta. Arbetade som en charm.

Jag skulle förmodligen effektivisera det, men jag aldrig var en slags unix kille som löst π till 18 siffror precision med hjälp av sed och awk och jag är inte sådan om jQuery guy antingen Leende .

</slutet>

Prenumerera på min blogg.

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

Ta kontroll över din OK och Avbryt knappar

3 svar

Jag skrev denna artikel ett tag tillbaka, men ser ut som jag inte länka till den från min blogg på gång, Så här går:

I denna artikel beskrivs hur du tvingar newform.aspx att omdirigera till en sida när användaren klickar på OK och en annan sida när hon klickar på Avbryt.

</slutet>

Prenumerera på min blogg.

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

Snabbtips: Att lägga till jQuery MOSS publiceringssidor

1 Svar

När förbättra MOSS publising sidor med hjälp av jQuery, Jag slog de följande hastighet bump:

Servaren misstag i ' /’ Ansökan.

Parsningsfel

Beskrivning: Ett fel uppstod vid parsningen av en resurs som krävs för att utföra den här begäran. Granska följande specifika parse fel uppgifter och ändra ditt källfilen på lämpligt sätt.

Tolken felmeddelande: Endast tillåts innehållskontroller direkt i en innehållssida som innehåller innehållskontroller.

Källkod fel:

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

Källfil: /_catalogs/masterpage/KCC_FacultyMember.aspx Linje: 12

Versionsinformation: Microsoft.NET Framework Version:2.0.50727.4927; ASP.NET Version:2.0.50727.4927

Det var lätt att fixa (h/t till min kollega, Uday Ethirajulu). Se till att den jQuery kod lever inne i "PlaceHolderAdditionalPageHead" som visas:

<ASP:Innehåll ContentPlaceholderID = "PlaceHolderAdditionalPageHead" runat = "server">

<skript

    Type = text/javascript""

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

</skript>

<skript type = "text/javascript">

$(dokument).redo(funktionen() {

   // Lysande jQuery grejer går här.

   });

</skript>

</slutet>

Prenumerera på min blogg.

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