Navigieren / suchen

cfJSON und jQuery

Heute hatte ich noch eine kleine Herausforderung und zwar wollte ich einen AJAX-Request machen der mit die Seriennummern eines Produktes liefert und zwar während der Eingabe. Ziemlich gleich wie bei der Google-Suche. Wenn ich einen Eintrag auswähle soll er nochmals einen AJAX-Request machen und mir den kompletten Datensatz auslesen und das Formular (Informationen zum Produkt) automatisch ausfüllen.

Der erste Teil ist ja nicht sonderlich schwer. Da kann man ja einfach eine ul-li Struktur zurückliefern und anzeigen. Das sieht dann so aus:
Voraussetzung dazu ist das jQuery-Framework.

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  // Funktion ausführen wenn das Dokument geladen ist
  $(document).ready(function (){
    // Wenn beim Feld mit der ID 'suche' eine Taste gedrückt wird wird der Ajax-Request ausgelöst
    $("#suche").keyup(function (){
      // Ajax-Request auslösen
      $.ajax({
        type: "GET", // Methode GET
        url: "ajax.cfm", // Datei ajax.cfm
        data: "suche=" + $(this).val(), // URL-Parameter suche mit dem Wert des Feldes
        success: function(msg){ // Funktion wenn der Request erfolgreich war
			// Response in den DIV 'suggest' reinschreiben
			$("#suggest").html(msg); 

                        // Erweiterung kommt unten

    		    } // close success function
      }); // close ajax
    }); // close keyup
  }); // close ready
</script>

Der HTML-Code ist folgender:

<input type="text" name="suche" id="suche" value="" />
<div id="suggest">&nbsp;</div>
<div id="ausfuellen">&nbsp;</div>

Zurückgeliefert kriegt man dann beispielsweise folgenden Code:

<ul>
  <li rel="1">
    Erster Eintrag
  </li>
  <li rel="2">
    Zweiter Eintrag
  </li>
</ul>

Jetzt kommt der schwierigere Teil. Jetzt muss man ebenfalls nochmals einen AJAX-Request abfeuern wenn man einen Eintrag anwählt. Soweit noch einfach. Folgenden Punkt oben bei // Erweiterung kommt unten einfügen

// Beim klicken auf ein Element
$("#suggest li").click(function(){
  // AJAX-JSON-Request abfeuern
  $.getJSON(
    "json.cfm?id=" + $(this).attr("rel"), // URL mit Parameter aus der Liste (Attribut 'rel')
    function(data){
	// Wenn die Daten angekommen sind in das DIV schreiben
        $("#ausfuellen").html(data.data.name[0]);
	  // Je nachdem wie die Daten kommen anders benennen.
	  // data.recordcount wäre beispielsweise den RecordCount des Querys
        } // close function for data
  ); // close getJSON
}); // close click

So der Coldfusion-Code muss natürlich auch noch her. Der generiert ein Query und generiert mit der cfJSON-Komponente ein JSON-Element und liefert es zurück.

<!--- Query mit Daten erstellen --->
<cfset dataQuery = queryNew('id,name') />

<cfset queryAddRow(dataQuery, 1) />
<cfset querySetCell(dataQuery, 'id', '1') />
<cfset querySetCell(dataQuery, 'name', 'Test1') />

<cfset queryAddRow(dataQuery, 1) />
<cfset querySetCell(dataQuery, 'id', '2') />
<cfset querySetCell(dataQuery, 'name', 'Test2') />

<!--- Gewünschtes Resultat laden --->
<cfquery name="resultQuery" dbtype="query">
  SELECT *
  FROM dataQuery
  WHERE id = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.id#" />
</cfquery>

<!--- cfJSON laden --->
<cfset objJSON = createObject('component','json') />

<!--- Query Codieren in JSON --->
<cfoutput>#objJSON.encode(resultQuery)#</cfoutput>

Hinterlasse einen Kommentar

Name*

E-Mail* (wird nicht veröffentlicht)

Webseite