Schlagwort / jQuery

by Niko

Zend_Form + Autocomplete

Da ich im Netz kein zufriedenstellendes Beispiel für Zend_Form in Verbindung mit Autocomplete finden konnte, möchte ich hier meinen Lösungsansatz zeigen. Vorraussetzungen sind hierfür ein Zend_Form, sowie aktiviertes jQuery + jQueryUI.

Im Formular passiert erstmal nix Besonderes. Es wird ein normales Zend_Form_Element_Text angelegt.

$autoCompleteElement = new Zend_Form_Element_Text('autoCompleteElement');

Der Controller bekommt eine zusätzliche autocompleteAction spendiert, welche wir dann später über jQuery ansprechen wollen, um die Werte zur aktuellen Eingabe zu erhalten. Wichtig ist hier, die Werte JSON-kodiert zu übergeben, um sie später im Javascript-File sauber auslesen zu können. Bei meinem $returnArray soll der Value später ins Formularfeld eingetragen werden, wohingegen das Label als Anzeige für die Auswahl beim Autocomplete gedacht ist.

public function autocompleteAction()
{
    $post = $this->_request->getPost();
    $searchString = $post['searchString'];
    
    // $returnArray zur Demonstration meiner übergebenen Daten
    $returnArray[$row['value']] = $row['label']; 
    $valuesJson = Zend_Json::encode($returnArray);
    echo $valuesJson;
    $this->view->layout()->disableLayout();
    $this->_helper->viewRenderer->setNoRender(true);
}

Das Javascript kümmert sich schlussendlich um das Absenden des Requests und das Mappen der empfangenen Daten.

$(document).ready(function() {
    $("input#autoCompleteElement").autocomplete({
        source : function( request, response) {
            url = "/meinModul/meinController/autocompleteAction";
            data = { 'searchString' : request.term };
            $.post(url, data, function(JSON){
                response($.map(JSON, function (item, value) {
                    return {
                        label: item,
                        value: value,
                        source: item};
                    }));
            }, 'json');
        },
        minLength: 1,
        autoFocus: true
    });
});

Zum Schluss natürlich nicht vergessen das Javascript in euer View-Script mit einzubinden.

by Niko

[Javascript/jQuery] Values ausgewählter Checkboxen ermitteln

Szenario: Ich hab ein Formular, ähnlich wie Folgendes, und möchte per Javascript ermitteln, welche Objekte alle ausgewählt sind. Die Werte der ausgewählten Checkboxen möchte ich später bspw. an eine URL semikolongetrennt anhängen. Die Auswertung, welche Checkboxen aktiviert sind oder nicht, soll ohne Absenden des Formulars geschehen.

<form>
    <input type="checkbox" id="checkbox_1" value="1001"/>
    <input type="checkbox" id="checkbox_2" value="1011"/>
    <input type="checkbox" id="checkbox_3" value="1015"/>
</form>

Folgendes Javascript prüft dabei die Checkboxen beim Ändern mittels jQuery und trägt den Wert der Checkbox in ein Array ein.
Wird die Checkbox abgewählt, soll der Wert wieder aus dem Array gelöscht werden.

checkedArray = new Array();
$("[id^=checkbox_]").change(function() {
    if($(this).is(":checked")) {
        checkedArray.push($(this).val());
    } else {
        for(var i=0; i<checkedArray.length;i++ )
        {
            if(checkedArray[i]== $(this).val()) {
                checkedArray.splice(i,1);
            }
        }
    }
});

Das entstandene Array kann in einer weiteren Javascript-Funktion genutzt werden um bspw. an eine URL benötigte URL-Parameter anzuhängen. Über die Funktion .join() werden die Values des Arrays mittels dem übergebenen Separator verkettet und als String ausgegeben. 

location.href = meineUrl + checkedArray.join(';');

Interessante Quellen dazu: