Kateqoriya Arxivləri: jQuery və SharePoint

SharePoint Quick Launch nisbi URL'leri ilə Annoying Məsələ aradan qaldırılması

Bir cavab buraxın

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 (məsələn, ‘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. Həll etmək, get some JavaScript and jQuery onto the page using your favorite technique and with a line of code like this:

 

$(sənəd).hazır( funksiyası () {

    $("bir:contains('Test URL replacement')").basın(funksiyası () { zirək("changed click behavior!"); qayıtmaq saxta;});

});

And Bob’s your uncle.

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

The .click(funksiyası() 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.

</son>

undefinedBlog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Sadə və sadə: "Yanlış URL Parametr həll” lists.asmx da UpdateListItems ilə problem

1 Cavab

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.  Bu, 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:Envelope xmlns:soapenv ='http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Orqan>                      
    <UpdateListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>                     
      <Yarpaqlı>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</Yarpaqlı>                     
        <updates>                     
         <Batch OnError="Continue">
          <Method ID="1" Cmd="Update">
            <Field Name="CooperativeLock">locked!</Sahə>
            <Field Name="ID">1</Sahə>
          </Method>
        </Batch>                     
        </updates>                
      </UpdateListItems>             
  </soapenv:Orqan>         
</soapenv:Zərf>

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

</son>

undefinedBlog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

 

JavaScript Poor Man Caching

1 Cavab

[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, digər məsələlərlə yanaşı, 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. Belə, 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
    • Başqa cür, 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 :). 

</son>

undefinedBlog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

XSLT və jQuery nümunələri

2 Cavablar

Mən XSLT və jQuery və bir çox edir və Mən başqaları gələcəkdə faydalı ola bilər ki, bir neçə parçalarını bölüşmək istədiyiniz fikir edilmişdir.

Misal 1: Sadə JavaScript buraxmaq / XSLT ildə jQuery:

<XSL:template match="something" xml:kosmik = "qorumaq">

  <!– Sorğu dostluq filtreler gizli sahə həyata Blank –>
  <script type="text/javascript">
    $(sənəd).hazır(funksiyası(){
      $("#QueryFriendlyFilters").val("empty");
    });
  </ssenari>

</XSL:şablon>

That bit emits some JavaScript that waits for the page to finish loading (because of the $(sənəd).hazır(...)) and then sets the value of a hidden field named QueryFriendlyFilters to the literal value “empty”.

Misal 2: Istifadə <XSL:əgər> to check “greater than”,  “less than”, və s..

<XSL:template match="something" xml:kosmik = "qorumaq">

  <div id="fdcAllFilters">
 
    <XSL:if test="@Count>0">
      <span class="fdcFilterLabel">Current filters:</aşırım>
    </XSL:əgər>

    <!– more stuff happens here. –>

</XSL:şablon>

The above snippet checks to see if an attribute named “Count” of the “something” element is greater than zero.  The XML behind this would be something like:"

<something Count=”5” />

Misal 3: Iterate through all elements, interspersing jQuery calls.

<!– Iterate through all the filters and display the correct  bağlantılar. –>
<XSL:for-each select="UserFilter">

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

  <span class="fdcFilterLabel"><XSL:value-of select="@FilterValue"/></aşırım>

  <script type="text/javascript">

    $(sənəd).hazır(funksiyası(){
        <XSL:text><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></XSL:text>\"<XSL:value-of select="@FilterValue"/>\"<XSL:text><![CDATA["));]]></XSL:text>
    });

  </ssenari>

</XSL:-hər biri üçün>

The above snippet is the most complex and there may be easier ways to do it.

The XML behind this looks roughly like this:

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

This snippet is iterating through <UserFilter> nodes. 

It first emits an anchor tag that when clicked invokes a JavaScript function that is already on the page, “mySubmitPage” and passes the value of an attribute on the <UserFilter> node named “ID”. 

It then emits some jQuery that waits for the page to load.  That jQuery updates a hidden field named “QueryFriendlyFilters” by adding the value of the FilterValue attribute.  Note all the crazy <XSL:text> və <![CDATA[ ... ]]> stuff.

That’s it, bu kömək ümid!

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Lists.asmx, GetListItems və Qovluqlar

6 Cavablar

I SharePoint hissəsi kimi göstərilən list.asmx web service ətrafında bu gün kimsə üçün bir araşdırma edirdi 2010 (və əvvəlki).  O, kök qovluq da siyahıda əldə edə bilər (alt qovluq adları daxil), lakin alt klasörler maddələri ala bilmədi.  Mən bəzi internets ətrafında axtarır idi və bu, təəccüblü ümumi sual.  Hələ, Mən sadə suala yaxşı cavab ala bilmədi, "Mən qovluq bilirsinizsə, necə qovluqdakı öğeleri almaq yoxdur?"  Insafən, Mən bir müddət öz Bu anlamaq istəyirdilər etdik çünki mən bütün ağır cəhd etməyib təbəssüm.

Bu qədər qurmaq üçün, Mən "Blogging Ssenari" və "Alt qovluqları ilə Xüsusi siyahısı" adlı xüsusi siyahı adlı saytı yaradılmışdır.  Mən sonra adına qovluq yaradıldı:

  • Il 2005
  • Il 2006
  • Il 2007

Mən qovluğu "2006" bir neçə maddələri əlavə edib.  Bu kimi görünür:

image

Mənim dostum C # kodu yazı deyil Java istifadə etmir, belə SOAP zərflərin o, həqiqətən lazım idi.  Ki, əldə etmək üçün, Mən jQuery bir az yazırdı və sonra faktiki HTTP söhbət almaq üçün skripkaçalan istifadə.

Burada müvafiq jQuery var (Siz yapışdırıb / kopyalamak istediğiniz əgər mən aşağıdakı kodu aşağı kopyalanan):

image

Onlar ilk düyməsini həm daxildir <queryOptions> və <QueryOptions> node.  İkinci əsas ki, <Qovluq> node olan müştəri çıxışı üçün bir URL deyil.

Bu almaq üçün başqa yolları ola bilər, jQuery istifadə edərkən, lakin bu mənim üçün yaxşı işləmişdir.

Burada yuxarıda üçün SOAP zərflərin edir:

<soapenv:Envelope xmlns:soapenv =’http://schemas.xmlsoap.org / sabun / zərf /’>                
  <soapenv:Orqan>
    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / sabun /’>
      <Yarpaqlı>Alt Folders xüsusi siyahısı</Yarpaqlı>
      <viewFields>  
        <ViewFields>
          <FieldRef Adı = 'Başlıq’ />
          <FieldRef Adı = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Qovluq>http://demoserver1/Blogging Ssenari / siyahıları / Alt Folders / il 2006-cı ilə Xüsusi siyahısı</Qovluq>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Orqan>
</soapenv:Zərf>

Bu ətrafında nümunələri və müzakirə bir çox mənə lazım idi ki, iman gətirib <QueryOptions> və qovluq adı daxil.  Mənim üçün, Mən həm paketi daxili lazımdır <queryOptions> habelə üçün tam ixtisaslı URL daxil <Qovluq> node.

Burada jQuery AJAX quraşdırma var:

$(sənəd).hazır(funksiyası() {
       soapEnv = oldu
           "<soapenv:Envelope xmlns:soapenv =’http://schemas.xmlsoap.org / sabun / zərf /’> \
               <soapenv:Orqan> \
                    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / sabun /’> \
                       <Yarpaqlı>Alt Folders xüsusi siyahısı</Yarpaqlı> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Adı = 'Başlıq’ /> \
                              <FieldRef Adı = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Qovluq>http://demoserver1/Blogging Ssenari / siyahıları / Alt Folders / il 2006-cı ilə Xüsusi siyahısı</Qovluq> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Orqan> \
           </soapenv:Zərf>";

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Lists.asmx, GetList və "Dəyər null ola bilməz”

1 Cavab

Mən bu gün aşkar ki GetList() üsulu lists.asmx web service çox diqqətlə çağrılmasını və ya istisna "null ola bilməz Dəyər" bir sirli atmaq üçün meylli deyil (və fərz oldu ki, siz hətta pis generic səhv baş beledir keçmiş əldə edə bilərsiniz, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ atıldı. ")  Xüsusi, Mən sizə GetList üsulu ilə prefiks hər cür təmin edə bilməz ki.  Aşağıdakı jQuery parçası, point göstərir:

image

Bunu edin, web xidməti üzrə "Dəyər null ola bilməz" ilə cavab skripkaçalan-HTTP transcript təmin:

<?xml version = "1.0" encoding="utf-8"?>
  <sabun:Zərf
     xmlns:sabun ="http://schemas.xmlsoap.org / sabun / zərf /"    
     xmlns:XSI = "http://www.w3.org/2001/XMLSchema-instance"
     xmlns:XSD ="http://www.w3.org/2001/XMLSchema">

  <sabun:Orqan>
    <sabun:Günah>
      <faultcode>sabun:Server</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ atıldı.
      </faultstring>
      <detal>
        <səhv string xmlns ="http://schemas.microsoft.com / SharePoint / sabun /">
Dəyər null ola bilməz.
        </errorstring>
      </detal>
    </sabun:Günah>
  </sabun:Orqan>
</sabun:Zərf>

Əlbəttə, yəqin ki, öz ki, "S0" prefiksi əlavə olmaz, lakin bəzi alətlər bunu meylli (Eclipse kimi).

Bu, bütün daha qarışıqdır / digər üsullarla önek dözmək çünki sinir bozucu.  Məsələn, bu GetListCollection bu prefixed edilmişdir əgər metodu ağla sığmaz, hətta "xyzzy" kimi cəfəngiyat önekleriyle:

image

Bu lists.asmx ilə kifayət qədər ortaq görünür "dəyər null ola bilməz" Beləliklə, ümid edirəm bu gələcəkdə kimsə kömək edəcək.

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Endlessly quş balası <div> Tags və jQuery

Bir cavab buraxın

Bu bir oddball mövzu kimi görünür, Mən bu barədə həqiqətən dəyər blog var əmin deyiləm, ancaq ki, əvvəl mənə dayandırdı heç oldu, Belə ki, burada biz getmək təbəssüm

Mən bir axtarış bəzi çəkərək alıram bir layihə üzərində çalışıram, XML nəticədə XSLT vasitəsilə HTML çevrilir ki, sonra bir XML mesaj dilinə qədər qablaşdırma və.  Cəlb jQuery bir çox var, biri bit bəzi tabbing funksionallığı həyata keçirir.  Bir sekmesini basın zaman (həqiqətən, bir <div>), jQuery çağırır. gizlətmək() və. şou() müxtəlif divs haqqında (Bu halda heç bir postbacks var, belə ki, ilkin səhifə yük bütün içeriği downloads).

Saat bir dəstə əvvəl, sekmesini keçid məntiq erratically davranmaq başladı və mənim Nişanlar biri göstərmək deyil.  Mən sonda Internet Explorer faktı onu aşağı izlenen (azı) fikir ki, <div> tags qədər iç-içə, intended.The geliştirici toolbar daha dərin gösterir:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Nəhayət ki, bütün yol aşağı burada bağlandı göstərən!

Belə, Mən əgər $("# Tab1Content").gizləmək(), Mən də Sekme2 gizlətmək istədiyiniz və mən də Tab1 göstərmədi, mən Sekme2 göstərmək heç bilər.  Mən sitemizi və yapışdırılır kodu up Visual Studio daxil və bu gözəl div nin astarlı bütün qədər göstərdi, onlar bunu idi yalnız kimi, bu kimi axtarır:

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

Mən bir müddət divara başımı döymək və faktiki HTML code boş bir çox yaradan ki, qeyd <div> tags, kimi:

<orqan>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</orqan>

(Yuxarıda waaaaaaaaaaaay oversimplified edir.  Boş div tags tamamilə etibarlıdır. Mənim bəzi <div> tags content dolu idi, lakin daha çox deyil idi.  Mən həyata gəldi ki, <XSL:-hər biri üçün> zaman XSL direktivləri qısa formada div tags emitting idi:üçün hər "heç bir məlumat tapa bilmədim.  Mən çıxış daxil HTML Şərh məcbur, kimi:

image

 

Mən etdi sonra, bütün div qəşəng dəstəsi düzülmüşdü və nişanı kommutasiya iş açılmış oldu.

Həmişə olduğu kimi, Mən bu bir çimdik kimsə kömək ümid edirik.

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Daha jQuery–Resim Misal boyutlandır

Bir cavab buraxın

Mən müştəri köhnə satıcı bir web hissəsi miras qalmış və bir resim ölçüsü problem var.  Şəkillər 60 olmalıdır×50 lakin bəzi qəribə səbəbdən, orijinal satıcı 42 onları məcbur×42, onlar əzilmiş baxmaq:

 

Yaxşı Image

Bad Image

Burada biçimlendirme var (qədər sadələşdirilmiş):

<masa class = "uzun perspektivdə">
  <thead>
    <tr>
      <ci  width = '100′>3 Çərşənbə axşamı</ci>
    </tr>
  </thead>

  <tbody>
    <tr class = "proqnozu '>
      <td width = '100′>
        <st>
          <li class = 'yüksək'>Yüksək: 72&siz;F</li>
          <li class = 'az'>Aşağı: 44&siz;F</li>
          <li class = 'şərt'>Günəşli
            <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>

</masa>

Siz qeyd edəcəyik ki, hətta image özü yolu müvafiq ölçüsü göstərir (60×50) orijinal satıcı 42-ci ildə məcburi×42.  Niyə?  Sərsəm.

Hər halda, Mən bu məsələnin tez və asan həll istəyirdi və mən jQuery çevrildi.  Bu oyun uyğun bütün tapmaq üçün idi <img> tags.  Mən heç bir başqa img tags ilə bağlı muck istəmirdi (çox var olan).  JQuery Bu bit oyun etdi:

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

<script type="text/javascript">
     $(sənəd).hazır(funksiyası () {

         $(‘li.condition > img ").hər(funksiyası (indeks, maddə)
            {
             $(maddə).CSS("width", "60"); 
             $(maddə).CSS("height", "50");
            });
     }); // sənəd yük
</ssenari>

Kodu Bu bit toplanması tapır <li> kimin sinif tags "vəziyyəti" və <img> uşaqlar.  O ki, bütün vasitəsilə iterates.  Bir cazibədarlığı kimi çalışmışdır.

Mən yəqin ki, aerodinamik bilər, amma π həll edən unix oğlan bir cür idi, heç vaxt üçün 18 rəqəm dəqiq sed və AWK istifadə və mən jQuery oğlan əgər, ya da o cür deyiləm təbəssüm.

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Qlobal Pop-up bildiriş sistemi tətbiq

2 Cavablar

I məqalə qədər yazıb www.sharepoint.briefing.com "adlıQlobal Pop-up bildiriş sistemi tətbiq."  Bu funksiya qar yağışı səbəbiylə və s məktəb closings ünsiyyət icma kollec üçün həyata keçirilmişdir. 

Bu xüsusi siyahısını istifadə edir, iş üçün kutuyu SharePoint web services və bəzi jQuery həyata.

Burada bir iltifat var:

image

Burada bütün şey oxumaq: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin

Sizin OK nəzarət etmək və Buttons Ləğv et

3 Cavablar

Mən yazıb Bu maddənin bir halda geri, Mən zamanda blog bu keçid etməyib kimi lakin görünür, burda gedir:

image

Bu məqalə o ləğv tıkladığında istifadəçi OK tıkladığında və müxtəlif səhifə zaman newform.aspx bir səhifə yönlendirme məcbur anlatılmaktadır.

</son>

Blog abunə.

Da Twitter məni izləyin http://www.twitter.com/pagalvin