Arkivji tal-Kategorija: jQuery u SharePoint

Jingħelbu Annoying Problema bil URLs relattiva fil SharePoint Quick Tnedija

I wanted to add a link to the quick launch navigation the other day and SharePoint told me:

image

Pure text version of that is:

Ensure that the URL is valid and begins with either a valid character (a number sign (#) or forward slash (/)) or a valid supported protocol (per eżempju, ‘http://", ‘https://", ‘file://", ‘ftp://", ‘mailto:", ‘news:").

“Blech and pox!” I said.

A workaround to this is to use JavaScript to find a known link in the quick launch and override its behavior.

To test this, add a new link to your test site thusly:

image

I used jQuery. To solve it, get some JavaScript and jQuery onto the page using your favorite technique and with a line of code like this:

 

$(dokument).lest( funzjoni () {

    $("a:contains('Test URL replacement')").ikklikkja(funzjoni () { alert("changed click behavior!"); ritorn falza;});

});

And Bob’s your uncle.

The jQuery selector finds every <a> tag that has “Test URL replacement” in its name. You may want to find-tune that depending on your link and such.

The .click(funzjoni() overrides whatever SharePoint would have done when the user clicked. Make sure you “return false” or else it will do your stuff and then try to the href thing too, which is almost certainly not your goal.

This was done and test in a SharePoint online environment but should work well in 2010 and earlier too.

</aħħar>

undefinedAbbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Quick u sempliċi: Solve "Invalid URL Parametru” problema bil UpdateListItems fil lists.asmx

When working with UpdateListItems via lists.asmx, it’s easy to generate the error:

Invalid URL Parameter.

The URL provided contains an invalid Command or Value. Please check the URL again.

You can get this error when you forget to include ID in the the list of fields to update.  Dan, like a lot of these SP web services, is a bit counterintuitive since you need to include the ID in the ID attribute of the <Method> element.  And you’re not updated ID and probably never want to in the first place.

This SOAP envelope works:

<soapenv:Xmlns Pakkett:soapenv ='http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Korp>                      
    <UpdateListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>                     
      <Jwaqqgħu l-weraq>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</Jwaqqgħu l-weraq>                     
        <updates>                     
         <Batch OnError="Continue">
          <Method ID="1" Cmd="Update">
            <Field Name="CooperativeLock">locked!</Field>
            <Field Name="ID">1</Field>
          </Method>
        </Batch>                     
        </updates>                
      </UpdateListItems>             
  </soapenv:Korp>         
</soapenv:Envelop>

If you strip out the ID field reference then you’ll get the annoying “Invalid URL parameter” message.

</aħħar>

undefinedAbbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

 

Caching Man Poor JavaScript

[TL;DR version: use cookies to store the results of async calls; render the results of past async calls immediately and then validate them after page-load.]

I’ve been working on SharePoint intranet site for a client that features, fost affarijiet oħra, a stylized secondary navigation whose menu options are managed via a regular old custom list.  The idea is that the client gets to control “their” site’s menu without affecting or being affected by the global navigation put out by IT.

(there is something incredibly subversive about adding a CEWP that points to an HTML file that loads some CSS and JS to fundamentally alter almost everything about a site’s behavior… but that’s for another post)

The code for this pretty simple:

The sore spot here is that every time anyone hits one of the site’s pages, that user’s web browser is reaching out to get items from the list.  Once dev is complete and testing has proven things to be stable and complete, this call is unnecessary more than 99% of the time since the menu rarely changes.  It also has a weird UI affect which is common in this brave new world of hyper-ajaxy web sites – the page renders and only then does the menu render.  It’s jittery and distracting in my view.  And jittery. Allura, caching. 

I modified the logic thusly:

  • Look for a cookie in the browser that contains the menu as I last read it
    • If found, render it immediately.  Don’t wait for the page to finish loading.  (You need to make sure your HTML is strategically placed here, but it’s not hard to do).
  • Wait for the page to finish loading and make an async call to load up menu items from a list using REST or lists.asmx or whatever
  • Compare what I got against the cookie
    • If it matches, STOP
    • Otherwise, using jQuery, dynamically populate a bunch if <LI>’s in a <st>
  • Use CSS to do all the formatting
  • Profit!

Some of you are going to say, “hey! there’s no real caching going on here since you’re reading the menu anyway every single time."  And you’re right – I’m not giving the server any kind of break.  But because the call is async and happens after the page’s initial HTML payload fully renders, it “feels” more responsive to the user.  The menu renders pretty much as the page draws.  If the menu happens to the change, the user is subjected to a jittery re-draw of the menu, but only that one time.

There are some ways to make this caching more effective and help out the server at the same time:

  • Put in a rule that the “cookie cache” is valid for a minimum of 24 hours or some other timeframe. As long as there is no expired cookie, use the cookie’s menu snapshot and never hit the server.

Well … that’s all that come to mind right now :). 

If anyone has any clever ideas here I’d love to know them.

And lastly – this technique can be used for other stuff.  This client’s page has a number of data-driven things on various pages, many of them changing relatively rarely (like once a week or once a month).  If you target specific areas of functionality, you can give a more responsive UI by pulling content from the local cookie store and rendering immediately.  It feels faster to the user even if you’re not saving the server any cycles.  You can save the server cycles by deciding on some conditions and triggers to invalidate this local cookie cache.  That’s all situational and artsy stuff and really the most fun :). 

</aħħar>

undefinedAbbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

XSLT u kampjuni jQuery

I ġew jagħmlu ħafna ta XSLT u jQuery u ħsibt I d jaqsmu siltiet ftit li oħrajn jistgħu jsibu utli fil-futur.

Eżempju 1: Jarmu JavaScript sempliċi / jQuery fil XSLT:

<XSL:mudell logħba = "xi ħaġa,,en,tip iskrittura = "test / javascript",,en,"#QueryFriendlyFilters",,en,"Vojta",,en,div id = "fdcAllFilters",,en,jekk test = "@ Għadd,,en,span class = "fdcFilterLabel",,en,għal-kull tagħżel = "UserFilter",,en,klassi = "FilterHref,,en,href = "javascript,,en,"RemoveUserFilter",,en,valur tal agħżel = "@ FilterValue" /,,en,kummenti lill XSLT u kampjuni jQuery,,en,Andres,,en,Awissu 30,,en,Nista 'nuża dan l-approċċ biex jiffiltraw webparts lista multipli SharePoint permezz ta' XSLT,,en,Huwa qedem f'dan il-punt u so I mhux se nipprova,,en" xml:space="preserve">

  <!– Blank l-filtri friendly qasam moħbija query –>
  <script type="text/javascript">
    $(dokument).lest(funzjoni(){
      $("#QueryFriendlyFilters").val("empty");
    });
  </iskrittura>

</XSL:template>

Li ftit temetti xi JavaScript li tistenna l-paġna biex jintemm tagħbija (minħabba l- $(dokument).lest(...)) u mbagħad tistabbilixxi l-valur ta 'qasam moħbija jismu QueryFriendlyFilters għall-valur letterali "vojta".

Eżempju 2: Użu <XSL:jekk> biex jiċċekkjaw "akbar minn",  "Inqas minn", eċċ.

<XSL:mudell logħba = "xi ħaġa,,en,tip iskrittura = "test / javascript",,en,"#QueryFriendlyFilters",,en,"Vojta",,en,div id = "fdcAllFilters",,en,jekk test = "@ Għadd,,en,span class = "fdcFilterLabel",,en,għal-kull tagħżel = "UserFilter",,en,klassi = "FilterHref,,en,href = "javascript,,en,"RemoveUserFilter",,en,valur tal agħżel = "@ FilterValue" /,,en,kummenti lill XSLT u kampjuni jQuery,,en,Andres,,en,Awissu 30,,en,Nista 'nuża dan l-approċċ biex jiffiltraw webparts lista multipli SharePoint permezz ta' XSLT,,en,Huwa qedem f'dan il-punt u so I mhux se nipprova,,en" xml:space="preserve">

  <div id="fdcAllFilters">
 
    <XSL:if test="@Count>0">
      <span class="fdcFilterLabel">Filtri kurrenti:</medda>
    </XSL:jekk>

    <!– Jittieħed aktar jiġri hawn. –>

</XSL:template>

Il-snippet hawn fuq kontrolli biex tara jekk attribut imsejjaħ "Count" tal-element "xi ħaġa" huwa akbar minn zero.  Il-XML wara dan tkun xi ħaġa simili:"

<xi ħaġa Count = "5" />

Eżempju 3: Jtenni permezz elementi kollha, interspersing sejħiet jQuery.

<!– Jtenni kollha permezz tal-filtri u juru l-korretta  rabtiet. –>
<XSL:for-each select="UserFilter">

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

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

  <script type="text/javascript">

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

  </iskrittura>

</XSL:għal-kull>

Il-snippet hawn fuq huwa ferm aktar kumpless u jista 'jkun hemm modi iktar faċli biex tagħmel dan.

Il-XML wara dan jistenna madwar bħal dan:

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

Dan snippet hija mtennija permezz <User Iffiltra> nodes. 

L-ewwel temetti ankra tag li meta għafast jinvoka funzjoni JavaScript li huwa diġà fis-paġna, "MySubmitPage" u jgħaddi l-valur ta 'attribut fuq il- <User Iffiltra> node imsejjaħ "ID". 

Imbagħad temetti ftit jQuery li tistenna l-paġna għal tagħbija.  Li l-aġġornamenti jQuery qasam moħbija imsejjaħ "QueryFriendlyFilters" billi żżid il-valur ta 'l-attribut FilterValue.  Innota l-crazy <XSL:test> u <![CDATA[ ... ]]> Jittieħed.

Li huwa, tama dan jgħin!

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Lists.asmx, GetListItems u folders

I kienet tagħmel xi riċerka għal xi ħadd illum madwar id-servizz web list.asmx pprovduta bħala parti mill SharePoint 2010 (u qabel).  Hija kienet kapaċi tikseb l-oġġetti lista fil-folder għerq (inklużi l-ismijiet tas-sub-folders), iżda ma setgħux jiksbu oġġetti f'sub-folders.  I ma xi tfittex madwar fuq il-internets u huwa kwistjoni sorprendentement komuni.  Madankollu, I ma setgħux jiksbu risposta tajba għall-mistoqsija sempliċi, "Jekk Naf li l-folder, kif nista 'nikseb l-oġġetti fil-folder?"  Biex inkun onest, I ma tipprova kollu li diffiċli peress stajt riedu figura dan wieħed fuq tiegħi stess għal waqt Tbissem.

Biex jistabbilixxu dan up, I ħolqot sit jismu "Xenarji Blogging" u lista tad-dwana bl-isem "Lista Custom mal folders Sotto".  I imbagħad maħluqa folders msemmija:

  • Sena 2005
  • Sena 2006
  • Sena 2007

I miżjuda ftit punti għall-folder "Sena 2006".  Dan huwa dak li jidher qisu:

image

My friend ma jkunx miktub C # kodiċi iżda pjuttost jużaw Java, sabiex il-pakkett SAPUN kien dak li hi verament meħtieġ.  Biex tikseb li, I kiteb daqsxejn ta 'jQuery u mbagħad użata fiddler biex jiksbu l-konversazzjoni HTTP attwali.

Hawn il-jQuery rilevanti (I kkupjati-kodiċi stabbiliti hawn taħt jekk inti tixtieq li kopja / paste):

image

Huma l-ewwel importanti hu li jinkludu kemm <queryOptions> u <QueryOptions> node.  It-tieni muftieħ huwa li l- <Folder> node huwa URL li l-klijent ikollu aċċess.

Jista 'jkun hemm modi oħra biex tikseb dan, iżda dan ħadem tajjeb għalija meta jużaw jQuery.

Hawn hu l-pakkett SAPUN għal dan t'hawn fuq:

<soapenv:Xmlns Pakkett:soapenv =’http://schemas.xmlsoap.org / sapun / pakkett /’>                
  <soapenv:Korp>
    <Xmlns GetListItems =’
http://schemas.microsoft.com / Sharepoint / sapun /’>
      <Jwaqqgħu l-weraq>Lista Custom mal folders Sotto</Jwaqqgħu l-weraq>
      <viewFields>  
        <ViewFields>
          <FieldRef Isem = "Titolu’ />
          <FieldRef Isem = "EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>
http://demoserver1/Blogging Xenarji / listi / Lista Custom mal folders Sotto / Sena 2006</Folder>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Korp>
</soapenv:Envelop>

A lott ta 'eżempji u diskussjoni madwar dan wasslitni biex jemmnu li kollha I bżonn kien <QueryOptions> u tispeċifika isem folder.  Għalija, I-ħtieġa li kemm wrap dan ġewwa <queryOptions> kif ukoll tispeċifika URL ikkwalifikat bis-sħiħ għall- <Folder> node.

Hawn il-setup Ajax jQuery:

$(dokument).lest(funzjoni() {
       kien soapEnv =
           "<soapenv:Xmlns Pakkett:soapenv =’http://schemas.xmlsoap.org / sapun / pakkett /’> \
               <soapenv:Korp> \
                    <Xmlns GetListItems =’http://schemas.microsoft.com / Sharepoint / sapun /’> \
                       <Jwaqqgħu l-weraq>Lista Custom mal folders Sotto</Jwaqqgħu l-weraq> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Isem = "Titolu’ /> \
                              <FieldRef Isem = "EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Xenarji / listi / Lista Custom mal folders Sotto / Sena 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Korp> \
           </soapenv:Envelop>";

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Lists.asmx, GetList u "Valur ma tistax tkun nulla”

Skoprejt illum li l-GetList() metodu lists.asmx servizz web għandu jiġi msejjaħ b'reqqa jew huwa suxxettibbli li tarmi misterjuża "valur ma jistax jiġi null" eċċezzjoni (u thats jekk wieħed jassumi inti tista 'tikseb passat il-messaġġ ta' żball saħansitra agħar ġeneriku, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ kien jintefa. ")  Speċifikament, I sabet li inti ma tistax tipprovdi xi tip ta 'prefiss fuq il-metodu GetList.  Il snippet jQuery li ġej juri l-punt:

image

Jekk inti tagħmel dan, is-servizz web jirrispondi "valur ma jistax jiġi null" bħala kull din fiddler-sakemm traskrizzjoni HTTP:

<?xml version="1.0" encoding="utf-8"?>
  <sapun:Envelop
     xmlns:sapun ="
http://schemas.xmlsoap.org / sapun / pakkett /"    
     xmlns:XSi = "
http://www.w3.org/2001/XMLSchema-instance"
     xmlns:xsd ="
http://www.w3.org/2001/XMLSchema">

  <sapun:Korp>
    <sapun:Tort>
      <faultcode>sapun:Server</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ kien jintefa.
      </faultstring>
      <dettall>
        <xmlns spag żball ="
http://schemas.microsoft.com / Sharepoint / sapun /">
Valur ma jistax ikun null.
        </errorstring>
      </dettall>
    </sapun:Tort>
  </sapun:Korp>
</sapun:Envelop>

Of course, inti probabilment ma jżidx li "s0" prefiss fuq tiegħek, iżda xi għodda huma suxxettibbli li jagħmlu dan (bħal Eclipse).

Dan huwa aktar konfużjoni / frustranti minħabba metodi oħra jittolleraw prefissi.  Per eżempju, l- GetListCollection metodu ma mind jekk huwa kien prefissi, anke ma 'prefissi nonsense bħal "xyzzy":

image

Din il-"valur ma jistax ikun null" tidher pjuttost komuni ma lists.asmx hekk nisperaw li dan se jgħinu lil xi ħadd fil-futur.

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Endlessly jbejtu <div> Tags u jQuery

Din tidher qisha tali suġġett oddball, M'inix ċert li huwa verament jiswa blogging dwar, iżda li qatt ma waqfet lili qabel, hekk here we go Tbissem

Jien jaħdmu fuq proġett fejn jien ġbid xi data minn tfittxija, packaging it up into an XML message and then that XML is ultimately transformed into HTML via XSLT.  There’s a lot of jQuery involved, one bit of which implements some tabbing functionality.  When you click on a tab (verament, a <div>), jQuery invokes .hide() and .show() on various divs (the initial page load downloads all the content so there are no postbacks in this case).

A bunch of hours ago, the tab switching logic started to behave erratically and it wouldn’t show one of my tabs.  I ultimately tracked it down to the fact that internet explorer (inqas) thought that the <div> tags nested far, far deeper than intended.The developer toolbar would show:

-<div id=”Tab1Content”>
  -<div>
    -<div>
      -<div id=”Tab2Content”>
        -<div>
           …………………………
                   </div>  <—finally showing it was closed all the way down here!

Allura, if I did a $(“#Tab1Content”).hide(), I’d also hide Tab2 and I could never show Tab2 if I didn’t also show Tab1.  I copied and pasted the code up into visual studio and it showed all of the div’s lining up nicely, just like they were supposed to be doing, looking like this:

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

I beat my head against the wall for a while and noticed that in the actual HTML code was generating a lot of empty <div> tags, like:

<korp>

  <div id=”Tab1Content”>

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

  </div>

  <div id=”Tab2Content”>

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

  </div>

</korp>

(The above is waaaaaaaaaaaay oversimplified.  The empty div tags are totally valid. Some of my <div> tags were full of content, but many more were not.  I came to the realization that my <XSL:għal-kull> directives were emitting the short-form div tags when the xsl:for-each didn’t’ find any data.  I forced an HTML comment into the output, kif muri:

image

 

After I did that, all the div’s lined up nicely and my tab switching started working.

As always, I hope this helps someone in a pinch.

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Madankollu Aktar jQuery–Resize Image 1 Eżempju

I wiret parti minn bejjiegħ web qodma klijent u hija għandha problema daqs immaġini.  L-immaġini għandha tkun ta '60×50 iżda għal xi raġuni fard, il-bejjiegħ oriġinali sfurzat tagħhom fiċ 42×42, hekk huma jfittxu squashed:

 

Image Tajba

Bad Image

Hawn il-markup (kemmxejn simplifikata):

<tabella klassi = "estiż-prospetti">
  <thead>
    <tr>
      <th  wisa '= '100′>3 It-Tlieta</th>
    </tr>
  </thead>

  <tbody>
    <tr klassi = "previżjoni">
      <wisa td = '100′>
        <st>
          <Li klassi = "għolja">Għolja: 72&inti;F</LI>
          <Li klassi = "baxxa">Baxxa: 44&inti;F</LI>
          <Li klassi = "kundizzjoni">Sunny
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ wisa '= '42’ għoli = '42’ alt =” />
          </LI>
        </st>
      </td>
    </tr>

  </tbody>

</tabella>

Int ser ikollok tinnota li għalkemm il- passaġġ għall-immaġni innifsu turi d-dimensjoni xierqa (60×50) il-bejjiegħ oriġinali sfurzata fil 42×42.  Għaliex?  Crazy.

Xorta waħda, Jien ridt soluzzjoni malajr u faċli biex din il-kwistjoni u I daru lejn jQuery.  Il-trick kien li jillokalizza kollha tal-każ <img> tags.  I ma riedx li muck dwar ma 'xi tags img oħra (li minnhom hemm ħafna).  Din id-daqsxejn ta 'jQuery għamlet il-trick:

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

<script type="text/javascript">
     $(dokument).lest(funzjoni () {

         $(‘li.condition > img ").kull(funzjoni (indiċi, partita)
           
{
             $(partita).css("width", "60"); 
             $(partita).css("height", "50");
            });
     }); // fuq it-tagħbija dokument
</iskrittura>

Li ftit tal-kodiċi ssib il-ġbir <LI> tags li klassi hija "kundizzjoni" u <img> tfal.  Imbagħad ttenni kollha permezz ta 'dak.  Maħduma bħal CHARM.

I probabilment setgħu simplifikata, imma jien qatt ma kien it-tip ta 'Unix Guy li solvuti π li 18 numri preċiżjoni jużaw il zat u awk u jien ma dak it-tip jekk Guy jQuery jew Tbissem.

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Timplimenta Sistema Globali Notifika Pop-up

I kiteb up 'oġġett għall www.sharepoint.briefing.com intitolat "Timplimenta Sistema Globali Notifika Pop-up."  Din il-funzjoni ġiet implimentata għal kulleġġ komunità li jikkomunikaw closings iskola minħabba borra u ibqa 'sejjer hekk. 

Hija tuża lista custom, barra mill-servizzi tal-web SharePoint kaxxa u xi jQuery biex jagħmlu x-xogħol.

Hawn teaser:

image

Aqra l-ħaġa sħiħa hawn: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Ħu Kontroll tal OK tiegħek u Ikkanċella Buttuni

I kiteb dan l-artikolu lura waqt li, imma qisu jien ma link għaliha mill-blog tiegħi fil-ħin, hekk hawn tmur:

image

Dan l-artikolu tiddeskrivi kif seħħ newform.aspx biex idawwru għal paġna waħda meta l-utent klikks OK u paġna differenti meta hi klikks tikkanċella.

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin