Tag Archives: jQuery

XSLT at jQuery mga halimbawa

Ako ay paggawa ng maraming ng XSLT at jQuery at naisip gusto kong ibahagi ang ilang mga snippet na ang mga iba ay maaaring kapaki-pakinabang sa hinaharap.

Halimbawa 1: Magbuga simpleng JavaScript / jQuery sa XSLT:

<xsl:template match = "ng isang bagay,,en,script type = "text / javascript",,en,"#QueryFriendlyFilters",,en,"Walang laman",,en,div id = "fdcAllFilters",,en,kung test = "@ Count,,en,span class = "fdcFilterLabel",,en,para-sa-bawat pumili = "UserFilter",,en,isang class = "FilterHref,,en,href = "javascript,,en,'RemoveUserFilter',,en,sulit ng mga piling = "@ FilterValue" /,,en" xml:space="preserve">

  <!– Blangko ang ang query friendly na mga filter nakatagong patlang –>
  <script type="text/javascript">
    $(dokumento).nakahanda(tungkulin(){
      $("#QueryFriendlyFilters").Val("empty");
    });
  </script>

</xsl:template>

Na bit emits ilang JavaScript na naghihintay para sa mga pahina upang tapusin ang loading (dahil sa $(dokumento).nakahanda(...)) at pagkatapos ay nagtatakda ng halaga ng isang nakatagong patlang pinangalanan QueryFriendlyFilters na ang literal na halaga na "walang laman".

Halimbawa 2: Gamitin <xsl:kung> check ang "mas higit",  "Mas mababa", at iba pa.

<xsl:template match = "ng isang bagay,,en,script type = "text / javascript",,en,"#QueryFriendlyFilters",,en,"Walang laman",,en,div id = "fdcAllFilters",,en,kung test = "@ Count,,en,span class = "fdcFilterLabel",,en,para-sa-bawat pumili = "UserFilter",,en,isang class = "FilterHref,,en,href = "javascript,,en,'RemoveUserFilter',,en,sulit ng mga piling = "@ FilterValue" /,,en" xml:space="preserve">

  <div id="fdcAllFilters">
 
    <xsl:if test="@Count>0">
      <span class="fdcFilterLabel">Kasalukuyang filter:</maikling panahon>
    </xsl:kung>

    <!– higit pang mga bagay-bagay ang mangyayari dito. –>

</xsl:template>

Ang itaas na snippet sumusuri upang makita kung ang isang katangian na pinangalanan na "Count" ng element na "bagay" ay mas mataas sa zero.  Ang XML sa likod ng ito ay magiging isang bagay tulad ng:"

<bagay Count = "5" />

Halimbawa 3: Umulit sa pamamagitan ng lahat ng mga elemento, interspersing tawag jQuery.

<!– Umulit sa pamamagitan ng lahat ng mga filter at ipakita ang tamang  mga link. –>
<xsl:for-each select="UserFilter">

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

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

  <script type="text/javascript">

    $(dokumento).nakahanda(tungkulin(){
        <xsl:teksto><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></xsl:teksto>\"<xsl:value-of select="@FilterValue"/>\"<xsl:teksto><![CDATA["));]]></xsl:teksto>
    });

  </script>

</xsl:para sa-bawat>

Ang itaas na snippet ay ang pinaka masalimuot at maaaring may mas madaling paraan upang gawin ito.

Ang XML sa likod na ito ay mukhang halos tulad nito:

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

Snippet na ito ay iterating sa pamamagitan ng <UserFilter> nodes. 

Unang ito emits isang anchor tag na kapag nag-click invokes ng isang function na JavaScript na nasa sa pahina, Sa "mySubmitPage" at magbabalik ang halaga ng isang attribute sa <UserFilter> node na pinangalanang "ID". 

Pagkatapos ito emits ilang jQuery na naghihintay para sa pahina upang i-load.  Na jQuery update ng isang nakatagong mga patlang na pinangalanang "QueryFriendlyFilters" sa pamamagitan ng pagdaragdag ng halaga ng FilterValue ang attribute.  Tandaan ang lahat ng mga nakatutuwang <xsl:teksto> at <![CDATA[ ... ]]> mga bagay.

Iyan na ang lahat, Umaasa ito ay tumutulong sa!

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

Lists.asmx, GetListItems at folder

Ako ay paggawa ng ilang pananaliksik para sa isang tao ngayon sa paligid list.asmx web serbisyo na ibinigay bilang bahagi ng SharePoint 2010 (at mas maaga).  Siya ay upang makakuha ng listahan ng mga item sa folder ng ugat (kabilang ang mga pangalan ng mga sub-folder), ngunit hindi maaaring makakuha ng mga item sa sub-folder.  Ko ng ilang mga naghahanap sa paligid sa internets at ito ay isang nakakagulat na karaniwang tanong.  Pa, Hindi ako maaaring makakuha ng isang magandang sagot sa simpleng tanong, "Kung alam ko ang folder, paano ko makukuha ang mga item sa folder?"  Upang maging matapat, Hindi ko subukan ang lahat na mahirap dahil ko na nais na malaman ang isang ito sa aking sarili para sa isang habang ngiti.

Upang itakda ang up, Lumikha ako ng isang site na pinangalanang "Blogging sitwasyon" at isang pasadyang listahan na pinangalanang "Custom Listahan na may Sub Folder".  Ako pagkatapos nilikha folder na may pangalang:

  • Taon 2005
  • Taon 2006
  • Taon 2007

Ako ay nagdagdag ng ilang mga item sa ang "Taon 2006" na folder.  Ito ay kung ano ang tila:

image

Ang aking kaibigan ay hindi pagsulat ng C # code ngunit sa halip na paggamit ng Java, kaya ang SOAP sobre ay ano ang kanyang talagang kinakailangan.  Upang makakuha ng na, Sinulat ko isang bit ng jQuery at pagkatapos ay ginagamit ng fiddler upang makakuha ng aktwal na pag-uusap ng HTTP.

Narito ang kaugnay jQuery (Ko makopya ang code sa ibaba kung nais mong kopyahin / i-paste):

image

Sila unang susi ay upang isama ang parehong <queryOptions> at <QueryOptions> node.  Ang ikalawang key ay ang <Folder> node ay isang URL na kung saan ang client ay may access.

Maaaring may iba pang mga paraan upang makakuha ng ito, ngunit ito nagtrabaho na rin para sa akin kapag gumagamit ng jQuery.

Narito ang ang SOAP sobre para sa itaas:

<soapenv:Sobre xmlns:soapenv =’http://schemas.xmlsoap.org / sabon / sobre /’>                
  <soapenv:Katawan>
    <GetListItems xmlns =’
http://schemas.microsoft.com / sa sharepoint / sabon /’>
      <listname>Pasadyang Listahan na may Sub Folder</listname>
      <viewFields>  
        <ViewFields>
          <FieldRef Pangalan = 'Pamagat’ />
          <FieldRef Pangalan = 'EncodedAbsUrl ang’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>
http://demoserver1/Blogging Sitwasyon / listahan / Custom Listahan na may Sub Folder / Taon 2006</Folder>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Katawan>
</soapenv:Sobre>

Ang isang pulutong ng mga halimbawa at discussion sa paligid na ito na humantong ako sa naniniwala na ang lahat ng kailangan ko ay <QueryOptions> at tukuyin ang isang pangalan ng folder.  Sa akin, Kailangan ko sa parehong pambalot na ito sa loob <queryOptions> pati na rin tukuyin ang isang ganap na kwalipikadong URL para sa <Folder> buko.

Narito ang jQuery AJAX setup:

$(dokumento).nakahanda(tungkulin() {
       ay soapEnv =
           "<soapenv:Sobre xmlns:soapenv =’http://schemas.xmlsoap.org / sabon / sobre /’> \
               <soapenv:Katawan> \
                    <GetListItems xmlns =’http://schemas.microsoft.com / sa sharepoint / sabon /’> \
                       <listname>Pasadyang Listahan na may Sub Folder</listname> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Pangalan = 'Pamagat’ /> \
                              <FieldRef Pangalan = 'EncodedAbsUrl ang’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Sitwasyon / listahan / Custom Listahan na may Sub Folder / Taon 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Katawan> \
           </soapenv:Sobre>";

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

Endlessly Nesting <div> Tag at jQuery

Ito tila tulad ng isang paksa oddball, Hindi ako sigurado ito ay talagang nagkakahalaga ng pag-blog tungkol sa, ngunit na hindi kailanman tumigil sa akin bago, kaya dito kami pumunta ngiti

Ako nagtatrabaho out sa isang proyekto kung saan ako kumukuha ng ilang mga data mula sa isang paghahanap, packaging up ito sa isang XML mensahe at pagkatapos ay na XML sa huli ay transformed sa HTML sa pamamagitan ng XSLT.  Mayroong maraming mga jQuery kasangkot, isa bit na kung saan ipinapatupad ng ilang mga pag-andar tabbing.  Kapag nag-click ka sa isang tab (talaga, isang <div>), jQuery invokes. itago() at. palabas() sa iba't-ibang mga divs (ang paunang pag-load ng pahina Dina-download ang lahat ng mga nilalaman sa gayon walang mga postbacks sa kasong ito).

Ang isang grupo ng mga oras ang nakalipas, ang tab paglipat logic nagsimulang kumilos erratically at hindi ito ay magpapakita ng isa sa aking mga tab.  Ako sa huli sinubaybayan ito pababa sa ang katunayan na ang internet explorer (kahit) naisip na ang <div> mga tag nested malayo, malayo mas malalim kaysa intended.The developer toolbar ay magpapakita ng:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Sa wakas ay nagpapakita ng ito ay sarado ang lahat ng paraan ang down dito!

Kaya, kung ginawa ko ang isang $("# Tab1Content").itago(), Gusto ko ring itago Tab2 at hindi ko maaaring magpakita Tab2 kung hindi ko ring ipakita Tab1.  Ako kopyahin at ilagay ang code hanggang sa visual studio at ito ay nagpakita ng lahat ng lining ang div up ni mabuti, tulad lang nila na ipagpalagay na paggawa, naghahanap ng ganito:

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

Matalo ko ang aking ulo laban sa mga pader para sa isang habang at napansin na sa aktwal na code ng HTML ay bumubuo ng maraming laman <div> mga tag, katulad:

<katawan>

  <div id = "Tab1Content">

    <div id = "ROW1" />
    <div id = "ROW2" />

  </div>

  <div id = "Tab2Content">

    <div id = "ROW1" />
    <div id = "ROW2" />

  </div>

</katawan>

(Sa itaas ay waaaaaaaaaaaay oversimplified.  Ang walang laman div tag ay lubos wastong. Ang ilan sa aking <div> mga tag ay puno ng mga nilalaman, ngunit marami pa ay hindi.  Ako ay dumating sa pagtanto na ang aking <xsl:para sa-bawat> mga kautusan ay nagpapalabas ng mga short-form na tag div kapag ang xsl:para-sa-bawat ay hindi 'makahanap ng anumang data.  Pinilit ako ng isang HTML komento sa output, tulad ng ipinapakita:

image

 

Pagkatapos kong gumawa niyan, lahat ng div ay ang naka-linya up mabuti at ang aking tab Paglipat nagsimula nagtatrabaho.

Tulad ng nakasanayan, Umaasa ako na ito ay tumutulong sa isang tao sa isang pakurot.

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

Pa Higit pang jQuery–Baguhin ang laki ng isang Halimbawa ng Imahe

Ako minana isang web bahagi mula sa lumang vendor isang kliyente at ito ay may isang imahe problema laki.  Ang mga imahe ay dapat na 60×50 ngunit para sa ilang mga gansal dahilan, ang orihinal na vendor pinilit ang mga ito sa 42×42, kaya tumingin sila lapirat:

 

Magandang Imahe

Masamang Imahe

Narito ang markup (medyo pinagaan):

<talahanayan class = 'extended-kuro'>
  <thead>
    <tr>
      <ika  width = '100′>3 Martes</ika>
    </tr>
  </thead>

  <tbody>
    <tr class = 'forecast'>
      <td width = '100′>
        <st>
          <li class = 'mataas'>Mataas: 72&mo;F</li>
          <li class = 'mababa'>Mababa: 44&mo;F</li>
          <li class = 'kondisyon'>Maaraw
            <img SRC =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ taas = '42’ alt =” />
          </li>
        </st>
      </td>
    </tr>

  </tbody>

</talahanayan>

Makikita mo tandaan na kahit na ang path sa mismong imahe Ipinapakita ang tamang sukat (60×50) ang orihinal na vendor sapilitang ito sa 42×42.  Bakit?  Basag ang pula.

Gayon pa man, Nais kong isang mabilis at madaling solusyon sa isyung ito at ako ay sumangguni sa jQuery.  Bilis ng kamay ay upang mahanap ang lahat ng mga naaangkop na <img> mga tag.  Hindi ko nais upang putik tungkol sa anumang iba pang img tag (kung saan mayroong maraming).  Ito bit ng jQuery ginawa ang bilis ng kamay:

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

<script type="text/javascript">
     $(dokumento).nakahanda(tungkulin () {

         $(‘li.condition > img ').bawat(tungkulin (talatuntunan, bagay)
           
{
             $(bagay).css("width", "60"); 
             $(bagay).css("height", "50");
            });
     }); // sa dokumento ng pag-load
</script>

Iyon bit ng code na nakakahanap ng mga koleksyon <li> mga tag na ang klase ay "kalagayan" at <img> mga bata.  Ito pagkatapos iterates sa pamamagitan ng lahat ng iyon.  Nagtrabaho tulad ng isang kagandahan.

Kaya kong marahil streamline ito, ngunit ako ay hindi kailanman ay isang uri ng Unix tao na malutas sa π upang 18 digit katumpakan gamit SED at awk at ako ay hindi na uri kung jQuery tao alinman sa ngiti.

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

Sumakay Control ng iyong OK at Kanselahin ng mga Pindutan

Ako nagsulat artikulong ito isang habang pabalik, ngunit mukhang tulad ng hindi ako mag-link dito mula sa aking blog sa oras, kaya dito napupunta:

image

Ang artikulong ito ay naglalarawan kung paano pilitin newform.aspx mag-redirect sa isang pahina kapag ang gumagamit ay nag-click ang OK at sa ibang pahina kapag nag-click siya kanselahin.

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

Quick Tip: Pagdaragdag ng jQuery sa Moss Pages Publishing

Kapag pagpapabuti Moss publising mga pahina gamit ang jQuery, Ako pindutin ang mga sumusunod na paga bilis:

Server Error in ‘/’ Application.


Pang-parse Error

Paglalarawan: May naganap na error sa panahon ng pag-parse ng isang mapagkukunan na kinakailangan upang serbisyo ang hiling na ito. Mangyaring suriin ang sumusunod na mga tiyak na detalye parse error at baguhin ang iyong source file naaangkop.

Pang-parse Error Mensahe: Tanging ang kontrol ng nilalaman ay pinapayagan nang direkta sa isang pahina ng nilalaman na naglalaman ng mga kontrol ng Nilalaman.

Source Error:

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

Pinagmulang File: /_catalogs / masterpage / KCC_FacultyMember.aspx    Linya: 12


Bersyon ng Impormasyon: Microsoft. NET Framework Bersyon:2.0.50727.4927; ASP.NET Bersyon:2.0.50727.4927

Ito ay madaling sapat upang ayusin (h / t sa aking kasamahan, Uday Ethirajulu).  Maging sigurado na ang jQuery code nakatira sa loob ng "PlaceHolderAdditionalPageHead" tulad ng ipinapakita:

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">

<script

    type="text/javascript"

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

</script>

<script type="text/javascript">

  $(dokumento).nakahanda(tungkulin() {

   // Brilliant jQuery stuff dito napupunta.

   });

</script>

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin