Comment puis-je également supprimer l'utilisation de $ par jQuery des fichiers de script ?

Question

J'essaie d'utiliser les contrôles de jQuery dans l'IDE de développement webMethods de Software AG ..J'importe maintenant le script jQuery à partir de l'URL suivante :

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Lorsque j'exécute la page déployée par l'IDE webMethods, j'obtiens les erreurs suivantes dans plusieurs navigateurs (entre les deux flèches bleues) :

Les erreurs au milieu sont les erreurs normales (c'est-à-direles erreurs avec les flèches bleues à côté d'elles) que j'obtiens, car quelque chose d'autre dans la page utilise également le '$', lorsque jQuery l'utilise également, cela entraîne la confusion de cet autre utilisateur '$', car cet autre utilisateur '$' contrôle le signe '$' ..

Pour confirmer cela, voici ce que j'ai fait :

J'ai écrit le code javascript suivant (ne vous inquiétez pas de l'utilisation interne de CAF.model ..c'est .id la fonction renvoie l'ID côté client du contrôle dont jQuery a besoin pour son traitement)

alert($(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());

...et cela a entraîné une autre de ces erreurs « getAttribute » montrées dans l'image ci-dessus ..

J'ai ensuite essayé :

jQuery.noConflict();
alert(jQuery(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());

Et il n'y a eu aucune erreur..!

Aussi, si j'utilise le code :

jQuery.noConflict();
alert($(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id).val());

cela entraîne l'erreur de flèche bleue du bas :Parce que l'autre entité utilisant le signe '$' ne peut pas comprendre ce qu'est la fonction 'val'...

Ce qui précède me confirme que les erreurs sont dues au fait que le script de jQuery utilise probablement le signe '$' pour son propre usage ..

Maintenant, pour essayer de résoudre ce problème, j'ai essayé d'ajouter un autre bloc de script avant le bloc de script appelant le propre fichier de script de jQuery et insérez ce code :

jQuery.noConflict();

Et cela a entraîné la première erreur de flèche bleue :..'jQuery' n'est pas défini aussi tôt dans le document, ce qui est logique ..

Donc, fondamentalement, je dois en quelque sorte dire au fichier de script principal jQuery de ne pas utiliser non plus le signe « $ » ..Comment puis-je faire cela ?

Answer 1

jQuery.noConflict(); doit être exécuté dans un bloc de script immédiatement après le chargement de jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

Les alias ci-dessus jQuery pour jq au lieu de $.

Les plugins pour jQuery transmettent l'objet jQuery et l'alias en interne $, mais la portée n'est pas globale, il n'est donc pas nécessaire de la modifier dans les plugins.

Answer 2

Ne vous inquiétez pas des composants internes de jQuery, ils fonctionnent de toute façon.

Le dernier message d'erreur signifie que vous essayez d'appeler une méthode jQuery (.val()) sur un élément DOM, pas sur un objet jQuery.

Tu le sais déjà

$(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id)

entraîne une erreur alors pourquoi appeler jQuery.noConflict() change ça?

jQuery.noConflict() simplement "libère" $ et lui attribue la valeur qu'il avait auparavant.

Soit vous devez utiliser jQuery tout au long de votre code ou attribuez-le à une variable différente, par exemple :

var $j = jQuery.noConflict();
$j(CAF.model("#{activePageBean.clientIds['txtDateInput']}").id);

Le ready Le gestionnaire d'événements reçoit également une référence à jQuery comme premier paramètre, donc vous (et devriez) y mettre tout votre code jQuery :

jQuery(function($) { 
    // $ will refer to jQuery
});

Mais cela ne vous permettra pas d'accéder à la valeur de quoi que ce soit $ fait référence en dehors de cette fonction.

Answer 3

Un bon moyen de le faire est d'utiliser une fonction d'exécution auto-exécutive, comme ceci:

(function ($) {

  // Your jQuery code here - just use $ as normal!
  $("#coolselector").cooljQueryPlugin();

})(jQuery);

Mettez cela dans votre code juste avant l'étiquette du corps de fermeture, pour accélérer la charge de la page.Bien que avec les CAF et le prototype, vous ne remarquerez jamais le speed-up :)