Tag Archives: jQuery

XSLT en jQuery Monsters

2 antwoorde

Ek doen 'n baie van XSLT en jQuery en het gedink dat ek 'n paar stukkies wat ander kan nuttig wees in die toekoms wil deel.

Voorbeeld 1: Uitstraal eenvoudige JavaScript / jQuery in XSLT:

<xsl:sjabloon wedstryd = "iets" xml:ruimte = "bewaar">

  <!– Blank uit die soektog vriendelike filters verborge veld –>
  <script type = "text / JavaScript">
    $(dokument).gereed(funksie(){
      $("# QueryFriendlyFilters").Val("Leë");
    });
  </script>

</xsl:sjabloon>

Dit bietjie straal 'n paar JavaScript wat wag vir die bladsy laai te voltooi (as gevolg van die $(dokument).gereed(...)) en stel dan die waarde van 'n versteekte veld met die naam QueryFriendlyFilters aan die letterlike waarde "leë".

Voorbeeld 2: Gebruik <xsl:indien> om te kyk nie. "groter as",  "Minder as", ens..

<xsl:sjabloon wedstryd = "iets" xml:ruimte = "bewaar">

  <div id = "fdcAllFilters">
 
    <xsl:as toets = "@ Graaf>0">
      <span class = "fdcFilterLabel">Huidige filters:</span>
    </xsl:indien>

    <!– meer dinge gebeur hier. –>

</xsl:sjabloon>

Die bogenoemde uit nagegaan om te sien as 'n kenmerk met die naam "Count" van die "iets" element is groter as nul.  Die XML agter dit sou wees iets soos:"

<iets Count = "5" />

Voorbeeld 3: Itereer deur al die elemente, interspersing jQuery oproepe.

<!– Itereer deur al die filters en vertoon die korrekte  skakels. –>
<xsl:vir-elke kies = "UserFilter-">

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

  <span class = "fdcFilterLabel"><xsl:waarde van uitgesoekte = "@ FilterValue" /></span>

  <script type = "text / JavaScript">

    $(dokument).gereed(funksie(){
        <xsl:teks><![CDATA[$("# QueryFriendlyFilters").Val( ($("# QueryFriendlyFilters").Val() + " ]]></xsl:teks>\"<xsl:waarde van uitgesoekte = "@ FilterValue" />\"<xsl:teks><![CDATA["));]]></xsl:teks>
    });

  </script>

</xsl:vir-elke>

Die bogenoemde uit die mees komplekse en daar kan makliker wees om maniere om dit te doen.

Die XML agter dit lyk ongeveer soos hierdie:

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

Hierdie brokkie is iterating deur <UserFilter> nodes. 

Dit straal die eerste keer 'n anker tag dat wanneer gekliek beroept 'n JavaScript-funksie wat op die bladsy is reeds, "MySubmitPage" en gaan die waarde van 'n kenmerk van die <UserFilter> node met die naam "ID". 

Dit straal dan 'n paar jQuery wat wag vir die bladsy te laai.  JQuery updates 'n versteekte veld met die naam "QueryFriendlyFilters" deur die byvoeging van die waarde van die FilterValue kenmerk.  Let op al die gek <xsl:teks> en <![CDATA[ ... ]]> dinge.

Dit is dit, hoop dit help!

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin

Lists.asmx, GetListItems en dopgehou

6 antwoorde

Ek was 'n bietjie navorsing te doen vir iemand vandag rondom die list.asmx-web-diens verskaf as deel van SharePoint 2010 (en vroeër).  Sy was in staat om die lys items te kry om by die wortel gids (insluitend die name van die sub-gidse), maar kon dit nie kry items in die sub-gidse.  Ek het 'n paar kyk rond op die Inter en dit is 'n verbasend algemene vraag.  Tog, Ek kon nie 'n goeie antwoord op die eenvoudige vraag, "As ek weet die gids, Hoe kry ek die items in die gids?"  Om eerlik te wees, Ek het nie probeer om al die harde omdat ek wou hierdie een op my eie vir 'n rukkie om uit te vind Smile.

Om dit te kan opstel, Ek het 'n webwerf met die naam "Blogging scenario's" en 'n persoonlike lys met die naam "Custom Lys met sub dopgehou".  Ek het toe 'dopgehou:

  • Jaar 2005
  • Jaar 2006
  • Jaar 2007

Ek het ook 'n paar items tot die gids "Jaar 2006".  Dit is hoe dit lyk:

image

My vriend is nie 'n C # kode te skryf, maar eerder met behulp van Java, sodat die seep koevert was wat sy werklik nodig is.  Om dit te kry, Ek het 'n bietjie van jQuery en dan gebruik Fiddler die werklike HTTP gesprek te kry.

Hier is die betrokke jQuery (Ek kopieer die kode hieronder neer as jy wil kopieer / plak):

image

Hulle eerste sleutel is om in te sluit beide 'n <queryOptions> en <QueryOptions> knoop.  Die tweede sleutel is dat die <Folder> node is 'n URL wat die kliënt het toegang.

Daar mag dalk ander maniere om dit te kry, maar dit het goed gewerk vir my as die gebruik van jQuery.

Hier is die seep koevert vir die bogenoemde:

<soapenv:Koevert xmlns:soapenv =’http://schemas.xmlsoap.org / seep / koevert /’>                
  <soapenv:Liggaam>
    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / seep /’>
      <list name>Custom Lys met Sub dopgehou</list name>
      <viewFields>  
        <ViewFields>
          <FieldRef name = "Titel’ />
          <FieldRef Naam = "EncodedAbsUrl-’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>http://demoserver1/Blogging Scenarios / lyste / Custom Lys met sub dopgehou / Jaar 2006</Folder>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Liggaam>
</soapenv:Envelope>

Daar is baie voorbeelde en bespreking rondom hierdie het my gelei om te glo dat alles wat ek nodig het, was <QueryOptions> en 'n gids spesifiseer.  Vir my, Ek moet aan beide wrap dit binne <queryOptions> sowel as 'n ten volle gekwalifiseerde URL vir die spesifiseer <Folder> node.

Hier is die jQuery AJAX setup:

$(dokument).gereed(funksie() {
       soapEnv =
           "<soapenv:Koevert xmlns:soapenv =’http://schemas.xmlsoap.org / seep / koevert /’> \
               <soapenv:Liggaam> \
                    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / seep /’> \
                       <list name>Custom Lys met Sub dopgehou</list name> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef name = "Titel’ /> \
                              <FieldRef Naam = "EncodedAbsUrl-’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Scenarios / lyste / Custom Lys met sub dopgehou / Jaar 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Liggaam> \
           </soapenv:Envelope>";

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin

Eindeloos nes <Div> Etikette en jQuery

Laat 'n antwoord

Dit lyk soos 'n oddball onderwerp, Ek is nie seker dit is regtig die moeite werd blog oor, maar dit was nog nooit my gestop voor, so hier gaan ons Smile

Ek werk op 'n projek waar ek trek sommige data van 'n soektog, verpakking dit in 'n XML-boodskap en dan dat die XML is uiteindelik verander in HTML via XSLT.  Daar is 'n baie jQuery betrokke, n bietjie waarvan implemente tabbing funksionaliteit.  Wanneer jy op 'n blad (werklik, 1 <Div>), jQuery beroept. verberg() en show() op verskeie divs (die eerste bladsy vrag afgelaai Al die inhoud, sodat daar is geen postbacks in hierdie geval).

'N klomp ure gelede, die blad te skakel logika begin om ongereeld te tree en dit sou nie wys een van my tabs.  Ek het uiteindelik opgespoor het dit aan die feit dat Internet Explorer (ten minste) gedink het dat die <Div> tags genes ver, veel dieper as intended.The ontwikkelaar toolbar sal wys:

-<div id = "Tab1Content">
  -<Div>
    -<Div>
      -<div id = "Tab2Content">
        -<Div>
           ..............................
                   </Div>  <-Finaal deur is gesluit al die pad hier!

So, As ek dit het 'n $("# Tab1Content").verberg(), Ek wil ook wegsteek Tab2 en ek kon nooit wys Tab2 as ek het ook nie Tab1 wys.  Ek die kode gekopieer en geplak in Visual Studio en dit het gewys al die DIV se voering mooi, net soos hulle veronderstel was om te doen, soek soos hierdie:

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

Ek het my kop teen die muur vir 'n rukkie en het opgemerk dat in die HTML-kode is 'n baie leë genereer <Div> tags, soos:

<liggaam>

  <div id = "Tab1Content">

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

  </Div>

  <div id = "Tab2Content">

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

  </Div>

</liggaam>

(The above is waaaaaaaaaaaay oversimplified.  Die leë div tags is heeltemal geldig. Sommige van my <Div> tags was vol van die inhoud, maar baie meer was nie.  Ek het tot die besef gekom dat my <xsl:vir-elke> riglyne is die afgee van die kort vorm div tags toe die XSL:vir elkeen het 'nie enige data te vind nie.  Ek gedwing om 'n HTML-kommentaar in die uitset, soos aangedui:

image

 

Nadat ek dit gedoen het, al die div mooi is lined up en my blad skakeling begin werk.

Soos altyd, Ek hoop dit help iemand in 'n knippie.

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin

Nog Meer jQuery–Grootte van 'n image Voorbeeld

Laat 'n antwoord

Ek geërf het van 'n web deel van 'n kliënt se ou ondernemer en dit het 'n beeld grootte probleem.  Die beelde is 60×50 maar vir sommige vreemd rede, die oorspronklike verskaffer gedwing om hulle in 42×42, so kyk hulle platgedruk:

 

N goeie beeld

Slegte beeld

Hier is die winsgrens (ietwat vereenvoudigde):

<table class = "Gevorderde-vooruitsigte>
  <thead>
    <tr>
      <ste  width = '100′>3 Dinsdag</ste>
    </tr>
  </thead>

  <tbody>
    <tr class = "voorspelling">
      <td width = '100′>
        <Straat>
          <li class = 'n hoë>Hoë: 72&jy;F</li>
          <li class = "low">Lae: 44&jy;F</li>
          <li class = "toestand">Sunny
            <img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ hoogte = '42’ alt =” />
          </li>
        </Straat>
      </td>
    </tr>

  </tbody>

</tafel>

Jy sal let dat hoewel die pad na die beeld self toon die korrekte dimensie (60×50) die oorspronklike verskaffer gedwing om dit in 42×42.  Hoekom?  Crazy.

In elk geval, Ek wou 'n vinnige en maklike oplossing vir hierdie kwessie en ek draai om jQuery.  Die geheim is om almal op te spoor van die toepaslike <img> tags.  Ek het nie wil die muck oor met enige ander img tags (wat daar is baie).  Hierdie bietjie van die jQuery het die truuk:

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

<script type = "text / JavaScript">
     $(dokument).gereed(funksie () {

         $(‘li.condition > img ").elke(funksie (indeks, item)
            {
             $(item).css("Width", "60"); 
             $(item).css("Hoogte", "50");
            });
     }); // dokument vrag
</script>

Daardie bietjie van die kode bevind dat die versameling <li> tags wie se klas is "toestand" en <img> kinders.  Dit iterate dan deur alles.  Soos 'n bom gewerk.

Ek kon dit waarskynlik meer vaartbelyn, maar ek was nog nooit die soort van die unix man wat opgelos π aan 18 syfers presisie met sed en AWK en ek is nie daardie soort indien jQuery man Smile.

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin

Neem beheer van jou OK en kanselleer knoppies

3 antwoorde

Ek geskryf het hierdie artikel 'n rukkie terug, maar lyk soos ek nie skakel dit uit my blog op die oomblik, so hier gaan:

image

Hierdie artikel beskryf hoe om te dwing newform.aspx een bladsy te lei wanneer die gebruiker kliek op OK en 'n ander bladsy as sy klik kanselleer.

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin

Vinnige Wenk: Die jQuery te MOSS Publishing Pages

1 Antwoord

Wanneer die verbetering van MOSS Publishing bladsye met behulp van jQuery, Ek tref die volgende spoedbult:

Server Error in ‘/’ Aansoek.

Parser Fout

Description: 'N Fout het voorgekom tydens die parsing van 'n hulpbron wat nodig is om hierdie versoek te bedien. Gaan asseblief die volgende spesifieke Fout besonderhede en verander jou bron lêer op 'n gepaste wyse.

Parser Fout boodskap: Slegs beheer is direk in 'n inhoud bladsy wat inhoud bevat beheer toegelaat.

Bron Fout: 

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

Bron Lêer: /_catalogs / masterpage / KCC_FacultyMember.aspx    Line: 12

Weergawe inligting: NET Framework. Weergawe:2.0.50727.4927; ASP.NET Weergawe:2.0.50727.4927

Dit was maklik genoeg om op te los (h / t aan my kollega, Uday Ethirajulu).  Maak seker dat die jQuery kode leef binne die "PlaceHolderAdditionalPageHead" soos getoon:

<ASP:Inhoud ContentPlaceholderID = "PlaceHolderAdditionalPageHead-" runat = "bediener">

<script

    type = "text / javascript"

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

</script>

<script type = "text / JavaScript">

  $(dokument).gereed(funksie() {

   // Brilliant jQuery dinge gaan hier.

   });

</script>

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin