Arsip Tag: jQuery

XSLT dan jQuery sampel

2 balasan

Saya telah melakukan banyak XSLT, jQuery, dan pikir saya akan berbagi beberapa potongan yang orang lain mungkin menemukan berguna di masa depan.

Contoh 1: Memancarkan JavaScript sederhana / jQuery dalam XSLT:

<Extensible Stylesheet Language:template pertandingan = "sesuatu" XML:ruang = "melestarikan">

  <!– Kosong keluar bidang tersembunyi ramah filter permintaan –>
  <script type = "text/javascript">
    $(dokumen).siap(fungsi(){
      $("#QueryFriendlyFilters").Val("kosong");
    });
  </script>

</Extensible Stylesheet Language:template>

Sedikit memancarkan beberapa JavaScript yang menunggu untuk halaman untuk menyelesaikan pemuatan (karena $(dokumen).siap(…)) dan kemudian set nilai bidang tersembunyi bernama QueryFriendlyFilters nilai literal "kosong".

Contoh 2: Penggunaan <Extensible Stylesheet Language:Jika> untuk memeriksa "lebih besar",  "kurang", dll.

<Extensible Stylesheet Language:template pertandingan = "sesuatu" XML:ruang = "melestarikan">

  <DIV id = "fdcAllFilters">
 
    <Extensible Stylesheet Language:Jika test="@Count>0">
      <span class = "fdcFilterLabel">Current filter:</rentang>
    </Extensible Stylesheet Language:Jika>

    <!– lebih banyak barang yang terjadi di sini. –>

</Extensible Stylesheet Language:template>

Potongan di atas memeriksa untuk melihat apakah atribut yang bernama "Count" dari "sesuatu" elemen yang lebih besar dari nol.  XML di balik ini akan menjadi sesuatu seperti:”

<sesuatu Count = "5" />

Contoh 3: Iterate melalui semua elemen, interspersing jQuery panggilan.

<!– Iterate melalui semua filter dan menampilkan yang benar  link. –>
<Extensible Stylesheet Language:untuk setiap = pilih "UserFilter">

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

  <span class = "fdcFilterLabel"><Extensible Stylesheet Language:nilai dari select="@FilterValue"/></rentang>

  <script type = "text/javascript">

    $(dokumen).siap(fungsi(){
        <Extensible Stylesheet Language:teks><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></Extensible Stylesheet Language:teks>\"<Extensible Stylesheet Language:nilai dari select="@FilterValue"/>\"<Extensible Stylesheet Language:teks><![CDATA["));]]></Extensible Stylesheet Language:teks>
    });

  </script>

</Extensible Stylesheet Language:untuk setiap>

Potongan di atas adalah yang paling kompleks dan mungkin ada cara mudah untuk melakukannya.

XML di balik ini terlihat kira-kira seperti ini:

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

Potongan ini iterasi melalui <UserFilter> node. 

Pertama memancarkan jangkar tag yang ketika diklik memanggil fungsi JavaScript yang sudah pada halaman, "mySubmitPage" dan melewati nilai atribut <UserFilter> simpul yang bernama "ID". 

Itu kemudian memancarkan beberapa jQuery yang menunggu untuk halaman untuk memuat.  JQuery update bidang tersembunyi yang bernama "QueryFriendlyFilters" dengan menambahkan nilai atribut FilterValue.  Catatan semua gila <Extensible Stylesheet Language:teks> dan <![CDATA[ … ]]> barang.

That's it, hope it helps!

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Lists.ASMX, GetListItems dan folder

6 balasan

Aku sedang melakukan penelitian untuk seseorang hari ini sekitar list.asmx web layanan yang disediakan sebagai bagian dari SharePoint 2010 (dan sebelumnya).  Ia mampu untuk mendapatkan daftar item di folder akar (termasuk nama subfolder), tapi tidak bisa mendapatkan barang-barang dalam subfolder.  Aku melakukan beberapa memandang berkeliling di the internets dan pertanyaan yang mengejutkan umum.  Namun, Saya tidak bisa mendapatkan jawaban yang bagus untuk pertanyaan sederhana, "jika saya tahu folder, Bagaimana saya mendapatkan item di folder?”  Jujur, Aku tidak mencoba terlalu keras karena aku ingin angka satu ini keluar pada saya sendiri untuk sementara waktu Tersenyum.

Untuk mengatur hal ini, Saya membuat sebuah situs bernama "Blogging skenario" dan daftar kustom bernama "Daftar dengan Sub folder".  Saya kemudian membuat folder bernama:

  • Tahun 2005
  • Tahun 2006
  • Tahun 2007

Saya menambahkan beberapa item ke folder "Tahun 2006".  Ini adalah apa yang tampak seperti:

image

Teman saya tidak menulis C# kode tapi agak menggunakan Java, Jadi SOAP amplop adalah apa yang dia benar-benar diperlukan.  Untuk mendapatkan itu, Saya menulis sedikit jQuery dan kemudian digunakan fiddler untuk mendapatkan percakapan HTTP sebenarnya.

Berikut adalah relevan jQuery (Aku menyalin kode turun di bawah ini jika Anda ingin copy/paste):

image

Mereka kunci pertama adalah untuk memasukkan kedua <queryOptions> dan <QueryOptions> node.  Tombol kedua adalah bahwa <Folder> simpul adalah URL yang klien memiliki akses.

Mungkin ada cara lain untuk mendapatkan ini, Tapi ini bekerja dengan baik bagi saya ketika menggunakan jQuery.

Berikut adalah SOAP amplop untuk di atas:

<soapenv:Amplop xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’>                
  <soapenv:Tubuh>
    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Daftar kustom dengan Sub folder</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef nama =' judul’ />
          <FieldRef nama ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Folder>http://demoserver1/blog Skenario/daftar/Custom daftar dengan Sub folder/tahun 2006</Folder>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Tubuh>
</soapenv:Amplop>

Banyak contoh dan diskusi sekitar ini membawaku untuk percaya bahwa semua saya butuhkan adalah <QueryOptions> dan tentukan nama folder.  Bagi saya, Saya perlu untuk kedua bungkus dalam <queryOptions> serta menentukan URL yang memenuhi syarat untuk <Folder> node.

Here's the jQuery AJAX setup:

$(dokumen).siap(fungsi() {
       var soapEnv =
           "<soapenv:Amplop xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’> \
               <soapenv:Tubuh> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Daftar kustom dengan Sub folder</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef nama =' judul’ /> \
                              <FieldRef nama ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Folder>http://demoserver1/Blogging Skenario/daftar/Custom daftar dengan Sub folder/tahun 2006</Folder> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Tubuh> \
           </soapenv:Amplop>";

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Tanpa henti bersarang <div> Tag dan jQuery

Tinggalkan Balasan

Ini tampaknya seperti eksentrik topik, I 'm not sure it's benar-benar worth blogging tentang, tapi itu tidak pernah berhenti saya sebelumnya, Jadi di sini kita pergi Tersenyum

Saya bekerja pada sebuah proyek di mana aku menarik beberapa data dari pencarian, Kemasan ini ke pesan XML dan kemudian XML yang pada akhirnya berubah menjadi HTML melalui XSLT.  Ada banyak jQuery yang terlibat, salah satu dari sedikit yang mengimplementasikan beberapa fungsi tabbing.  Bila Anda klik pada tab (Benarkah, a <div>), jQuery memanggil .hide() dan .show() pada berbagai divs (beban awal halaman download semua konten jadi tidak ada postbacks dalam hal ini).

Sekelompok menit yang lalu, tab beralih logika mulai bersikap tak menentu dan itu tidak menunjukkan salah satu tab saya.  Saya akhirnya dilacak ke kenyataan bahwa internet explorer (setidaknya) berpikir bahwa <div> Tag bersarang jauh, jauh lebih dalam daripada yang dimaksudkan.Toolbar pengembang akan menunjukkan:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-akhirnya menunjukkan itu ditutup sepanjang jalan di sini!

Jadi, Jika saya melakukan $("#Tab1Content").Sembunyikan(), Saya juga akan menyembunyikan Tab2 dan aku tidak pernah bisa menunjukkan Tab2 jika aku juga tidak menunjukkan Tab1.  Aku disalin dan disisipkan kode ke visual studio dan menunjukkan semua lapisan div up manis, sama seperti mereka seharusnya melakukan, tampak seperti ini:

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

Aku mengalahkan kepalaku ke dinding untuk sementara dan melihat bahwa dalam HTML sebenarnya kode ini menghasilkan banyak kosong <div> Tags, seperti:

<bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">

(Di atas adalah waaaaaaaaaaaay yang disederhanakan.  Tag div kosong benar-benar berlaku. Beberapa saya <div> Tag yang penuh dengan konten, tetapi banyak lagi tidak.  Saya datang ke realisasi bahwa saya <Extensible Stylesheet Language:untuk setiap> arahan yang memancarkan bentuk pendek div tag ketika xsl:tidak untuk setiap ' menemukan data.  Aku memaksa komentar HTML ke output, seperti yang ditunjukkan:

image

 

Setelah saya melakukan itu, Semua div berbaris dengan baik dan tab beralih mulai bekerja.

Seperti biasa, Saya harap ini membantu seseorang dalam keadaan darurat.

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Namun lebih jQuery–Mengubah ukuran gambar contoh

Tinggalkan Balasan

Saya mewarisi bagian web dari klien vendor tua dan memiliki masalah ukuran gambar.  Gambar harus 60×50 tapi untuk beberapa alasan aneh, vendor asli memaksa mereka ke dalam 42×42, begitu mereka melihat tergencet:

 

Baik gambar

Citra buruk

Berikut adalah markup (agak sederhana):

<Tabel kelas = 'diperpanjang-outlook'>
  <thead>
    <TR>
      <th  lebar ='100′>3 Selasa</th>
    </TR>
  </thead>

  <tbody>
    <kelas TR = 'ramalan'>
      <lebar TD ='100′>
        <UL>
          <Li kelas = 'tinggi'>Tinggi: 72&deg;F</Li>
          <Li kelas = 'rendah'>Rendah: 44&deg;F</Li>
          <Li kelas = 'kondisi'>Cerah
            <img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/Trans/cond007.png’ lebar ='42’ tinggi ='42’ Alt =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</Meja>

Anda akan perhatikan bahwa meskipun path ke gambar sendiri menunjukkan dimensi yang tepat (60×50) vendor asli memaksa dalam 42×42.  Mengapa?  Gila.

Pokoknya, Saya menginginkan solusi cepat dan mudah untuk masalah ini dan aku berpaling untuk jQuery.  Triknya adalah untuk menemukan semua yang sesuai <img> Tag.  Aku tidak ingin Bergelandangan dengan tag img lain (yang ada banyak).  Ini sedikit jQuery melakukan trick:

<jenis script = text/javascript"" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></script>

<script type = "text/javascript">
     $(dokumen).siap(fungsi () {

         $(' li.condition > img').masing-masing(fungsi (Indeks, item)
            {
             $(item).CSS("lebar", "60"); 
             $(item).CSS("tinggi", "50");
            });
     }); // pada beban dokumen
</script>

Sedikit kode menemukan koleksi <Li> Tag kelas yang adalah "kondisi" dan <img> anak-anak.  Ini kemudian iterates melalui semua itu.  Bekerja seperti pesona.

Aku mungkin bisa merampingkan, tapi aku tidak pernah tipe orang unix yang dipecahkan π untuk 18 digit presisi menggunakan sed dan awk dan aku tidak seperti itu jika jQuery pria baik Tersenyum.

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Mengambil kendali OK dan tombol Batal

3 balasan

Saya menulis Artikel ini beberapa waktu lalu, tapi sepertinya saya tidak link dari blog saya pada saat, jadi here goes:

image

Artikel ini menjelaskan bagaimana cara memaksa newform.aspx untuk mengarahkan ulang ke satu halaman ketika pengguna mengklik OK dan halaman yang berbeda ketika dia klik Batal.

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Quick Tip: Menambahkan jQuery untuk MOSS penerbitan Halaman

1 Balasan

Ketika meningkatkan MOSS publising halaman menggunakan jQuery, Aku memukul benjolan kecepatan berikut:

Kesalahan Server di ' /’ Aplikasi.

Parser kesalahan

Deskripsi: Terjadi kesalahan selama parsing sumber daya yang dibutuhkan untuk melayani permintaan ini. Harap meninjau rincian kesalahan parse khusus berikut dan memodifikasi file sumber Anda tepat.

Pesan galat parser: Hanya mengontrol konten diperbolehkan langsung di halaman konten yang berisi konten kontrol.

Sumber kesalahan: 

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

File sumber: /_catalogs/masterpage/KCC_FacultyMember.aspx    Baris: 12

Informasi versi: Microsoft.NET Framework versi:2.0.50727.4927; ASP.NET versi:2.0.50727.4927

Itu cukup mudah untuk memperbaiki (h/t ke rekan saya, Uday Ethirajulu).  Pastikan bahwa kode jQuery hidup dalam "PlaceHolderAdditionalPageHead" seperti yang ditunjukkan:

<ASP:Konten ContentPlaceholderID = "PlaceHolderAdditionalPageHead" runat = "server">

<script

    type = text/javascript""

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

</script>

<script type = "text/javascript">

  $(dokumen).siap(fungsi() {

   // JQuery brilian hal terjadi di sini.

   });

</script>

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin