Tag Archives: jQuery

Échantillons de XSLT et jQuery

J'ai fait beaucoup de XSLT et jQuery et pensée que serait partager quelques extraits que d'autres peuvent trouver utiles dans l'avenir.

Exemple 1: Émettent JavaScript simple / jQuery dans XSLT:

<XSL:match de modèle « quelque chose =" XML:espace = « sauvegarde »>

  <!– Vide dans le champ masqué de requête filtres amical –>
  <script type = « text/javascript »>
    $(document).prêt(fonction(){
      $(« #QueryFriendlyFilters »).Val(« vide »);
    });
  </script>

</XSL:modèle>

Que le bit émet quelques JavaScript qui attend pour la page à la fin de chargement (en raison de la $(document).prêt(…)) et puis définit la valeur d'un champ masqué nommé QueryFriendlyFilters dans la valeur littérale « vide ».

Exemple 2: Utilisation <XSL:Si> pour vérifier la « supérieur à »,  « moins de », etc..

<XSL:match de modèle « quelque chose =" XML:espace = « sauvegarde »>

  <div id = « fdcAllFilters »>
 
    <XSL:si test="@Count>0">
      <span class = « fdcFilterLabel »>Filtres actifs:</travée>
    </XSL:Si>

    <!– plus de choses se passe ici. –>

</XSL:modèle>

L'extrait de code ci-dessus vérifie si un attribut nommé « Comte » de l'élément « quelque chose » est supérieur à zéro.  Le code XML derrière ce serait quelque chose comme:”

<quelque chose de Count = « 5 » />

Exemple 3: Parcourir tous les éléments, disséminer les appels jQuery.

<!– Parcourir tous les filtres et afficher le bon  Liens. –>
<XSL:pour chaque select = « UserFilter »>

  <une classe = FilterHref »" href = "javascript:mySubmitPage(« RemoveUserFilter »,'{@ ID}’)">[X]</un>

  <span class = « fdcFilterLabel »><XSL:valeur de select="@FilterValue"/></travée>

  <script type = « text/javascript »>

    $(document).prêt(fonction(){
        <XSL:texte><![CDATA[$(« #QueryFriendlyFilters »).Val( ($(« #QueryFriendlyFilters »).Val() + " ]]></XSL:texte>\"<XSL:valeur de select="@FilterValue"/>\"<XSL:texte><![CDATA["));]]></XSL:texte>
    });

  </script>

</XSL:pour chaque>

L'extrait de code ci-dessus est le plus complexe et il peut y avoir des moyens plus faciles de le faire.

Le XML derrière tout cela ressemble grossièrement à ce:

<UserFilter ID = « 123 » FilterValue = « xyzzy » />

Cet extrait est une itération à travers <UserFilter> nœuds. 

Elle émet d'abord une ancre qui balise lorsque l'utilisateur clique sur invoque une fonction JavaScript qui est déjà sur la page, « mySubmitPage » et passe la valeur d'un attribut le <UserFilter> nœud nommé « ID ». 

Il émet ensuite certains jQuery qui attend pour la page de chargement.  Que jQuery met à jour un champ masqué nommé « QueryFriendlyFilters » en ajoutant la valeur de l'attribut FilterValue.  Remarque tous le fou <XSL:texte> et <![CDATA[ … ]]> Stuff.

C'est tout, espérons que cela aide!

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Lists.asmx, GetListItems et dossiers

J'ai fait quelques recherches pour quelqu'un d'aujourd'hui autour de list.asmx web service fourni dans le cadre du SharePoint 2010 (et plus tôt).  Elle a réussi à obtenir les éléments de liste dans le dossier racine (les noms des sous-dossiers), mais il n'a pas pu obtenir des éléments dans les sous-dossiers.  J'ai fait quelques recherche sur les internets, et c'est une question très commune.  Encore, Je ne pouvais pas obtenir une bonne réponse à la question simple, « Si je sais que le dossier, Comment puis-je obtenir les éléments dans le dossier?”  Pour être honnête, I Didn't try tout cela dur depuis que j'ai voulu celui-ci sur la figure sur mes propres pendant un certain temps Sourire.

Pour définir cette, J'ai créé un site nommé « Blogging scénarios » et une liste personnalisée nommée « Liste personnalisée avec Sub dossiers ».  Ensuite, j'ai créé des dossiers nommés:

  • Année 2005
  • Année 2006
  • Année 2007

J'ai ajouté quelques éléments dans le dossier « L'année 2006 ».  C'est à quoi il ressemble:

image

Mon ami n'est pas écrire du code c#, mais plutôt à l'aide de Java, Si l'enveloppe SOAP a été ce qu'elle a vraiment besoin.  Pour obtenir que, J'ai écrit un peu de jQuery et ensuite utilisé un violon pour obtenir la conversation réelle de HTTP.

Voici le jQuery pertinent (J'ai copié le code vers le bas ci-dessous si vous souhaitez copier/coller):

image

Ils première clé est d'inclure tous les deux un <queryOptions> et <QueryOptions> nœud.  La seconde clé est que les <Dossier> le noeud est une URL à laquelle le client a accès.

Il y a peut-être d'autres façons d'obtenir ce, mais cela a fonctionné ainsi pour moi lors de l'utilisation de jQuery.

Voici l'enveloppe SOAP de ce qui précède:

<soapenv:Enveloppe xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:Corps>
    <GetListItems xmlns =’
http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <nom de la liste>Liste personnalisée avec les sous répertoires</nom de la liste>
      <viewFields>  
        <ViewFields>
          <FieldRef nom =' titre’ />
          <FieldRef nom ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Dossier>
http://demoserver1/blog Liste de scénarios/listes/Custom avec Sub dossiers/année 2006</Dossier>
        </QueryOptions>
      </queryOptions>
   
</GetListItems>
  </soapenv:Corps>
</soapenv:Enveloppe>

Beaucoup d'exemples et de discussion autour de ce m'a amené à croire que tout ce dont j'ai besoin est <QueryOptions> et spécifiez un nom de dossier.  Pour moi, J'ai à la fois placez-le à l'intérieur <queryOptions> ainsi que de spécifier une URL qualifiée complète pour la <Dossier> nœud.

Voici le programme d'installation de jQuery AJAX:

$(document).prêt(fonction() {
       var soapEnv =
           "<soapenv:Enveloppe xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Corps> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <nom de la liste>Liste personnalisée avec les sous répertoires</nom de la liste> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef nom =' titre’ /> \
                              <FieldRef nom ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Dossier>http://demoserver1/Blogging Liste de scénarios/listes/Custom avec Sub dossiers/année 2006</Dossier> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Corps> \
           </soapenv:Enveloppe>";

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Sans cesse de nidification <Div> Étiquettes et jQuery

Cela semble un tel sujet d'excentrique, Je ne suis pas sûr que c'est vraiment utile sur les blogs, mais qui a jamais cessé de me avant, donc ici, nous allons Sourire

Je travaille un projet où je suis tirer certaines données de recherche, emballage il dans un message XML, puis que XML est finalement transformé en HTML via XSLT.  Il y a beaucoup de jQuery, un bit qui implémente certaines fonctionnalités de tabulation.  Lorsque vous cliquez sur un onglet (vraiment, un <Div>), jQuery appelle .hide() et .show() sur divers divs (le chargement de la page initiale télécharge tout le contenu, il n'y a aucune publication dans ce cas).

Un tas de jours ago, l'onglet logique de commutation a commencé à se comporter de façon erratique et il ne serait pas montrer un de mes onglets.  J'ai finalement suivi il vers le fait qu'internet explorer (au moins) estime que la <Div> balises imbriquées loin, beaucoup plus profond que prévu.La barre d'outils développeur montrerait:

-<div id = « Tab1Content »>
  -<Div>
    -<Div>
      -<div id = « Tab2Content »>
        -<Div>
           …………………………
                   </Div>  <— montrant Enfin il fut fermé jusqu'ici!

Si, Si j'ai fait un $(« # Tab1Content »).cacher(), Tab2 serait également masquer et je ne pourrais jamais montrer Tab2 si je n'a pas montrer aussi Tab1.  J'ai copié et collé le code dans visual studio et il a montré de doublure de la div pied joliment, tout comme ils étaient censés faire, qui ressemble à ceci:

-<div id = « Tab1Content »>
  +<Div>
  +<Div>
-<div id = « Tab2Content »>
  +<Div>
  +<Div>

Je bat ma tête contre le mur pendant un certain temps et a remarqué que dans le réel HTML code générait beaucoup de vide <Div> balises, comme:

<corps>

  <div id = « Tab1Content »>

    <div id = « row1 » />
    <div id = « row2 » />

  </Div>

  <div id = « Tab2Content »>

    <div id = « row1 » />
    <div id = « row2 » />

  </Div>

</corps>

(Ce qui précède est waaaaaaaaaaaay trop simplifié.  Les balises div vide sont totalement valides. Certains de mes <Div> balises étaient pleins de contenu, mais beaucoup d'autres ne le sont pas.  Je suis arrivé à la prise de conscience que mon <XSL:pour chaque> les directives ont été émettant la forme abrégée des balises div quand le xsl:n'a pas pour chaque « trouver toutes les données.  J'ai forcé un commentaire HTML dans la sortie, comme le montre:

image

 

Après que je le faisais, la div alignés parfaitement et mon onglet basculement a commencé à travailler.

Comme toujours, J'espère que cela aide quelqu'un dans une pincée.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Encore plus de jQuery–Redimensionner l'Image par exemple

J'ai hérité un composant WebPart de vieux vendeur de son client et elle a un problème de taille des images.  Les images doivent être 60×50 mais pour une raison étrange, le vendeur initial les contraint à 42×42, ils cherchent donc écrasés:

 

Bon Image

Mauvaise Image

Voici le balisage (quelque peu simplifiées):

<Tableau de classe = « étendu-outlook »>
  <THEAD>
    <TR>
      <Th  largeur = 100′>3 Mardi</Th>
    </TR>
  </THEAD>

  <tbody>
    <classe TR = « prévisions »>
      <largeur de TD = 100′>
        <UL>
          <classe Li = « high »>Haute: 72&deg;F</Li>
          <classe Li = « faible »>Faible: 44&deg;F</Li>
          <classe Li = « condition »>Sunny
            <img src =’
http://deskwx.Weatherbug.com/images/Forecast/Icons/localized/60×50/en/trans/cond007.PNG’ largeur = 42’ hauteur = 42’ Alt =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</table>

Vous remarquerez que même si la chemin d'accès à l'image de soi montre la bonne dimension (60×50) le fournisseur original l'a forcé à 42×42.  Pourquoi?  Crazy.

De toute façon, Je voulais une solution rapide et facile à cette question et je me tournai vers jQuery.  Le truc est de localiser toutes les <img> balises.  Je ne voulais pas muck avec les autres balises img (dont il existe de nombreux).  Ce bit de jQuery a fait le truc:

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

<script type = « text/javascript »>
     $(document).prêt(fonction () {

         $(' li.condition > img »).chaque(fonction (index, élément)
           
{
             $(élément).CSS(« largeur », « 60 »); 
             $(élément).CSS(« hauteur », « 50 »);
            });
     }); // le chargement du document
</script>

Que le bit de code trouve la collection <Li> balises dont la classe est « condition » et <img> enfants.  Puis itère tout cela.  A fonctionné comme un charme.

Je pourrais probablement simplifier il, mais j'ai jamais été un genre de guy unix résoudre π À 18 précision de chiffres à l'aide de sed et awk et je ne suis pas ce genre si jQuery guy soit Sourire.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Prendre le contrôle de votre OK et annuler les boutons

J'ai écrit Cet article un tout nouveau, mais les regards comme je ne lier à elle de mon blog au moment, donc voilà:

image

Cet article explique comment forcer newform.aspx pour rediriger vers une page lorsque l'utilisateur clique sur OK et une autre page lorsqu'elle clique sur Annuler.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Astuce rapide: Ajout de jQuery à MOSS Publishing Pages

Lorsque l'amélioration des pages de publication de mousse à l'aide de jQuery, J'ai frappé le ralentisseur suivant:

Erreur de serveur dans ' /’ Application.


Erreur de l'analyseur

Description: Une erreur s'est produite pendant l'analyse d'une ressource nécessaire à cette demande de service. Veuillez revoir les détails de l'erreur suivante analyse spécifique et modifier votre fichier de source de manière appropriée.

Message d'erreur analyseur: Seulement les contrôles de contenu sont autorisés directement dans une page de contenu qui contient des contrôles de contenu.

Erreur de la source:

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

Fichier source: /_catalogs/masterpage/KCC_FacultyMember.aspx    Ligne: 12


Informations de version: Microsoft.NET Framework Version:2.0.50727.4927; ASP.NET Version:2.0.50727.4927

C'est assez facile à fixer (h/t à mon collègue, Uday Ethirajulu).  Veillez à ce que le code jQuery vit à l'intérieur de la « PlaceHolderAdditionalPageHead », comme le montre:

<ASP:Contenu ContentPlaceholderID = PlaceHolderAdditionalPageHead »" runat = « server »>

<script

    type = "text/javascript"

    SRC="/jQuery/jQuery-1.4.min.js »>

</script>

<script type = « text/javascript »>

  $(document).prêt(fonction() {

   // JQuery brillant stuff va ici.

   });

</script>

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin