Tag Archives: jQuery

XSLT dhe Mostrat jQuery

Unë kam qenë duke bërë një shumë e XSLT dhe jQuery dhe mendova se do të ndajnë disa copra pak se të tjerët mund të gjeni të dobishme në të ardhmen.

Shembull 1: Lëshojnë JavaScript thjeshtë / jQuery në XSLT:

<XSL:template match="something" xml:space="preserve">

  <!– Bosh jashtë query miqësore fushë filtra fshehur –>
  <script type="text/javascript">
    $(dokument).gati(funksion(){
      $("#QueryFriendlyFilters").val("empty");
    });
  </dorëshkrim>

</XSL:shabllon>

Kjo pak lëshon disa JavaScript që pret për faqe për të përfunduar ngarkimit (për shkak të $(dokument).gati(...)) dhe pastaj përcakton vlerën e një fushë të fshehur emrin QueryFriendlyFilters me vlerën literal "bosh".

Shembull 2: Përdorim <XSL:nëse> për të kontrolluar "e madhe se",  "Më pak se", etj.

<XSL:template match="something" xml:space="preserve">

  <div id="fdcAllFilters">
 
    <XSL:if test="@Count>0">
      <span class="fdcFilterLabel">Filtra aktuale:</hapësirë>
    </XSL:nëse>

    <!– shumë gjëra që ndodh këtu. –>

</XSL:shabllon>

Snippet më sipër kontrollon për të parë nëse një atribut i quajtur "Count" e elementit "diçka" është më i madh se zero.  XML prapa kjo do të jetë diçka si:"

<diçka Count = "5" />

Shembull 3: Iterate nëpër të gjitha elementet, interspersing thirrje jQuery.

<!– Iterate nëpër të gjitha filtrat dhe të shfaqin saktë  Lidhje. –>
<XSL:for-each select="UserFilter">

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

  <span class="fdcFilterLabel"><XSL:value-of select="@FilterValue"/></hapësirë>

  <script type="text/javascript">

    $(dokument).gati(funksion(){
        <XSL:tekst><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></XSL:tekst>\"<XSL:value-of select="@FilterValue"/>\"<XSL:tekst><![CDATA["));]]></XSL:tekst>
    });

  </dorëshkrim>

</XSL:për njëri->

Snippet e mësipërme është më komplekse dhe nuk mund të jetë mënyra më e lehtë për ta bërë atë.

XML prapa kjo duket afërsisht si kjo:

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

Kjo snippet është iterating përmes <UserFilter> nyjet. 

Ajo i parë lëshon një tag spirancë se kur klikohet thirret një funksion JavaScript që është tashmë në faqen, "MySubmitPage" dhe kalon vlerën e një atribut në <UserFilter> Nyja e quajtur "ID". 

Ajo pastaj lëshon disa jQuery që pret për faqe të ngarkesës.  Kjo jQuery përditësime një fushë fshehur quajtur "QueryFriendlyFilters" duke shtuar vlerën e atribut FilterValue.  Vini re të gjitha çmendur <XSL:tekst> dhe <![CDATA[ ... ]]> sende.

Kjo është ajo, shpresoj se kjo ndihmon!

</fund>

Abonohen në blogun tim.

Atëherë ejani pas meje në Twitter në http://www.twitter.com/pagalvin

Lists.asmx, GetListItems dhe dosjet

Unë kam qenë duke bërë disa kërkime për dikë sot rreth shërbimit të internetit list.asmx ofruara si pjesë e SharePoint 2010 (dhe më herët).  Ajo ishte në gjendje për të marrë sendet listë në dosjen rrënjë (duke përfshirë edhe emrat e sub-folders), por nuk mund të merrni artikuj në sub-folders.  I did some looking around on the internets and it’s a surprisingly common question.  Ende, I couldn’t get a good answer to the simple question, “if I know the folder, how do I get the items in the folder?"  To be honest, I didn’t try all that hard since I’ve wanted to figure this one out on my own for a while buzëqeshje.

To set this up, I created a site named “Blogging Scenarios” and a custom list named “Custom List with Sub Folders”.  I then created folders named:

  • Year 2005
  • Year 2006
  • Year 2007

I added a few items to the folder “Year 2006”.  Kjo është ajo që duket si:

image

My friend isn’t writing C# code but rather using Java, so the SOAP envelope was what she really needed.  To get that, I wrote a bit of jQuery and then used fiddler to get the actual HTTP conversation.

Here’s the relevant jQuery (I copied the code down below if you want to copy/paste):

image

They first key is to include both a <queryOptions> dhe <QueryOptions> node.  The second key is that the <Folder> node is a URL to which the client has access.

There may be other ways to get this, but this worked well for me when using jQuery.

Here is the SOAP envelope for the above:

<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org / sapun / Zarfi /’>                
  <soapenv:Trup>
    <GetListItems xmlns=’
http://schemas.microsoft.com / SharePoint / sapun /’>
      <listName>Custom List with Sub Folders</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef Name=’Title’ />
          <FieldRef Name=’EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>
http://demoserver1/Blogging Scenarios/lists/Custom List with Sub Folders/Year 2006</Folder>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Trup>
</soapenv:Zarf>

A lot of examples and discussion around this led me to believe that all I need was <QueryOptions> and specify a folder name.  Për mua, I need to both wrap it inside <queryOptions> as well as specify a fully qualified URL for the <Folder> node.

Here’s the jQuery AJAX setup:

$(dokument).gati(funksion() {
       var soapEnv =
           "<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org / sapun / Zarfi /’> \
               <soapenv:Trup> \
                    <GetListItems xmlns=’http://schemas.microsoft.com / SharePoint / sapun /’> \
                       <listName>Custom List with Sub Folders</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Name=’Title’ /> \
                              <FieldRef Name=’EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Scenarios/lists/Custom List with Sub Folders/Year 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Trup> \
           </soapenv:Zarf>";

</fund>

Abonohen në blogun tim.

Atëherë ejani pas meje në Twitter në http://www.twitter.com/pagalvin

Pafund Folezojnë <div> Tags dhe jQuery

Kjo duket si një temë e tillë oddball, Unë nuk jam i sigurt se kjo është me të vërtetë me vlerë rreth Blogging, por që kurrë nuk është ndalur mua para, kështu që këtu ne do të shkojmë buzëqeshje

Unë jam duke punuar në një projekt ku unë jam tërhequr disa të dhëna nga një kërkim, paketimin atë deri në një mesazh XML dhe pastaj se XML është transformuar përfundimisht në HTML me anë XSLT.  Nuk është një shumë e jQuery përfshirë, një grimë e cila zbaton disa funksionalitetin tastit tab.  Kur ju klikoni mbi një tab (vërtet, një <div>), jQuery invokes. fshehin() dhe. show() on divs ndryshme (ngarkesa fillestare faqe shkarkon të gjithë përmbajtjen kështu që nuk ka postbacks në këtë rast).

Një bandë e orë më parë, logjika tab kalimi filluar të sillen erratically dhe ajo nuk do të tregojë një prej tabs mi.  Unë përfundimisht gjurmuar atë poshtë për faktin se internet explorer (të paktën) mendonin se <div> tags mbivendosur tani, shumë më të thellë se Developer Toolbar intended.The do të tregojë:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Më në fund duke treguar ajo ishte e mbyllur të gjithë rrugën poshtë këtu!

Kështu, në qoftë se kam bërë një $("# Tab1Content").fsheh(), Unë do të fsheh Tab2 dhe unë kurrë nuk mund të tregojë Tab2 në qoftë se unë nuk e tregojnë gjithashtu Tab1.  I kopjuar dhe ngjit kodin e deri në studio vizuale dhe ajo i tregoi të gjitha rreshtim DIV-së deri bukur, ashtu si ata ishin menduar të jetë bërë, në kërkim si kjo:

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

I rrahur kokën time kundër murit për një kohë dhe të vënë re se në kodin aktual HTML është gjeneruar një shumë të zbrazët <div> tags, si:

<trup>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</trup>

(Sipër është waaaaaaaaaaaay thjeshtëzuar.  Tags boshe div janë krejtësisht të vlefshme. Disa nga tim <div> tags ishin plot e përmbajtjes, por shumë më tepër nuk ishin.  Unë kam ardhur në realizimin se im <XSL:për njëri-> Direktivat janë emitting-shkurtra formë tags div kur XSL:për njëri-nuk 'gjejnë ndonjë të dhënave.  I detyruar një koment HTML në dalje, siç tregohet:

image

 

Pasi unë e bëri atë, div të gjitha është rreshtuar bukur dhe switching im tab filluar pune.

Si gjithmonë, Unë shpresoj se kjo ndihmon dikush në një majë.

</fund>

Abonohen në blogun tim.

Atëherë ejani pas meje në Twitter në http://www.twitter.com/pagalvin

JQuery akoma më shumë–Ndrysho një shembull Image

Kam trashëguar një pjesë të internetit nga shitësi vjetër të klientit dhe ajo ka një problem me permasa të imazhit.  Imazhet duhet të jetë 60×50 por për disa arsye të çuditshme, shitësi origjinal detyruar ato në 42×42, kështu që ata shikojnë hequr:

 

Image Mirë

Image Bad

Ja markup (thjeshtuar disi):

<'zgjeruar-opinion' tabelë class =>
  <thead>
    <tr>
      <th  width = '100′>3 E martë</th>
    </tr>
  </thead>

  <tbody>
    <tr class = 'parashikimi'>
      <td width = '100′>
        <st>
          <li class = 'të lartë'>I lartë: 72&ju;F</li>
          <li class = 'të ulët'>Ulët: 44&ju;F</li>
          <'kusht' LI class =>Me diell
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ height = '42’ alt =” />
          </li>
        </st>
      </td>
    </tr>

  </tbody>

</tryezë>

Ju do të vini re se edhe pse rruga për imazhin e vetë tregon dimensionin e duhur (60×50) shitësi origjinal të detyruar atë në 42×42.  Përse?  I çmendur.

Dosido, Doja një zgjidhje të shpejtë dhe të lehtë për këtë çështje dhe unë u kthye për të jQuery.  Qëllimi ishte për të gjetur të gjitha të përshtatshme <img> tags.  Unë nuk dua të endem me ndonjë tags img tjera (të cilat nuk janë shumë).  Kjo pak e jQuery ka mashtrim:

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

<script type="text/javascript">
     $(dokument).gati(funksion () {

         $(‘li.condition > 'img).çdo(funksion (indeks, artikull)
           
{
             $(artikull).css("width", "60"); 
             $(artikull).css("height", "50");
            });
     }); // on ngarkesës dokumentin
</dorëshkrim>

Se pak e kodit gjen mbledhjen <li> tags cilëve klasë është "kusht" dhe <img> fëmijët.  Ajo pastaj iterates nëpër të gjithë se.  Ka punuar si një hajmali.

Unë ndoshta mund të modernizojë atë, por unë kurrë nuk ishte një lloj i djalë unix që zgjidhet π në 18 shifrat saktësi duke përdorur sed dhe awk dhe unë nuk jam se lloji qoftë djalë jQuery ose buzëqeshje.

</fund>

Abonohen në blogun tim.

Atëherë ejani pas meje në Twitter në http://www.twitter.com/pagalvin

Merrni kontrollin e tuaj dhe OK Cancel Buttons

I shkroi ky artikull një prapa ndërsa, por si duket nuk e kam të lidhura me atë nga blogun tim në kohën, kështu që këtu shkon:

image

Ky artikull përshkruan se si për të detyruar newform.aspx të përcjellim në një faqe kur përdoruesi klikon OK dhe një faqe të ndryshme, kur ajo klikimeve anuloj.

</fund>

Abonohen në blogun tim.

Atëherë ejani pas meje në Twitter në http://www.twitter.com/pagalvin

Tip i shpejtë: Shtimi jQuery për Moss Faqet botuese

Kur rritjen faqet Moss publising duke përdorur jQuery, I goditi përplasem në vijim shpejtësi:

Server Error in ‘/’ Aplikim.


Error Parser

Përshkrim: Një gabim ka ndodhur gjatë parsing e burimeve të kërkuara për shërbim këtë kërkesë. Ju lutemi të shqyrtojë këto detaje specifike Parse error dhe të modifikojë dosjen tuaj burim të përshtatshme.

Error Parser Mesazh: Kontrollet janë të lejuara vetëm përmbajtje direkt në një faqe që përmban përmbajtje kontrollet Content.

Error Burimi:

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

Burimi i dokumentit: /_catalogs / masterpage / KCC_FacultyMember.aspx    Linjë: 12


Informacione version: Microsoft. Version NET Framework:2.0.50727.4927; ASP.NET Version:2.0.50727.4927

Ajo ishte e lehtë të mjaftueshme për të rregulluar (h / t kolegut tim, Uday Ethirajulu).  Jetë i sigurt se kodi jQuery jeton brenda "PlaceHolderAdditionalPageHead", siç tregohet:

<nëpërkë:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">

<dorëshkrim

    type="text/javascript"

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

</dorëshkrim>

<script type="text/javascript">

  $(dokument).gati(funksion() {

   // Sende Brilliant jQuery shkon këtu.

   });

</dorëshkrim>

</fund>

Abonohen në blogun tim.

Atëherë ejani pas meje në Twitter në http://www.twitter.com/pagalvin