jamii Archives: jQuery na SharePoint

Kuondokana na Annoying Tatizo na Uzito URL katika SharePoint Quick Uzinduzi

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

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 (kwa mfano, ‘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:

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

$(hati).tayari( kazi () {

    $("a:contains('Test URL replacement')").bonyeza(kazi () { tahadhari("changed click behavior!"); kurudi uongo;});

});

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(kazi() 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.

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Haraka na rahisi: Kutatua "Kigezo batili URL” tatizo na UpdateListItems katika lists.asmx

1 Kujibu

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. Hii, 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:Bahasha xmlns:soapenv ='http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Mwili>                      
    <UpdateListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>                     
      <Deciduous>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</Deciduous>                     
        <updates>                     
         <Batch OnError="Continue">
          <Method ID="1" Cmd="Update">
            <Field Name="CooperativeLock">locked!</Shamba>
            <Field Name="ID">1</Shamba>
          </Method>
        </Batch>                     
        </updates>                
      </UpdateListItems>             
  </soapenv:Mwili>         
</soapenv:Bahasha>

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

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Caching maskini Man katika JavaScript

1 Kujibu

[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, miongoni mwa mambo mengine, 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:

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
Using jQuery, dynamically populate a bunch if <li>’s inside a parent <st> (see Christian Pinder’s article here for a simplistic explanation of this tecnnique)
Use CSS to do all the formatting
Profit!

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. Hivyo, 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
Vinginevyo, 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 :).

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

XSLT na Sampuli jQuery

2 majibu

Nimekuwa kufanya mengi ya ya XSLT na jQuery na mawazo ningependa kushiriki snippets wachache wengine wanaweza kupata manufaa katika siku zijazo.

Mfano 1: Emit JavaScript rahisi / jQuery katika XSLT:

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

<!– Tupu nje ya swala filters kirafiki siri shamba –>
<script type="text/javascript">
    $(hati).tayari(kazi(){
      $("#QueryFriendlyFilters").val("empty");
    });
</script>

</xsl:template>

Kwamba kidogo hutoa baadhi JavaScript kwamba tusubiri kwa ukurasa kumaliza upakiaji (kwa sababu ya $(hati).tayari(...)) na kisha unaweka thamani ya shamba siri aitwaye QueryFriendlyFilters kwa thamani halisi "tupu".

Mfano 2: Kutumia <xsl:kama> kuangalia "kubwa kuliko", "Chini ya", nk.

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

<div id="fdcAllFilters">

    <xsl:if test="@Count>0">
      <span class="fdcFilterLabel">Sasa filters:</span>
    </xsl:kama>

    <!– zaidi stuff kinachotokea hapa. –>

</xsl:template>

snippet juu ya hundi ya kuona kama sifa aitwaye "Count" ya kipengele "kitu" ni kubwa kuliko sufuri. XML nyuma ya hii itakuwa kitu kama:"

<kitu Count = "5" />

Mfano 3: Iterate kupitia mambo yote, interspersing wito jQuery.

<!– Iterate kupitia filters wote na kuonyesha sahihi viungo. –>
<xsl:for-each select="UserFilter">

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

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

<script type="text/javascript">

    $(hati).tayari(kazi(){
        <xsl:Nakala><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></xsl:Nakala>\"<xsl:value-of select="@FilterValue"/>\"<xsl:Nakala><![CDATA["));]]></xsl:Nakala>
    });

</script>

</xsl:kwa-kila>

snippet juu ni ngumu zaidi na kunaweza kuwa rahisi njia ya kufanya hivyo.

XML nyuma ya hii inaonekana takribani kama hii:

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

Snippet hii ni iterating kupitia <Mtumiaji Filter> nodes.

Ni kwanza hutoa tag nanga kwamba wakati clicked waomba kazi JavaScript kwamba tayari ni juu ya ukurasa, "MySubmitPage" na hupita thamani ya sifa juu ya <Mtumiaji Filter> nodi aitwaye "ID".

Ni kisha hutoa baadhi jQuery kwamba tusubiri kwa ukurasa kupakia. Kwamba jQuery updates shamba siri aitwaye "QueryFriendlyFilters" kwa kuongeza thamani ya sifa FilterValue. Kumbuka mambo yote <xsl:Nakala> na <![CDATA[ ... ]]> mambo.

Hiyo ni, matumaini inasaidia!

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Lists.asmx, GetListItems na Folders

6 majibu

Mimi nilikuwa kufanya baadhi ya utafiti kwa ajili ya mtu leo karibu huduma list.asmx mtandao zinazotolewa kama sehemu ya SharePoint 2010 (na mapema). Aliweza kupata vitu orodha katika folder mizizi (ikiwa ni pamoja na majina ya ndogo folders-), lakini hakuweza kupata vitu katika sub-folders. Sikuweza baadhi kuangalia kote juu ya internets na ni swali kushangaza kawaida. Hata hivyo, Sikuweza kupata jibu zuri kwa swali rahisi, "Kama najua folder, jinsi gani mimi kupata vitu katika folder?" Kuwa waaminifu, Mimi si kujaribu ngumu kwamba wote tangu nimekuwa alitaka kufikiri hii moja nje peke yangu kwa muda Smile .

Kuweka hii up, Mimi umba tovuti aitwaye "Mabalozi Matukio ya" na orodha desturi aitwaye "Desturi Orodha Folders na Sub". Mimi kisha kuundwa folders aitwaye:

Mwaka 2005
Mwaka 2006
Mwaka 2007

Mimi aliongeza vitu kadhaa na "Mwaka 2006" folder. Hii ni nini inaonekana kama:

Rafiki yangu si kuandika C # kanuni lakini badala ya kutumia Java, hivyo bahasha sabuni ilikuwa nini yeye kweli inahitajika. Kupata kwamba, Niliandika kidogo ya jQuery na kisha kutumika fiddler kupata halisi HTTP mazungumzo.

Hapa ni jQuery husika (Mimi kunakiliwa kanuni chini chini kama unataka nakala / kuweka):

Wao muhimu ya kwanza ni pamoja na wawili <queryOptions> na <QueryOptions> nodi. muhimu ya pili ni kwamba <Folder> nodi ni URL ambayo mteja ana upatikanaji.

Kunaweza kuwa na njia nyingine ya kupata hii, lakini hii kazi vizuri kwa ajili yangu wakati wa kutumia jQuery.

Hapa ni bahasha sabuni kwa juu:

<soapenv:Bahasha xmlns:soapenv =’http://schemas.xmlsoap.org / sabuni / bahasha /’>
<soapenv:Mwili>
    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / sabuni /’>
      <Deciduous>Orodha ya desturi na Folders Sub</Deciduous>
      <viewFields>
        <ViewFields>
          <FieldRef Jina = 'Kichwa’ />
          <FieldRef Jina = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>http://demoserver1/Blogging Matukio / orodha / Orodha ya Desturi na Folders Sub / Mwaka 2006</Folder>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
</soapenv:Mwili>
</soapenv:Bahasha>

mengi ya mifano na majadiliano kote hii imesababisha mimi kuamini kwamba kila nahitaji mara <QueryOptions> na kutaja jina folder. Kwa ajili yangu, Nahitaji wote wrap ndani ya <queryOptions> vilevile kutaja URL kikamilifu waliohitimu kwa <Folder> nodi.

Hapa ni jQuery AJAX kuanzisha:

$(hati).tayari(kazi() {
       mara soapEnv =
           "<soapenv:Bahasha xmlns:soapenv =’http://schemas.xmlsoap.org / sabuni / bahasha /’> \
               <soapenv:Mwili> \
                    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / sabuni /’> \
                       <Deciduous>Orodha ya desturi na Folders Sub</Deciduous> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Jina = 'Kichwa’ /> \
                              <FieldRef Jina = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Matukio / orodha / Orodha ya Desturi na Folders Sub / Mwaka 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Mwili> \
           </soapenv:Bahasha>";

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Lists.asmx, GetList na "Thamani hawezi kuwa null”

1 Kujibu

Niligundua kwamba leo GetList() method in lists.asmx web service has to be called very carefully or it’s prone to throw a mysterious “Value cannot be null” exception (na hiyo ni kuchukua unaweza kupata nyuma ujumbe mbaya zaidi generic kosa, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ akatupwa. ") Hasa, I found that you can’t provide any kind of prefix on the GetList method. The following jQuery snippet illustrates the point:

If you do that, the web service responds with “Value cannot be null” as per this fiddler-provided HTTP transcript:

<?xml version="1.0" encoding="utf-8"?>
<soap:Bahasha
     xmlns:soap="http://schemas.xmlsoap.org / sabuni / bahasha /"
     xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance"
     xmlns:xsd="http://www.w3.org/2001/XMLSchema">

<soap:Mwili>
    <soap:Fault>
      <faultcode>soap:Server</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ was thrown.
      </faultstring>
      <detail>
        <errorstring xmlns="http://schemas.microsoft.com / SharePoint / sabuni /">
Value cannot be null.
        </errorstring>
      </detail>
    </soap:Fault>
</soap:Mwili>
</soap:Bahasha>

Bila shaka, you probably wouldn’t add that “s0” prefix on your own, but some tools are prone to do it (like Eclipse).

This is all the more confusing / frustrating because other methods tolerate prefixes. Kwa mfano, the GetListCollection Njia haina akili kama imekuwa ni prefixed, hata na viambishi awali nonsense kama "xyzzy":

Hii "thamani hawezi kuwa null" inaonekana haki ya kawaida na lists.asmx hivyo hopefully hii itasaidia mtu nje katika siku zijazo.

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Ukomo nesting <div> Tags na jQuery

Acha reply

Hii inaonekana kama vile mada oddball, Sina uhakika ni kweli thamani ya mabalozi kuhusu, lakini hiyo ni kamwe kusimamishwa mimi kabla, hivyo hapa sisi kwenda Smile

Nafanya kazi katika mradi ambapo nina kuunganisha baadhi ya data kutoka tafuta, ufungaji ni juu katika ujumbe XML na kisha kuwa XML ni hatimaye kubadilishwa katika HTML kupitia XSLT. Kuna mengi ya jQuery kushiriki, moja kidogo ya ambayo kutekeleza baadhi ya utendaji tabbing. Wakati bonyeza tab (kweli, a <div>), jQuery waomba kujificha.() na show.() juu ya divs mbalimbali (awali ukurasa mzigo downloads maudhui yote hivyo kuna postbacks hakuna katika kesi hii).

rundo la masaa iliyopita, tab byte mantiki kuanza kuishi erratically na itakuwa si kuonyesha moja ya tabo yangu. Mimi hatimaye kupatikana kwa chini na ukweli kwamba mtandao Explorer (angalau) walidhani kwamba <div> vitambulisho Furushi mbali, mbali zaidi kuliko toolbar intended.The developer bila kuonyesha:

-<div id = "Tab1Content">
-<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div> <-Hatimaye kuonyesha ilikuwa imefungwa njia yote chini hapa!

Hivyo, kama mimi $("# Tab1Content").kujificha(), Ningependa pia kujificha Tab2 na mimi kamwe kuonyesha Tab2 kama sikuwa pia kuonyesha Tab1. Mimi kunakiliwa na pasted kanuni juu katika studio ya Visual na ilionyesha wote wa bitana div ya up nicely, tu kama wao walikuwa walidhani kuwa kufanya, kuangalia kama hii:

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

Mimi kuwapiga kichwa yangu dhidi ya ukuta kwa wakati na niliona kwamba katika kanuni halisi HTML ilikuwa kuzalisha mengi ya tupu <div> tags, kama:

<mwili>

<div id = "Tab1Content">

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

</div>

<div id = "Tab2Content">

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

</div>

</mwili>

(hapo juu ni waaaaaaaaaaaay oversimplified. tupu div vitambulisho ni halali kabisa. Baadhi ya yangu <div> vitambulisho walikuwa kamili ya maudhui, lakini wengi zaidi walikuwa si. Nimekuja kutambua kuwa yangu <xsl:kwa-kila> maelekezo walikuwa kutotoa moshi vitambulisho div short-fomu wakati XSL:kwa-kila hakuwa 'kupata data yoyote. Mimi kulazimishwa maoni HTML katika pato, kama inavyoonekana:

Baada ya mimi kwamba, div wote ni lined up nicely na tab yangu byte kuanza kufanya kazi.

Kama kawaida, Natumaini hii husaidia mtu katika Bana.

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Hata hivyo Zaidi jQuery–Resize Mfano Image

Acha reply

Mimi kurithi sehemu ya mtandao kutoka muuzaji mteja wa zamani na ina picha kwa ukubwa tatizo. images lazima 60×50 lakini kwa sababu fulani isiyo ya kawaida, muuzaji awali kuwalazimisha ndani ya 42×42, hivyo wao kuangalia squashed:

Nzuri Image	Mbaya Image

Hapa ni ghafi (kiasi fulani kilichorahisishwa):

<meza darasa = 'extended-mtazamo'>
<thead>
    <tr>
      <th width = '100′>3 Jumanne</th>
    </tr>
</thead>

<tbody>
    <tr darasa = 'utabiri'>
      <td width = '100′>
        <st>
          <li darasa = 'juu'>High: 72&wewe;F</li>
          <li darasa = 'Asili'>Asili: 44&wewe;F</li>
          <li darasa = 'hali'>Jua
            <img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ urefu = '42’ alt =” />
          </li>
        </st>
      </td>
    </tr>

</tbody>

</meza>

Utasikia kumbuka kwamba ingawa njia ya picha yenyewe inaonyesha mwelekeo sahihi (60×50) muuzaji awali ya kulazimishwa katika 42×42. Kwa nini? Crazy.

Anyway, Nilitaka ufumbuzi wa haraka na rahisi ya suala hili na mimi akageuka na jQuery. hila mara ya Machapisho yote ya mwafaka <img> vitambulisho. Mimi sitaki muck kuhusu na vitambulisho nyingine yoyote img (ambayo kuna wengi). Hii kidogo ya jQuery alifanya hila:

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

<script type="text/javascript">
     $(hati).tayari(kazi () {

         $(‘li.condition > img ').kila(kazi (index, bidhaa)
            {
             $(bidhaa).css("width", "60");
             $(bidhaa).css("height", "50");
            });
     }); // juu ya mzigo hati
</script>

Kwamba kidogo ya maadili ya hupata ukusanyaji <li> vitambulisho ambaye darasa ni "hali" na <img> watoto. Ni kisha iterates njia zote ya kwamba. Kazi kama charm.

Mimi inaweza pengine ni kuhuisha, lakini mimi kamwe alikuwa aina ya guy Unix kwamba kutatuliwa π kwa 18 maadili usahihi kwa kutumia sed na awk na mimi si kwamba aina ikiwa jQuery guy ama Smile .

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Kutekeleza Global Sinema-up Taarifa System

2 majibu

Niliandika juu ya makala kwa ajili ya www.sharepoint.briefing.com haki "Kutekeleza Global Sinema-up Taarifa System." Kazi hiyo itumike kwa ajili ya chuo jamii ya kuwasiliana closings shule kutokana na theluji na kadhalika.

Ni matumizi ya orodha desturi, nje ya boksi SharePoint za huduma na baadhi jQuery kufanya kazi.

Hapa ni teaser: