[JAVA] Zusammenfassung der Tipps (Rails), die Sie vollständig verwenden können, da Sie verstehen, dass es sich um einen jQuery-Rabatt handelt

Ich mache eine WEB-Anwendung mit Rails. Der Erfahrungswert von Ruby on Rails beträgt im September etwa ein Jahr. Ich bin in der Lage, verschiedene Funktionen zu erstellen, daher fasse ich sie ein wenig zusammen. Wie macht man eine solche Funktion? Bitte kommentieren Sie, wenn es so etwas gibt. Überlegen.

Was ist jQuery?

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

Wenn Sie sich diesen Artikel ansehen, denke ich nicht, dass es notwendig ist, aber ich habe ihn aus Wikipedia zitiert.

jQuery ist eine JavaScript-Bibliothek, die das Schreiben von JavaScript-Code für Webbrowser erleichtert. John Resig veröffentlichte es im Januar 2006 im BarCamp NYC. Es wird in verschiedenen Situationen verwendet, und einige nennen es den De-facto-Standard für JavaScript-Bibliotheken [2]. Die Fangkopie unter dem Logo lautet "weniger schreiben, mehr tun" (was bedeutet "mehr mit weniger Beschreibung tun").
Quelle: [https://ja.wikipedia.org/wiki/JQuery:title]

Wie man relativ benutzt

Sie können das DOM-Element mit jquery abrufen, das DOM-Element durch die damalige Aktion bearbeiten, die Klasse hinzufügen oder entfernen und eine asynchrone Verarbeitung mit Ajax durchführen. (Ich denke, die Leute werden sich "Was ist ein DOM-Element?" Einfallen lassen, wenn sie gefragt werden "Was ist ein DOM-Element?")
Zum Beispiel so ↓
[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');
      }
    });
  })

In diesem Teil der 1. und 2. Zeile fand ich es persönlich praktisch, das DOM-Element mit Präfixübereinstimmung, Suffixübereinstimmung und "und" (&&) Bedingung abzurufen.
Wenn Sie wie in der zweiten Zeile schreiben, beginnt der Name mit "Firma [Einkäufe_Attribute]" und der Name endet mit "[Lieferanten_Produktcode]"

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

Die Präfixübereinstimmung und die Suffixübereinstimmung werden gleichzeitig verwendet.

So können beispielsweise name ^ =" company [purchase_attributes] [123456] [vendor_product_code] und andere Teile wie 123456 auch mit sich dynamisch ändernden Elementen wie id zusammen erworben werden.
Außerdem können Sie "next" verwenden, um das DOM-Element zu erhalten, das dem von Ihnen erhaltenen am nächsten kommt.
Eine häufig verwendete Verwendung besteht darin, den Status der markierten Elemente auf dem Listenbildschirm sofort mit Ajax zu ändern. So ähnlich.
Die Stapeloperation des Listenbildschirms ist mit Ajax einfacher als mit Formular. </ 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');
      }
    });