Tag Archives: jQuery

XSLT- ja jQuery näytettä

Olen tehnyt paljon XSLT, jQuery ja ajattelin jakaa muutamia katkelmia, että muut voivat löytää hyödyllisiä tulevaisuudessa.

Esimerkki 1: Päästää yksinkertainen JavaScript / jQuery XSLT-muodossa:

<XSL:malli ottelu = "jotain" XML:tila = "säilömään">

  <!– Tyhjä kyselyn ystävällinen suodattimet Piilokentän ulos –>
  <komentosarjan tyyppi = "text/javascript">
    $(asiakirja).valmis(funktio(){
      $("#QueryFriendlyFilters").Val("tyhjä");
    });
  </Script>

</XSL:malli>

Että vähän päästää joitakin ohjelman, joka odottaa hotellipoika jotta lopettaa lastaus (koska $(asiakirja).valmis(…)) ja sitten asetetaan piilotetun kentän arvo nimettiin QueryFriendlyFilters "tyhjä" literaaliarvon.

Esimerkki 2: Käyttö <XSL:Jos> Tarkista "suuremmat",  "alle", jne.

<XSL:malli ottelu = "jotain" XML:tila = "säilömään">

  <div id = "fdcAllFilters">
 
    <XSL:Jos test="@Count>0">
      <span class = "fdcFilterLabel">Nykyiset suodattimet:</span>
    </XSL:Jos>

    <!– enemmän tavaraa tapahtuu täällä. –>

</XSL:malli>

Koodinpätkä tarkistaa, jos ominaisuus nimeltä "Count" "jotain" elementti on suurempi kuin nolla.  XML taustalla olisi jotain:”

<jotain Count = "5" />

Esimerkki 3: Käydä läpi kaikki elementit, Lomittaminen jQuery puhelut.

<!– Käydä läpi kaikki suodattimet ja näyttää oikean  linkit. –>
<XSL:kullekin select = "UserFilter">

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

  <span class = "fdcFilterLabel"><XSL:arvo-ja select="@FilterValue"/></span>

  <komentosarjan tyyppi = "text/javascript">

    $(asiakirja).valmis(funktio(){
        <XSL:teksti><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></XSL:teksti>\"<XSL:arvo-ja select="@FilterValue"/>\"<XSL:teksti><![CDATA["));]]></XSL:teksti>
    });

  </Script>

</XSL:for-each>

Edellä koodinpätkä on kaikkein monimutkaisin ja voi olla helpompaa tapaa tehdä se.

XML taustalla näyttää suunnilleen tältä:

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

Tämä pätkä läpikäyminen <UserFilter> solmut. 

Tuottamiensa ankkuri tag, että napsautettaessa vetoaa JavaScript-toiminto, joka on jo sivulla, "mySubmitPage" ja välittää määritteen arvo <UserFilter> solmu nimeltä "Tunnus". 

Se säteilee jQuery, joka odottaa sivu latautuu.  Että jQuery päivittää piilotettu kenttä nimeltä "QueryFriendlyFilters" lisäämällä FilterValue-määritteen arvo.  Huomautus Kaikki hullu <XSL:teksti> ja <![CDATA[ … ]]> jutut.

Se on siinä, odottaa se auttaa!

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Lists.asmx, GetListItems ja kansioihin

Joidenkin tutkimus oli tekemässä joku tänään noin list.asmx web-palveluun, SharePoint osana 2010 (ja aiemmat).  Hän oli mahdollisuus saada luettelokohteet on pääkansio (mukaan lukien alikansiot nimet), mutta ei voinut saada kohteet alikansiot.  Tein joitakin haku oletusverkko, ja se on yllättävän esitettyyn kysymykseen.  Vielä, Yksinkertainen hyvä Kysymysvastauksen ei löydy., "Jos tiedän kansion, Miten saan kohteet kansioon?”  Järjestimme, I ei yritä kaikki, että kova, koska olet halusi kuva, tämä yksi pois itse jonkin aikaa Hymy.

Voit määrittää tämän, Luotu sivuston nimeltä "Blogging skenaarioita" ja "mukautetun luettelon kanssa Sub kansiot" mukautetun luettelon.  Sitten luotu kansioita nimeltä:

  • Vuoden 2005
  • Vuoden 2006
  • Vuoden 2007

Joitakin kohteita lisätään "Vuoden 2006"-kansioon.  Tämä on, miltä se näyttää:

image

Ystäväni ei ole kirjallisesti C#-koodi mutta käyttämällä pikemminkin Java, joten SOAP-kirjekuoren oli, mitä hän todella tarvitaan.  Saat että, Kirjoitti bittinen jQuery ja saada itse HTTP-keskustelu fiddler avulla.

Tässä on asiaa jQuery (Kopioidun koodi alaspäin alla Jos haluat kopioida ja liittää):

image

Ne ensimmäinen avain on sisällyttävä sekä <queryOptions> ja <QueryOptions> solmu.  Toinen avain on, että <Kansio> solmu on URL-osoite, johon asiakkaalla on käyttöoikeus.

Voi olla muita tapoja tämä, mutta tämä toimi minulle, kun käyttäen jQuery.

Tässä on yllä SOAP-kirjekuori:

<soapenv:Kirjekuori xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’>                
  <soapenv:Laitos>
    <GetListItems xmlns =’
http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Mukautetun luettelon Sub kansioita</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef nimi =' otsikko’ />
          <FieldRef nimi ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Kansio>
http://demoserver1 ja Blogging Skenaariot, luettelot ja mukautettu luettelo Sub kansiot/vuoden 2006</Kansio>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Laitos>
</soapenv:Kirjekuori>

Esimerkkejä ja kiertää tämän keskustelun paljon johti me uskomme, että minun tarvitsee oli <QueryOptions> ja määritä kansionimi.  Minulle, Tarvitse molempia rivittää se sisällä <queryOptions> sekä määrittää täydellinen URL-osoite <Kansio> solmu.

Tässä on jQuery AJAX-asennusohjelma:

$(asiakirja).valmis(funktio() {
       var soapEnv =
           "<soapenv:Kirjekuori xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’> \
               <soapenv:Laitos> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Mukautetun luettelon Sub kansioita</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef nimi =' otsikko’ /> \
                              <FieldRef nimi ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Kansio>http://demoserver1/Blogging Skenaariot, luettelot ja mukautettu luettelo Sub kansiot/vuoden 2006</Kansio> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Laitos> \
           </soapenv:Kirjekuori>";

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Loputtomasti sisäkkäisyys <div> Tunnisteet ja jQuery

Tämä näyttää siltä, että tällaiset: oddball-aiheessa, En ole varma, se kannattaa todellakin blogging noin, mutta joka on koskaan pysäytetty ennen, joten tässä meidän mennä Hymy

Jos vetäminen joitakin tietoja haun kautta projektin työskentelen, pakaten se ardor XML-viestin ja että XML muuttuu lopulta HTML kautta XSLT.  On paljon jQuery, yksi vähän joka toteuttaa joitakin tabbing toimintoja.  Kun valitset välilehti (Todella, a <div>), jQuery vetoaa .hide() ja .show() kaupungin eri divs (alkuperäisen sivun latausaika Lataa kaiken sisällön, joten ei ole postbacks tässä tapauksessa).

Joukko toukokuu, Kaistale heilahdus logiikka on alkanut käyttäytyä odottamattomalla tavalla ja se ei Näytä yksi välilehtiäni.  Lopulta jäljittää se siitä, että internet Exploreria (ainakin) Ajattelin, että <div> Sisäkkäiset paljon Tunnisteet, paljon syvemmällä kuin on tarkoitettu.Kehittäjä-työkalurivin osoittaisi:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-Lopuksi osoittaa se suljettiin aina täällä!

Niin, Jos tein $("#Tab1Content").Piilota(), Haluaisin myös piilottaa Välilehti2 ja voisin koskaan näyttää Välilehti2 jos en näyttänyt Tab1.  Kopioida ja liittää koodin visual studio ja se osoitti kaikki div riviin hienosti, aivan kuten ne oli tarkoitus tehdä, Tällainen:

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

Lyödä päätä seinään taas ja huomasin, että todellinen HTML koodi tuottaa paljon tyhjiä <div> Tunnisteet, kuten:

<kehon>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</kehon>

(Edellä on yksinkertaistettu waaaaaaaaaaaay.  Tyhjä div tags on täysin pätevä. Osa minun <div> Tunnisteet olivat täynnä sisältöä, mutta monet muut eivät.  Tulin ymmärtämään, että minun <XSL:for-each> direktiivien olimme päästöt lyhyen lomakkeen div Tunnisteet Kun xsl:kullekin eivät "löytänyt yhtään tietoja.  HTML-kommentti pakotetaan tuotos, kuten:

image

 

Kun tein, että, Kaikki div rivissä kauniisti ja välilehden vaihtaminen aloitti.

Kuten aina, Toivottavasti tämä auttaa joku hyppysellinen.

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Vielä enemmän jQuery–Muuta kuva-esimerkki

Web-osan periytyvät asiakkaan vanha toimittajan ja sen kuvan koko ongelma.  Kuvien tulisi olla 60×50 mutta jostain kumman syystä, Alkuperäinen toimittaja pakotetaan 42×42, niin ne näyttävät litistynyt:

 

Hyvä kuva

Huono kuva

Tässä on merkintä (jonkin verran yksinkertaistettuja):

<taulukko class = "laajennettu outlook">
  <thead>
    <TR>
      <th  leveys = 100′>3 Tiistai</th>
    </TR>
  </thead>

  <TBODY>
    <p class = "ennuste">
      <TD leveys = 100′>
        <UL>
          <Li class = "korkea">Korkea: 72&astetta;F</Li>
          <Li class = "vähän">Matala: 44&astetta;F</Li>
          <Li class = 'ehto'>Aurinkoinen
            <IMG src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/En/Trans/cond007.png’ leveys = 42’ korkeus = 42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </TBODY>

</taulukko>

Saat huomata, että vaikka itse kuvan polku osoittaa asianmukaista ulottuvuus (60×50) Alkuperäinen toimittaja pakotti sen 42×42.  Miksi?  Hullu.

Joka tapauksessa, Halusin nopea ja helppo ratkaisu tähän kysymykseen ja käännyin jQuery.  Temppu oli löytänyt kaikki tarvittavat <IMG> Tunnisteet.  En halua hukata aikaa img Tagit (joista on monia).  Tässä vähän jQuery teki tempun:

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

<komentosarjan tyyppi = "text/javascript">
     $(asiakirja).valmis(funktio () {

         $("li.condition > img ").kunkin(funktio (indeksi, kohde)
           
{
             $(kohde).CSS("leveys", "60"); 
             $(kohde).CSS("korkeus", "50");
            });
     }); // asiakirja kuormitus
</Script>

Että vähän koodi toteaa kokoelma <Li> Tunnisteet, joiden luokka on "kunnossa" ja <IMG> lapset.  Sitten toistetaan läpi kaiken tämän.  Työntekijä kuin hurmata.

Voisimme luultavasti keventää se, mutta en ole koskaan ollut sellainen unix kaveri, joka ratkaista π - 18 numeroa tarkkuus sed ja awk ja en ole sellainen jos jQuery kaveri joko Hymy.

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Hallita OK- ja Peruuta-painikkeet

Kirjoitin Tämä artikkeli taas takaisin, mutta näyttää siltä, että olen ei linkin blogiin aikaan, Joten tässä menee:

image

Tässä artikkelissa kuvataan, miten pakotetaan newform.aspx ohjataan yhdellä sivulla, kun käyttäjä napsauttaa OK ja toiselle sivulle, kun käyttäjä valitsee Peruuta.

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Vihje: JQuery lisääminen MOSS sivujen julkaisemisesta

Kun parantaa MOSS publising sivut käyttäen jQuery, Osuin seuraavat hidastustöyssy:

Tarjoilija Erehdys kotona ' /’ Sovellus.


Jäsentäjän virhe

Kuvaus: Virhe tämän pyynnön käyttämän resurssin jäsennyksessä. Lue seuraavat tarkat jäsennysvirhetiedot ja Muokkaa lähdekoodia niiden mukaan.

Parser-virhesanoma: Vain Sisältöohjausobjektit sallitaan suoraan sisältö-sivu, joka sisältää sisällön ohjausobjektit.

Aiheuttaja erehdys:

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

Lähdetiedosto: /_catalogs/MasterPage/KCC_FacultyMember.aspx    Rivi: 12


Versiotiedot: Microsoft .NET Framework versio:2.0.50727.4927; ASP.NET-versio:2.0.50727.4927

Se oli helppo korjata (Hännikäinen kollegalleni, Terhi Suvi).  Varmista, että jQuery koodi asuu sisällä "PlaceHolderAdditionalPageHead", kuten:

<ASP:Sisällön ContentPlaceholderID = "PlaceHolderAdditionalPageHead" RUNAT = "server">

<Script

    tyyppi = text/javascript""

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

</Script>

<komentosarjan tyyppi = "text/javascript">

  $(asiakirja).valmis(funktio() {

   // Loistava jQuery tavaraa menee täällä.

   });

</Script>

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin