thẻ ghi lưu trữ: jQuery

XSLT và jQuery mẫu

Tôi đã làm rất nhiều của XSLT và jQuery và nghĩ rằng tôi muốn chia sẻ một vài đoạn mà những người khác có thể tìm thấy hữu ích trong tương lai.

Ví dụ 1: Phát ra đơn giản JavaScript / jQuery trong XSLT:

<XSL:trận đấu tiêu bản = "cái gì" XML:vũ trụ = "bảo vệ">

  <!– Trống trong lĩnh vực này ẩn truy vấn thân thiện bộ lọc –>
  <kiểu kịch bản = "text/javascript">
    $(tài liệu).sẵn sàng(chức năng(){
      $("#QueryFriendlyFilters").Val("rỗng");
    });
  </kịch bản>

</XSL:tiêu bản>

Mà bit phát ra một số JavaScript mà chờ đợi cho trang để hoàn tất tải (vì các $(tài liệu).sẵn sàng(…)) và sau đó bộ giá trị của một lĩnh vực ẩn tên QueryFriendlyFilters với giá trị chữ "rỗng".

Ví dụ 2: Sử dụng <XSL:Nếu> để kiểm tra "lớn hơn",  "ít hơn", vv.

<XSL:trận đấu tiêu bản = "cái gì" XML:vũ trụ = "bảo vệ">

  <div id = "fdcAllFilters">
 
    <XSL:Nếu test="@Count>0">
      <div class = "fdcFilterLabel">Hiện tại bộ lọc:</khoảng>
    </XSL:Nếu>

    <!– nhiều thứ xảy ra ở đây. –>

</XSL:tiêu bản>

Đoạn mã trên sẽ kiểm tra xem liệu một thuộc tính được đặt tên "Tin cậy" của nguyên tố "một cái gì đó" lớn hơn 0.  XML sau này sẽ là một cái gì đó như:”

<một cái gì đó Count = "5" />

Ví dụ 3: Iterate qua tất cả các yếu tố, xen jQuery cuộc gọi.

<!– Iterate qua tất cả các bộ lọc và hiển thị đúng  liên kết. –>
<XSL:cho mỗi chọn = "UserFilter">

  <một tầng lớp = "FilterHref" href = "javascript:mySubmitPage('RemoveUserFilter','{@ ID}’)">[X]</một>

  <div class = "fdcFilterLabel"><XSL:giá trị của select="@FilterValue"/></khoảng>

  <kiểu kịch bản = "text/javascript">

    $(tài liệu).sẵn sàng(chức năng(){
        <XSL:văn bản><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></XSL:văn bản>\"<XSL:giá trị của select="@FilterValue"/>\"<XSL:văn bản><![CDATA["));]]></XSL:văn bản>
    });

  </kịch bản>

</XSL:cho mỗi>

Đoạn mã trên là phức tạp nhất và có thể có cách dễ dàng hơn để làm điều đó.

XML sau này trông gần như thế này:

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

Đoạn này iterating thông qua <UserFilter> các nút. 

Nó lần đầu tiên phát ra một neo từ khóa đó khi nhấp invokes hàm JavaScript là đã có trên trang, "mySubmitPage" và đã vượt qua giá trị của một thuộc tính trên các <UserFilter> nút đặt tên "ID". 

Nó sau đó phát ra một số jQuery mà chờ đợi cho trang để tải.  JQuery đó Cập Nhật một lĩnh vực ẩn tên là "QueryFriendlyFilters" bằng cách thêm giá trị của thuộc tính FilterValue.  Lưu ý tất cả các điên <XSL:văn bản> và <![CDATA[ … ]]> công cụ.

Đó là nó, hy vọng nó sẽ giúp!

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Lists.asmx, GetListItems và thư mục

Tôi đã làm một số nghiên cứu cho một ai đó ngày hôm nay trên các dịch vụ web list.asmx cung cấp như một phần của SharePoint 2010 (và trước đó).  Cô đã có thể nhận được các bản ghi danh sách ở thư mục gốc (bao gồm tên của thư mục con), nhưng không thể có được các mục trong thư mục con.  Tôi đã làm một số tìm kiếm xung quanh trên internets và đó là một câu hỏi phổ biến đáng ngạc nhiên.  Được, Tôi không thể nhận được một câu trả lời tốt các câu hỏi đơn giản, "nếu tôi biết thư mục, làm thế nào để có được các mục trong thư mục?”  Để được trung thực, Tôi đã không thử tất cả những khó khăn kể từ khi tôi đã muốn con số này một ra ngày của riêng tôi trong một thời Nụ cười.

Để thiết lập, Tôi tạo ra một trang web được đặt tên "Viết blog kịch bản" và một danh sách tùy chỉnh tên "Tùy chỉnh danh sách với tiểu Folders".  Tôi sau đó tạo ra thư mục tên:

  • Năm 2005
  • Năm 2006
  • Năm 2007

Tôi thêm một vài bài vào thư mục "Năm 2006".  Đây là những gì nó trông giống như:

image

Bạn bè của tôi không phải là văn bản C# Mã nhưng thay vì sử dụng Java, Vì vậy, phong bì xà phòng là những gì cô ấy thực sự cần.  Để nhận được rằng, Tôi đã viết một chút về jQuery và sau đó sử dụng fiddler để có được cuộc trò chuyện thực tế HTTP.

Ở đây là có liên quan jQuery (Tôi sao chép mã xuống dưới đây nếu bạn muốn sao chép/dán):

image

Họ quan trọng đầu tiên là để bao gồm cả một <queryOptions> và <QueryOptions> nút.  Điều quan trọng thứ hai là các <Thư mục> nút là một URL mà khách hàng có quyền truy cập.

Có thể có những cách khác để có được điều này, nhưng điều này đã làm việc tốt cho tôi khi sử dụng jQuery.

Đây là phong bì xà phòng cho các bên trên:

<soapenv:Phong bì xmlns:soapenv =’http://schemas.xmlsoap.org/Soap/Envelope/’>                
  <soapenv:Cơ thể>
    <GetListItems xmlns =’
http://schemas.Microsoft.com/SharePoint/Soap/’>
      <listName>Tùy chỉnh danh sách với tiểu thư mục</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef tên =' tiêu đề’ />
          <FieldRef tên ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Thư mục>
http://demoserver1/blog Kịch bản/danh sách tùy chỉnh danh sách với tiểu thư mục/năm 2006</Thư mục>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Cơ thể>
</soapenv:Phong bì>

Rất nhiều ví dụ và thảo luận xung quanh này dẫn tôi để tin rằng tất cả tôi cần là <QueryOptions> và chỉ ra tên thư mục.  Đối với tôi, Tôi cần cả hai quấn nó bên trong <queryOptions> cũng như chỉ định một URL đầy đủ điều kiện cho các <Thư mục> nút.

Đây là thiết lập AJAX của jQuery:

$(tài liệu).sẵn sàng(chức năng() {
       var soapEnv =
           "<soapenv:Phong bì xmlns:soapenv =’http://schemas.xmlsoap.org/Soap/Envelope/’> \
               <soapenv:Cơ thể> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/Soap/’> \
                       <listName>Tùy chỉnh danh sách với tiểu thư mục</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef tên =' tiêu đề’ /> \
                              <FieldRef tên ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Thư mục>http://demoserver1/Blogging Kịch bản/danh sách tùy chỉnh danh sách với tiểu thư mục/năm 2006</Thư mục> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Cơ thể> \
           </soapenv:Phong bì>";

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Vô tận làm tổ <div> Tags và jQuery

Điều này có vẻ như một chủ đề oddball, I 'm not sure it's thực sự giá trị viết blog về, nhưng đó đã không bao giờ ngừng lại tôi trước khi, Vì vậy ở đây chúng tôi đi Nụ cười

Tôi đang làm việc một dự án mà tôi kéo một số dữ liệu từ một tìm kiếm, đóng gói nó vào thư XML và sau đó là XML mà cuối cùng được chuyển đổi thành HTML thông qua XSLT.  Đó là rất nhiều của jQuery tham gia, một chút trong đó thực hiện một số chức năng tabbing.  Khi bạn bấm vào một tab (Thực sự, một <div>), jQuery invokes .hide() và .show() trên các divs (tải ban đầu trang tải tất cả nội dung, do đó, có không có postbacks trong trường hợp này).

Một loạt các giờ trước đây, tab chuyển mạch logic bắt đầu cư xử erratically và nó sẽ không hiển thị một trong các tab của tôi.  Theo tôi cuối cùng dõi nó xuống đến một thực tế rằng internet explorer (tối thiểu) nghĩ rằng các <div> Tags lồng nhau đến nay, sâu xa hơn nhằm mục đích.Thanh công cụ phát triển sẽ hiển thị:

-<DIV id = "Tab1Content">
  -<div>
    -<div>
      -<DIV id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-cuối cùng Hiển thị nó đã được đóng cửa tất cả các cách xuống ở đây!

Vì vậy, Nếu tôi đã làm một $("#Tab1Content").ẩn(), Tôi cũng sẽ ẩn Tab2 và tôi không bao giờ có thể hiển thị Tab2 nếu tôi cũng không cho Tab1.  Tôi sao chép và dán mã vào visual studio và nó cho thấy tất cả các div lót lên độc đáo, cũng giống như họ đã nghĩa vụ phải thực hiện, Tìm kiếm như thế này:

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

Tôi đánh đập đầu của tôi vào tường cho một thời gian và nhận thấy rằng trong thực tế HTML mã tạo ra rất nhiều sản phẩm nào <div> Download, giống như:

<cơ thể>

  <DIV id = "Tab1Content">

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

  </div>

  <DIV id = "Tab2Content">

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

  </div>

</cơ thể>

(Ở trên là waaaaaaaaaaaay đơn giản.  Các thẻ div có sản phẩm nào là hoàn toàn hợp lệ. Một số của tôi <div> Tags được đầy đủ các nội dung, nhưng nhiều hơn nữa không.  Tôi đến việc thực hiện đó của tôi <XSL:cho mỗi> chỉ thị phát ra các hình thức ngắn div tags khi xsl:cho mỗi không ' tìm thấy bất kỳ dữ liệu.  Tôi buộc phải bình luận một HTML đầu ra, như được hiển thị:

image

 

Sau khi tôi đã làm điều đó, Tất cả div xếp độc đáo và chuyển đổi thẻ của tôi bắt đầu làm việc.

Như mọi khi, Tôi hy vọng điều này sẽ giúp một người nào đó trong một pinch.

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Tuy nhiên, bộ jQuery–Thay đổi kích thước một ví dụ hình ảnh

Tôi thừa kế một phần web từ đại lý cũ của một khách hàng và nó có một vấn đề kích thước hình ảnh.  Những hình ảnh nên là 60×50 nhưng đối với một số lý do lẻ, các nhà bán ban đầu buộc chúng thành 42×42, do đó, họ trông squashed:

 

Hình ảnh tốt

Hình ảnh xấu

Dưới đây là các đánh dấu (hơi đơn giản):

<Tabl lớp = 'mở rộng-outlook'>
  <thead>
    <tr>
      <th  chiều rộng ='100′>3 Thứ ba</th>
    </tr>
  </thead>

  <tbody>
    <tr lớp = 'thời'>
      <chiều rộng TD ='100′>
        <ul>
          <Li lớp = 'cao'>Cao: 72&deg;F</Li>
          <Li lớp = 'thấp'>Thấp: 44&deg;F</Li>
          <Li lớp = 'tình trạng'>Nắng
            <IMG src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/Trans/cond007.png’ chiều rộng ='42’ chiều cao ='42’ Alt =” />
          </Li>
        </ul>
      </TD>
    </tr>

  </tbody>

</Bàn>

Bạn sẽ lưu ý rằng mặc dù các đường dẫn đến hình ảnh cho thấy kích thước thích hợp (60×50) Các nhà cung cấp ban đầu buộc nó trong 42×42.  Tại sao?  Điên.

Dù sao, Tôi muốn có một giải pháp nhanh chóng và dễ dàng cho vấn đề này và tôi đã chuyển sang jQuery.  The trick là để xác định vị trí tất cả các thích hợp <IMG> Tags.  Tôi không muốn muck với bất kỳ thẻ img khác (trong đó có rất nhiều).  Này chút jQuery đã làm các trick:

<kiểu kịch bản = text/javascript"" SRC ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></kịch bản>

<kiểu kịch bản = "text/javascript">
     $(tài liệu).sẵn sàng(chức năng () {

         $(' li.condition > IMG').mỗi(chức năng (chỉ số, mục)
           
{
             $(mục).CSS("chiều rộng", "60"); 
             $(mục).CSS("chiều cao", "50");
            });
     }); // Tải tài liệu
</kịch bản>

Có chút mã tìm thấy bộ sưu tập <Li> Tags có lớp là "điều kiện" và <IMG> trẻ em.  Nó sau đó iterates thông qua tất cả mà.  Làm việc như một say mê.

Tôi có lẽ có thể sắp xếp nó, nhưng tôi không bao giờ một loại unix guy mà giải quyết π để 18 chữ số chính xác bằng cách sử dụng sed và awk và tôi không phải là loại đó nếu jQuery guy hoặc Nụ cười.

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Kiểm soát OK và hủy bỏ nút của bạn

Tôi đã viết bài viết này một khi trở lại, nhưng hình như tôi không liên kết với nó từ blog của tôi lúc đó, Vì vậy, ở đây đi:

image

Bài viết này mô tả cách để buộc newform.aspx để chuyển hướng đến một trang khi người dùng nhấp OK và một trang khác nhau khi cô nhấp Hủy bỏ.

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Mẹo nhanh: Thêm jQuery cho MOSS xuất bản các trang

Khi tăng cường MOSS publising các trang bằng cách sử dụng jQuery, Tôi nhấn những vết sưng tốc độ sau:

Server lỗi trong ' /’ Ứng dụng.


Lỗi phân tích cú pháp

Mô tả: Xuất hiện lỗi trong phân tích cú pháp của một nguồn lực cần thiết để phục vụ yêu cầu này. Xin vui lòng xem lại chi tiết sau đây lỗi cụ thể phân tích cú pháp và sửa đổi tập tin nguồn của bạn một cách thích hợp.

Thông báo lỗi phân tích cú pháp: Chỉ kiểm soát được phép trực tiếp trong một trang nội dung có chứa nội dung kiểm soát.

Nguồn lỗi:

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

Tệp nguồn: /_catalogs/masterpage/KCC_FacultyMember.aspx    Dòng: 12


Thông tin Phiên bản: Microsoft.NET Framework phiên bản:2.0.50727.4927; ASP.NET Phiên bản:2.0.50727.4927

Nó được dễ dàng, đủ để sửa chữa (h/t với đồng nghiệp của tôi, Uday Ethirajulu).  Hãy chắc chắn rằng mã jQuery sống bên trong "PlaceHolderAdditionalPageHead", giống như hiển thị:

<ASP:Nội dung ContentPlaceholderID = "PlaceHolderAdditionalPageHead" runat = "máy chủ">

<kịch bản

    loại = text/javascript""

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

</kịch bản>

<kiểu kịch bản = "text/javascript">

  $(tài liệu).sẵn sàng(chức năng() {

   // Rực rỡ jQuery công cụ đi ở đây.

   });

</kịch bản>

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin