Tag Archives: jQuery

XSLT og jQuery Sýnishorn

Ég hef verið að gera mikið af af XSLT og jQuery og hélt ég myndi deila sýnishorn sem aðrir geta fundið gagnlegar í framtíðinni.

Dæmi 1: Senda frá sér einfalda JavaScript / jQuery í XSLT:

<XSL:Snið passa = "eitthvað" XML:rúm = "varðveita">

  <!– Núllstillt út fyrirspurn vingjarnlegur síur falinn sviði –>
  <handrit type = "text / javascript">
    $(skjal).tilbúinn(virka(){
      $("# QueryFriendlyFilters").Val("Tóm");
    });
  </handrit>

</XSL:sniðmát>

Það bita gefur frá sér smá JavaScript sem bíður fyrir the blaðsíða til ljúka lestun (vegna þess að $(skjal).tilbúinn(...)) og þá setur gildi falinn sviði heitir QueryFriendlyFilters í bókstaflegri gildi "tómur".

Dæmi 2: Nota <XSL:ef> til að athuga með "meira en",  "Minna en", o.fl..

<XSL:Snið passa = "eitthvað" XML:rúm = "varðveita">

  <div id = "fdcAllFilters">
 
    <XSL:Ef próf = "@ Count>0">
      <span class = "fdcFilterLabel">Núverandi síur:</span>
    </XSL:ef>

    <!– meira dót gerist hér. –>

</XSL:sniðmát>

Hér að ofan seðillinn ávísanir til að sjá hvort eiginleiki sem heitir "Count" á "eitthvað" þáttur er meiri en núll.  XML bak við þetta væri eitthvað eins og:"

<eitthvað Count = "5" />

Dæmi 3: Iterate gegnum alla þætti, interspersing jQuery símtöl.

<!– Iterate í gegnum allar síur og sýna rétt  tenglar. –>
<XSL:fyrir-hvern Veldu = "UserFilter">

  <a class = "FilterHref" href = "javascript:mySubmitPage(‘RemoveUserFilter’,"{@ ID}")">[X]</a>

  <span class = "fdcFilterLabel"><XSL:gildi-af select = "@ FilterValue" /></span>

  <handrit type = "text / javascript">

    $(skjal).tilbúinn(virka(){
        <XSL:texta><![CDATA[$("# QueryFriendlyFilters").Val( ($("# QueryFriendlyFilters").Val() + " ]]></XSL:texta>\"<XSL:gildi-af select = "@ FilterValue" />\"<XSL:texta><![CDATA["));]]></XSL:texta>
    });

  </handrit>

</XSL:fyrir-hvern>

Hér að ofan seðillinn er flóknasta og það getur verið auðveldara leiðir til að gera það.

XML bak við þetta lítur u.þ.b. svona út:

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

Þetta seðillinn iterating gegnum <UserFilter> hnúður. 

Það gefur fyrsta akkeri tag sem þegar smellt afturvekur á JavaScript fall sem er nú þegar á síðu, "MySubmitPage" og fer verðmæti eigindi á <UserFilter> hnúturinn heitir "ID". 

Það gefur þá sumir jQuery sem bíður fyrir síðu til að hlaða.  Það jQuery uppfærslur falinn sviði sem heitir "QueryFriendlyFilters" með því að bæta verðmæti FilterValue eiginleiki.  Athugið allar brjálaður <XSL:texta> og <![CDATA[ ... ]]> efni.

Það er það, vona að það hjálpar!

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Lists.asmx, GetListItems og möppur

Ég var að gera sumir rannsókn fyrir einhvern dag um list.asmx vefur þjónustu sem hluta af SharePoint 2010 (og fyrr).  Hún var fær til fá the listi atriði á the rót mappa (þ.mt nöfn undir-möppur), en gat ekki fá atriði í staðinn fyrir einhvern-mappa.  Ég gerði nokkrar að leita í kring um internets og það er furðu algeng spurning.  En, Ég gat ekki fengið góða svar við einfaldri spurningu, "Ef ég veit að möppu, hvernig fæ ég þau atriði í möppunni?"  Til að vera heiðarlegur, Ég vissi ekki að reyna allt sem erfitt þar sem ég hef langað til að reikna þetta einn út á mitt eigið um stund bros.

Til að setja þetta upp, Ég bjó til síðuna sem heitir "Blogging Atburðarás" og sérsniðin listi sem heitir "Custom Listi með Sub möppur".  Ég skapaði þá möppur sem heita:

  • Ár 2005
  • Ár 2006
  • Ár 2007

Ég bætti nokkrum hlutum við möppu "ársins 2006".  Þetta er það sem það lítur út eins og:

image

Vinur minn er ekki að skrifa C # kóða heldur að nota Java, svo SOAP umslag var það sem hún þarf í raun.  Til að fá sem, Ég skrifaði smá jQuery og síðan notað Fiddler til að fá raunverulegan HTTP samtal.

Hér er viðeigandi jQuery (Ég afrita kóðann fyrir neðan ef þú vilt afrita / líma):

image

Þeir fyrstu Lykilatriðið er að fela bæði <queryOptions> og <QueryOptions> hnút.  Annað lykilatriði er að <Mappa> hnútur er slóðin sem viðskiptavinurinn hefur aðgang.

Það kann að vera aðrar leiðir til að fá þetta, en þetta virkaði vel fyrir mig þegar að nota jQuery.

Hér er sápa umslag fyrir ofan:

<soapenv:Umslag xmlns:soapenv =’HTTP://schemas.xmlsoap.org / sápu / umslag /’>                
  <soapenv:Body>
    <GetListItems xmlns =’
HTTP://schemas.microsoft.com / SharePoint / sápu /’>
      <listname>Custom Listi með Sub Mappa</listname>
      <viewFields>  
        <ViewFields>
          <FieldRef Name = 'Titill’ />
          <FieldRef Name = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mappa>
HTTP://demoserver1/Blogging Atburðarás / listar / Custom List með Sub Mappa / árið 2006</Mappa>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Body>
</soapenv:Umslag>

A einhver fjöldi af dæmum og umræðu um þetta leiddi mig til að trúa því að allt sem ég þarf var <QueryOptions> og tilgreina heiti fyrir möppuna.  Fyrir mig, Ég þarf að bæði vefja það inni <queryOptions> og tilgreina fullgildur vefslóð fyrir að <Mappa> hnút.

Hér er jQuery AJAX skipulag:

$(skjal).tilbúinn(virka() {
       var soapEnv =
           "<soapenv:Umslag xmlns:soapenv =’HTTP://schemas.xmlsoap.org / sápu / umslag /’> \
               <soapenv:Body> \
                    <GetListItems xmlns =’HTTP://schemas.microsoft.com / SharePoint / sápu /’> \
                       <listname>Custom Listi með Sub Mappa</listname> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Name = 'Titill’ /> \
                              <FieldRef Name = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mappa>http://demoserver1/Blogging Atburðarás / listar / Custom List með Sub Mappa / árið 2006</Mappa> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Body> \
           </soapenv:Umslag>";

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Endalaust hreiður <div> Tags og jQuery

Þetta virðist eins og svo Oddball efni, Ég er ekki viss um að það er virkilega þess virði að blogga um, en það er aldrei hætt mér áður, svo hér við fara bros

Ég er að vinna út á verkefni þar sem ég draga nokkur gögn úr leit, pökkun upp í XML skeyti og þá sem XML er á endanum breytt í HTML með XSLT.  Það er mikið af jQuery þátt, einn bita sem útfærir sumir tabbing virkni.  Þegar þú smellir á flipa (í raun, a <div>), jQuery vekur. fela() og. sýna() á ýmsum divs (fyrstu síðu hlaða niðurhal allt það efni þannig að það eru engar postbacks í þessu tilfelli).

A fullt af klukkustundum, flipann skipta rökfræði byrjaði að hegða sér erratically og það myndi ekki sýna einn af tabs mínum.  Ég fylgst lokum það niður til þess að Internet Explorer (að minnsta kosti) hélt að <div> merki hreiður langt, langt dýpra en intended.The verktaki tækjastika myndi sýna:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Að lokum sýnir það var lokað alla leið niður hér!

Svo, ef ég gerði fyrir $("# Tab1Content").fela(), Ég vil einnig fela Tab2 og ég gæti aldrei sýnt Tab2 ef ég ekki líka að sýna Tab1.  Ég afrita og líma kóðann upp í Visual Studio og það sýndi allt fóður div er allt fallega, bara eins og þeir áttu að vera að gera, útlit eins og this:

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

Ég vann höfuð mitt gegn vegg fyrir a á meðan og eftir að í raun HTML kóða var að búa til mikið af tómur <div> merki, eins og:

<líkami>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</líkami>

(Hér að ofan er waaaaaaaaaaaay yfir einfaldað.  Tóma tags div eru algerlega gildi. Sumir af mínum <div> merki voru full af efni, en margir fleiri voru ekki.  Ég kom til að átta sig á að mínar <XSL:fyrir-hvern> tilskipanir voru emitting skammtíma-mynda div tög þegar XSL:fyrir-hvern ekki "fundið nein gögn.  Ég neyðist HTML stendur í framleiðslu, eins og sýnt:

image

 

Eftir að ég gerði það, allt div er raðað upp fallega og flipi rofi minn byrjaði að vinna.

Eins og alltaf, Ég vona að þetta hjálpar einhverjum í klípa.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Samt Meira jQuery–Búa til mynd Dæmi

Ég erfði vefur hluti af gamla seljanda a viðskiptavinarins og það hefur stærð vandamál.  Myndirnar ættu að vera 60×50 en fyrir sumir stakur ástæða, upprunalega söluaðili neyðist þá í 42×42, svo þeir líta squashed:

 

Góð mynd

Bad Mynd

Hér er Markup (nokkuð einfaldað):

<'á útbreiddur-Horfur' Tafla class =>
  <thead>
    <tr>
      <th  width = '100′>3 Þriðjudagur</th>
    </tr>
  </thead>

  <tbody>
    <tr class = "spá">
      <td width = '100′>
        <Street>
          <Li class = 'hár'>Hár: 72&þú;F</Li>
          <Li class = "lítið">Low: 44&þú;F</Li>
          <Li Class = 'ástand'>Sunny
            <IMG src =’
HTTP://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ Breidd = '42’ height = '42’ alt =” />
          </Li>
        </Street>
      </td>
    </tr>

  </tbody>

</borð>

Þú munt hafa í huga að jafnvel þótt slóð að myndinni sjálfri sýnir rétta vídd (60×50) upprunalega söluaðili neyðist það í 42×42.  Hvers vegna?  Crazy.

Engu að síður, Ég vildi a fljótur og þægilegur lausn á þessu máli og ég varð að jQuery.  The bragð var að finna allar viðeigandi <IMG> merki.  Ég vildi ekki muck um með öðrum IMG tags (þar af eru margir).  Þessi hluti af jQuery gerði bragð:

<handrit type = "text / javascript" src ="HTTP://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></handrit>

<handrit type = "text / javascript">
     $(skjal).tilbúinn(virka () {

         $(‘li.condition > 'IMG).hver(virka (Vísitala, atriði)
           
{
             $(atriði).CSS("Breidd", "60"); 
             $(atriði).CSS("Hæð", "50");
            });
     }); // á hleðslu skjal
</handrit>

Það bita af kóða finnur safn <Li> merki þar sem bekknum er "ástand" og <IMG> börn.  Það iterates þá í gegnum allt það.  Vann eins og a þokki.

Ég gæti líklega einfalda hana, en ég var aldrei góður í Unix strákur að leysa π að 18 tölustafir nákvæmni nota sed og awk og ég er ekki þannig ef jQuery gaur annaðhvort bros.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Taktu stjórn á OK og stöðva hnöppum

Ég skrifaði þessi grein A meðan bak, en lítur út eins og ég vissi ekki að tengja við það frá blogginu mínu á þeim tíma, svo fer hér:

image

Þessi grein lýsir því hvernig á að þvinga newform.aspx að beina til eina síðu þegar notandinn smellir á OK og aðra síðu þegar hún smellir hætta.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Quick Ábending: Bæti jQuery til Moss Publishing Pages

Þegar auka mosa publising síður með jQuery, Ég lenti eftirfarandi hraði högg:

Server Error in ‘/’ Umsókn.


Flokka Villa

Lýsing: Villa kom upp við að þáttun á úrræði sem þarf til að þjónusta þessa beiðni. Lestu eftirfarandi sérstakar Þáttunarvilla upplýsingar og breyta frumskrár á viðeigandi.

Flokka Villuboð: Aðeins eftirlit efni eru leyfðar beint í innihald síðu sem inniheldur efni stjórna.

Heimild Villa:

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

Frumskrár: /_catalogs / masterpage / KCC_FacultyMember.aspx    Lína: 12


Útgáfa Information: Microsoft. NET Framework Version:2.0.50727.4927; ASP.NET Version:2.0.50727.4927

Það var auðvelt nóg til að festa (H / t til kollega minn, Uday Ethirajulu).  Vertu viss um að jQuery kóða býr inni í "PlaceHolderAdditionalPageHead" eins og sýnt er:

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

<handrit

    type="text/javascript"

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

</handrit>

<handrit type = "text / javascript">

  $(skjal).tilbúinn(virka() {

   // Ljómandi jQuery efni fer hér.

   });

</handrit>

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin