Tag Archives: jQuery

XSLT- en jQuery monsters

Ik heb gedaan een heleboel van XSLT- en jQuery en dacht dat ik zou delen een paar fragmenten die anderen in de toekomst nuttig kunnen vinden.

Voorbeeld 1: Eenvoudige JavaScript uitstoten / jQuery in XSLT:

<XSL:sjabloon match = "iets" XML:ruimte = "behouden">

  <!– Uit de query vriendelijke filters verborgen veld leeg –>
  <script type = "text/javascript">
    $(document).klaar(functie(){
      $("#QueryFriendlyFilters").Val("lege");
    });
  </script>

</XSL:sjabloon>

Dat beetje stoot sommige JavaScript die op de pagina wacht te laden voltooien (vanwege de $(document).klaar(…)) en vervolgens sets de waarde van een verborgen veld genaamd QueryFriendlyFilters aan de letterlijke waarde "leeg".

Voorbeeld 2: Gebruik <XSL:Als> om te controleren 'groter dan',  "minder dan", etc.

<XSL:sjabloon match = "iets" XML:ruimte = "behouden">

  <div id = "fdcAllFilters">
 
    <XSL:Als test="@Count>0">
      <klasse omspannen = "fdcFilterLabel">Huidige filters:</span>
    </XSL:Als>

    <!– meer dingen gebeurt hier. –>

</XSL:sjabloon>

Het bovenstaande fragment wordt gecontroleerd als een kenmerk met de naam "Count" van het "iets" element groter dan nul is.  De XML achter dit zou iets willen:”

<iets Count = "5" />

Voorbeeld 3: Alle elementen doorlopen, interspersing jQuery oproepen.

<!– Alle filters doorlopen en weer de juiste  koppelingen. –>
<XSL:for-each select = "UserFilter">

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

  <klasse omspannen = "fdcFilterLabel"><XSL:waarde-van select="@FilterValue"/></span>

  <script type = "text/javascript">

    $(document).klaar(functie(){
        <XSL:tekst><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></XSL:tekst>\"<XSL:waarde-van select="@FilterValue"/>\"<XSL:tekst><![CDATA["));]]></XSL:tekst>
    });

  </script>

</XSL:for-each>

Het bovenstaande fragment is de meest complexe en kunnen er eenvoudiger manieren om het te doen.

De XML achter dit ziet er ongeveer als volgt:

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

Dit fragment is sequentieel doorzoeken <UserFilter> knooppunten. 

Het eerste stoot een anker tag die, wanneer geklikt roept een JavaScript-functie die is al op de pagina, "mySubmitPage" en geeft de waarde van een kenmerk op de <UserFilter> knooppunt met de naam "ID". 

Het straalt dan sommige jQuery die op de pagina wacht te laden.  Een verborgen veld met de naam "QueryFriendlyFilters" door de waarde van het kenmerk FilterValue bijgewerkt dat jQuery.  Opmerking alle de gekke <XSL:tekst> en <![CDATA[ … ]]> spullen.

Dat is het, hoop dat het helpt!

</einde>

Abonneren op mijn blog.

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

Lists.asmx, GetListItems en mappen

Ik deed wat onderzoek voor iemand vandaag rond de list.asmx webservice geleverd als onderdeel van SharePoint 2010 (en eerder).  Ze kon krijgen de lijstitems op de root-map (met inbegrip van de namen van de submappen), maar kon niet items in submappen.  Ik deed wat rondkijken op de internets en het is een verrassend gemeenschappelijke vraag.  Nog, Ik kon niet krijgen een goed antwoord op de eenvoudige vraag, "als ik weet dat de map, Hoe krijg ik de items in de map?”  Om eerlijk te zijn, Ik heb niet proberen zo hard aangezien ik figuur dit één uit op mijn eigen voor een tijdje wilde Glimlach.

Dit instellen, Ik heb een site met de naam "Bloggen scenario's" en een aangepaste lijst genaamd "Aangepaste lijst met Sub Folders".  Ik vervolgens mappen met deze naam gemaakt:

  • Jaar 2005
  • Jaar 2006
  • Jaar 2007

Ik een paar items toegevoegd aan de map "Year 2006".  Dit is wat het als kijkt:

image

Mijn vriend is niet C# code te schrijven maar eerder met behulp van Java, dus de SOAP-envelop wat ze echt nodig was.  Om dat te krijgen, Ik schreef een beetje van jQuery en vervolgens fiddler gebruikt om de werkelijke HTTP gesprek.

Hier is het relevante jQuery (Ik heb de code gekopieerd naar beneden hieronder als u wilt kopiëren en plakken):

image

Zij eerste sleutel is om zowel een <queryOptions> en <QueryOptions> knooppunt.  De tweede sleutel is dat de <Map> knooppunt is een URL waarnaar de client toegang heeft.

Kunnen er andere manieren om dit te krijgen, maar dit werkte goed voor mij toen met behulp van jQuery.

Hier is de SOAP-envelop voor de bovenstaande:

<soapenv:Envelop xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:Lichaam>
    <GetListItems xmlns =’
http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Aangepaste lijst met submappen</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef naam =' titel’ />
          <FieldRef naam ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Map>
http://demoserver1/bloggen Scenario's / lijsten/aangepaste lijst met Sub mappen/jaar 2006</Map>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Lichaam>
</soapenv:Envelop>

Een heleboel voorbeelden en discussie rond dit leidde me om te geloven dat alles wat ik nodig was <QueryOptions> en geef een mapnaam.  Voor mij, Ik nodig beide wikkel het binnen <queryOptions> zo goed als een volledig gekwalificeerde URL opgeven voor de <Map> knooppunt.

Hier is de setup jQuery AJAX:

$(document).klaar(functie() {
       var soapEnv =
           "<soapenv:Envelop xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Lichaam> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Aangepaste lijst met submappen</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef naam =' titel’ /> \
                              <FieldRef naam ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Map>http://demoserver1/Blogging Scenario's / lijsten/aangepaste lijst met Sub mappen/jaar 2006</Map> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Lichaam> \
           </soapenv:Envelop>";

</einde>

Abonneren op mijn blog.

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

Eindeloos nesten <div> Tags en jQuery

Dit lijkt een excentrieke onderwerp, Ik ben niet zeker dat het is echt de moeite waard bloggen over, maar dat heeft nooit gestopt me vóór, Dus hier gaan we Glimlach

Ik ben uit te werken op een project waar ik te sommige gegevens uit een zoekopdracht trekken ben, verpakking het omhoog in een XML-bericht en vervolgens dat XML wordt uiteindelijk omgezet in HTML via XSLT.  Er is een heleboel jQuery betrokken, een beetje waarvan sommige tabben functionaliteit implementeert.  Wanneer u klikt op een tabblad (echt, een <div>), jQuery roept .hide() en .show() op diverse divs (de eerste pagina geladen gedownload alle inhoud, zodat er in dit geval geen terugsturen zijn).

Een heleboel uren geleden, het tabblad schakelen logica begon te gedragen onregelmatig en het zou niet een van mijn tabs tonen.  Ik uiteindelijk gevolgd het neer op het feit dat internet explorer (ten minste) dacht dat de <div> Tags genest ver, veel dieper dan bestemd.De werkbalk ontwikkelaar zou weergeven:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Ten slotte tonen het helemaal naar beneden hier werd gesloten!

Dus, Als ik deed een $("# Tab1Content").verbergen(), Ik zou ook Tab2 verbergen en ik kon nooit tonen Tab2 als ik niet ook Tab1.  Ik gekopieerd en geplakt de code omhoog in visual studio en het bleek alles voor de div's voering tot keurig, net als zij waren verondersteld om te doen, op zoek als dit:

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

Ik sloeg mijn hoofd tegen de muur voor een tijdje en gemerkt dat in de werkelijke HTML code is het genereren veel van lege <div> Tags, zoals:

<lichaam>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</lichaam>

(Het bovenstaande is waaaaaaaaaaaay gesimplificeerd.  De lege div-tags zijn volkomen geldig. Sommige van mijn <div> Tags waren vol van inhoud, maar veel meer waren niet.  Ik kwam tot het besef dat mijn <XSL:for-each> richtlijnen werden de korte vorm uitstoten div tags wanneer de xsl:for-each niet ' gegevens vinden.  Ik gedwongen een HTML-commentaar in de output, zoals:

image

 

Nadat ik deed dat, alle de div's mooi opgesteld en begon te werken mijn tabblad schakelen.

Zoals altijd, Ik hoop dat dit helpt iemand in een snuifje.

</einde>

Abonneren op mijn blog.

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

Nog meer jQuery–Een voorbeeld van de Image Resize

Ik een webonderdeel geërfd van de oude leverancier van een klant en het heeft een imagoprobleem grootte.  De beelden moeten worden 60×50 maar voor sommige vreemde reden, de originele leverancier hen gedwongen 42×42, dus kijken ze geplet:

 

Goed imago

Slecht beeld

Hier is de markering (enigszins vereenvoudigd):

<tabel klasse = 'uitgebreid-outlook'>
  <THEAD>
    <tr>
      <th  breedte ='100′>3 Dinsdag</th>
    </tr>
  </THEAD>

  <TBODY>
    <klasse tr = 'forecast'>
      <TD breedte ='100′>
        <UL>
          <Li klasse = 'hoog'>Hoge: 72&DEG;F</Li>
          <Li klasse = "laag">Lage: 44&DEG;F</Li>
          <Li klasse = 'voorwaarde'>Zonnig
            <img src =’
http://deskwx.WeatherBug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ breedte ='42’ hoogte ='42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </tr>

  </TBODY>

</tabel>

U zult merken dat hoewel de pad naar de afbeelding zelf toont de juiste dimensie (60×50) de originele leverancier gedwongen het in 42×42.  Waarom?  Gek.

Hoe dan ook, Ik wilde een snelle en gemakkelijke oplossing voor dit probleem en ik draaide me om jQuery.  De truc was om te zoeken alle van de passende <img> Tags.  Ik wilde niet met alle andere img-tags over muck (dat zijn er veel).  Deze bits van jQuery did naar de truc:

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

<script type = "text/javascript">
     $(document).klaar(functie () {

         $(' li.condition > img').elke(functie (index, item)
           
{
             $(item).CSS("breedte", "60"); 
             $(item).CSS("hoogte", "50");
            });
     }); // op document laden
</script>

Dat beetje van code vindt de collectie <Li> Tags waarvan klasse is "voorwaarde" en <img> kinderen.  Vervolgens doorlopen dat allemaal.  Werkte als een charme.

Ik zou waarschijnlijk het stroomlijnen, maar ik was nooit een de soort unix-kerel die opgelost π Aan 18 cijfers precisie met behulp van sed en awk en ik ben niet dat soort als jQuery guy hetzij Glimlach.

</einde>

Abonneren op mijn blog.

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

Neem controle van uw OK en annuleren knoppen

Ik schreef in dit artikel een tijdje terug, maar het lijkt erop dat ik niet aan het koppelen van mijn blog op het moment, Dus hier gaat:

image

Dit artikel beschrijft hoe te dwingen newform.aspx omleiden naar één pagina wanneer de gebruiker op OK en een andere pagina als ze op Annuleren klikt.

</einde>

Abonneren op mijn blog.

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

Quick Tip: JQuery toe te voegen aan MOSS publicatiepagina 's

Wanneer verbetering MOSS samenweking pagina's met behulp van jQuery, Ik raakte de volgende verkeersdrempel:

Serverfout in ' /’ Toepassing.


Parser fout

Beschrijving: Er is een fout opgetreden tijdens het parseren van een resource vereist om dit verzoek dienst. De volgende specifieke parse foutdetails Bekijk en wijzig uw bronbestand op de juiste wijze.

Parserfoutbericht: Alleen de besturingselementen voor inhoud rechtstreeks in een inhoudspagina die besturingselementen voor inhoud bevat zijn toegestaan.

Bronfout:

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

Bronbestand: /_catalogs/masterpage/KCC_FacultyMember.aspx    Lijn: 12


Versie-informatie: Microsoft..NET Framework versie:2.0.50727.4927; ASP.NET versie:2.0.50727.4927

Het was gemakkelijk genoeg is te bevestigen (h/t aan mijn collega, Uday Ethirajulu).  Zorg dat de jQuery code in de "PlaceHolderAdditionalPageHead" leeft zoals:

<ASP:Inhoud ContentPlaceholderID = 'PlaceHolderAdditionalPageHead" runat = 'server'>

<script

    type = "text/javascript"

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

</script>

<script type = "text/javascript">

  $(document).klaar(functie() {

   // Briljante jQuery spul gaat hier.

   });

</script>

</einde>

Abonneren op mijn blog.

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