[JAVA] Résumé des astuces (Rails) que vous pouvez utiliser tout le temps car vous comprenez qu'il s'agit d'une remise jQuery

Je crée une application WEB avec Rails. La valeur d'expérience de Ruby on Rails est d'environ un an en septembre. Je suis venu pour pouvoir créer diverses fonctions, je vais donc les résumer un peu. Comment faites-vous une telle fonction? Veuillez commenter s'il y a quelque chose comme. pense.

Qu'est-ce que jQuery?

Officiel: [https://jquery.com/:title]

Si vous regardez cet article, je ne pense pas que ce soit nécessaire, mais je l'ai cité sur Wikipedia.

jQuery est une bibliothèque JavaScript conçue pour faciliter l'écriture de code JavaScript pour les navigateurs Web. John Resig l'a sorti au BarCamp NYC en janvier 2006. Il est utilisé dans diverses situations, et certains l'appellent le standard de facto pour les bibliothèques JavaScript [2]. La copie de capture sous le logo est "écrire moins, faire plus" (ce qui signifie "faire plus avec moins de description").
Source: [https://ja.wikipedia.org/wiki/JQuery:title]

Comment utiliser relativement

Vous pouvez obtenir l'élément DOM avec jquery, manipuler l'élément DOM par l'action à ce moment-là, ajouter ou supprimer la classe et effectuer un traitement asynchrone avec ajax. (Je pense que les gens vont trouver "Qu'est-ce qu'un élément DOM?" Lorsqu'on leur demande "Qu'est-ce qu'un élément DOM?")
Par exemple, comme ceci ↓
[https://watablogtravel.com/document-object-model/:title]

 $(document).on('change', '[name^="company[purchases_attributes]["][name$="][product_code]"]', function(){
    var supplier_product_code = $(this).nearest('[name^="company[purchases_attributes]"][name$="[supplier_product_code]"]');

    $.ajax({
      url: '/suppliers/purchases/get_supplier_product_code',
      type: "GET",
      dataType: "json",
      headers: { 'X-CSRF-Token': token },
      data: { "product_code": $(this).val(), "supplier_product_code": supplier_product_code.val() },
      success: function (data) {
        supplier_product_code.val(data.supplier_product_code);
        supplier_product_code.trigger('change');
      },
      error: function () {
        supplier_product_code.val("");
        supplier_product_code.trigger('change');
      }
    });
  })

Dans cette partie des 1ère et 2ème lignes, j'ai personnellement trouvé pratique d'obtenir l'élément DOM avec une correspondance de préfixe, une correspondance de suffixe et une condition "et" (&&).
En écrivant comme la deuxième ligne, le nom commence par entreprise [achats_attributes] et le nom se termine par [code_produit_produit]

$(this).nearest('[name^="company[purchases_attributes]"][name$="[supplier_product_code]"]');

La correspondance de préfixe et la correspondance de suffixe sont utilisées en même temps.

Ainsi, par exemple, `nom ^ =" société [achats_attributs] [123456] [code_produit_fournisseur] ʻet d'autres pièces telles que 123456 peuvent être acquises ensemble même avec des éléments changeants dynamiquement tels que id.
De plus, vous pouvez utiliser «le plus proche» pour obtenir l'élément DOM correspondant le plus proche de celui que vous avez obtenu.
Une utilisation fréquemment utilisée est de changer l'état des éléments cochés sur l'écran de liste à la fois avec ajax. Quelque chose comme ca.
Le fonctionnement par lots de l'écran de liste est plus facile avec ajax qu'avec le formulaire. </ b>

def get_supplier_product_code 
      if params.key?(:product_code)
        params[:supplier_product_code] = Product.find_by(code: params[:product_code]).supplier_product_code
      end
      render json: {supplier_product_code: params[:supplier_product_code]}.to_json
    end

$.ajax({
      url: '/suppliers/purchases/get_supplier_product_code',
      type: "GET",
      dataType: "json",
      headers: { 'X-CSRF-Token': token },
      data: { "product_code": $(this).val(), "supplier_product_code": supplier_product_code.val() },
      success: function (data) {
        supplier_product_code.val(data.supplier_product_code);
        supplier_product_code.trigger('change');
      },
      error: function () {
        supplier_product_code.val("");
        supplier_product_code.trigger('change');
      }
    });