Seitenhierarchie
Zum Ende der Metadaten springen
Zum Anfang der Metadaten

 

Dieses Plugin wandelt ein normales HTML-Formular, das seinen Inhalt per POST sendet, in ein Formular um, dessen Inhalt per Ajax gesendet wird.

Historie

VersionÄnderungenAnmerkungen
0.1.0
ALEJS-72 - Abrufen der Vorgangsdetails... STATUS

Neues Plugin löst alvineFormAjax ab

  • Plugin umbenannt
  • neues Flag "ajaxsend" um zu entscheiden zu können, ob das Formular per Ajax gesendet werden soll
  • neues Event formBeforeSend, wird getriggert bevor das Formular per Ajax abgeschickt wird

 

0.1.1
ALEJS-72 - Abrufen der Vorgangsdetails... STATUS
.bugfix in der Methode beforeSend wurde die defaults nicht korrekt definiert
0.1.2

ALEJS-72 - Abrufen der Vorgangsdetails... STATUS

bugfix in der Methode setResponseData. Wenn der ResponseSelector nicht mit find() gefunden wird. Wird mit closest() gesucht
Frameworks  & Plugins
jQuery> 1.6
Bootstrap > 3 
Bootstrap-notify> 3 (optional)

Installation

Javascript- und CSS-Dateien können vom Alvine-CDN geladen werden.

//cdn.alvine.io/libs/alvine/form/jquery.alvineform-0.1.2.min.js

Bibliotheken

 

<script src="//cdn.alvine.io/libs/alvine/alvinenotify/jquery.alvinenotify-0.0.1.min.js"></script>
<script src="//cdn.alvine.io/libs/alvine/form/jquery.alvineform-0.1.2.min.js"></script>

 

Konfigurieren

Über die angebenen Parameter kann das Plugin konfiguriert werden. Die Werte können entweder per Script, als Json im Tag oder als einzelne data-Attribute (data-) im Tag notiert werden. Weitere Details siehe  die Seite Frontend.

<div id="meinFormular">
	<form class="alvineForm" method="post" action="/index.php" target="_self" 
		data-alvineform-datatype="html" 
		data-alvineform-targetselector="#meinFormular" 
		data-alvineform-responseselector="#meinFormular" >
     
	...
 
	</form>   
</div>   

Parameter

SchlüsselTypeBeschreibungStandardwert
ajaxsendbooleanFormular per Ajax sendentrue
methodStringAlternatives HTTP-Verb (POST, PUT, DELETE, ...), wenn das Verb im Formular überschrieben werden sollnull
datatypeStringDatentyp nach jquery Standardjson
validationStringWird der Wert auf 'ajax' gesetzt, so wird das Formular bei Änderungen zur Validierung an die URL des Formulars gesendet (an die URL wird der Parameter whatif angehängt)false
notificationsarrayFür diese Status-Codes wird eine Notification ausgegeben. Die Werte müssen Zeichenketten sein (keine Integer)['500', '404', '403']
alertboxTemplatestringTemplate für die Fehlermeldungen. Der Platzhalter ${message} wird mit der Meldung ersetzt.<div....
spinnerTemplatestringTemplate für den Spinner<span class="spinner"><i class="fa fa-refresh fa-spin"></i></span>
targetselectorstringSelektor um die Antwort in dieses Element zu ersetzen 
responseselectorstringSelektor um Elemente in der Antwort auszuschneiden um ausschließlich diesen Inhalt in den targetselector zu schreiben 
beforesendeventstringEvent Trigger vor dem abgeschickten des FormularsformBeforeSend
successeventstringEvent Trigger für ein erfolgreich abgeschicktes FormularformSuccess
completedeventstringEvent Trigger wenn eine Ajax-Anfrage abgeschlossen wurdeformCompleted
erroreventstringEvent Trigger wenn beim abschicken des Formulares ein Fehler aufgetreten istformError

Methoden

HandlerBeschreibungParameter
beforeSendVor abschicken des RequestsjqXHR, settings
onSuccessIm Erfolgsfalldata, textStatus, jqXHR
onCompletedRequest ist abgeschlossenjqXHR, textStatus
onErrorFehlerfalljqXHR, textStatus, errorThrown
notifyBenachrichtigung des Benutzerstitle, message, CSS-Icon Klasse
handleFailedFehlerbehandlung eines Ajax RequestsjqXHR, textStatus, errorThrown
showFailSpinnerRuft die Methode $.fn.alvineSpinner('fail', this); auf 
showSuccsessSpinnerRuft die Methode $.fn.alvineSpinner('success', this); auf 

Events

HandlerBeschreibungDaten
formBeforeSendWird getriggert vor dem abgeschickten des FormularsjqXHR Objekt
formSuccessWird getriggert bei Ajax onSuccessjqXHR Objekt
formCompletedWird getriggert bei Ajax onCompletedjqXHR Objekt
formErrorWird getriggert bei Ajax onErrorjqXHR Objekt

 

CSS-Klassen

KlasseTagFunktion
alvineFormAjaxformAktiviert die Funktion des Plugins
   

 

Lokalisierung

SchlüsselStandardwert

form_request_500_headline

Server Error
form_request_500_messageDuring request to the server, there has been an error.
form_request_500_iconfa fa-exclamation-triangle
form_request_404_headlineNot Found
form_request_404_messageThe server reported that the record is not available.
form_request_404_iconfa fa-exclamation-triangle
form_request_403_headlineForbidden
form_request_403_messageYou do not have permission to call the url.
form_request_403_iconfa fa-exclamation-triangle

 

HTML-Template

Im folgenden Beispiel wird ein Formular per Ajax übertragen. Das Ziel wird aus action genommen.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Mein titel</title>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/cosmo/bootstrap.min.css">
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col-12"><h1>Formular</h1></div>
            </div>
            <div class="row">
                <div class="col-12"> 
                    <form class="form-horizontal alvineForm" action="/login" method="post" data-alvineform-validation="ajax">
                        <fieldset>
                            <!-- Form Name -->
                            <legend>Form Name</legend>
                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="textinput">Text Input</label>  
                                <div class="col-md-4">
                                    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
                                    <span class="help-block">help</span>  
                                </div>
                            </div>
                            <!-- Select Basic -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
                                <div class="col-md-4">
                                    <select id="selectbasic" name="selectbasic" class="form-control">
                                        <option value="1">Option one</option>
                                        <option value="2">Option two</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Prepended checkbox -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="prependedcheckbox">Prepended Checkbox</label>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <span class="input-group-addon">     
                                            <input type="checkbox">     
                                        </span>
                                        <input id="prependedcheckbox" name="prependedcheckbox" class="form-control" type="text" placeholder="placeholder">
                                    </div>
                                    <p class="help-block">help</p>
                                </div> 
                            </div>
                            <!-- Button -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="singlebutton">Single Button</label>
                                <div class="col-md-4"> 
                                    <button type="submit" id="singlebutton" name="singlebutton" class="btn btn-primary has-spinner">Button <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span></button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="//cdn.alvine.io/libs/alvine/formajax/jquery.alvineform-0.0.3.min.js"></script>

    </body>
</html>


Anwendungsbeispiele

Löschbutton in einer Tabelle

Beim erfolgreichen absenden des Löschbutton-Formulars die entsprechende Zeile ausblenden. 

<table>
 <tbody>
    <tr><td>1</td><td><form class="alvineFormAjax" action="/delete/xxxxxxx" methode="DELETE"><button>delete</button></td></tr>
    <tr><td>1</td><td><form class="alvineFormAjax" action="/delete/xxxxxxx" methode="DELETE"><button>delete</button></td></tr>
 </tbody>
</table>

Das passende Javascript

(function($, window, document, undefined) {
    $(function() {
        
        /** Beim Löschen die gelöschte Zeile ausblenden */
        $('.alvineFormAjax[method="DELETE"]').each(function(index, element) {
            if(!element.hasOwnProperty('alvineFormAjaxSettings')) {
                return;
            }
            element.alvineFormAjaxSettings.onSuccess = function() {
                var jqElement = $(element);
                var jqTBody = jqElement.closest('tbody');
                /** Zeile löschen */
                jqElement.closest('tr').remove();
                /** Wenn keine Zeile mehr vorhanden, dann die Zeite neu laden */
                if(jqTBody.find('tr').length===0) {
                    jqTBody.html('<tr><td colspan="100">'+$.fn.editableform.loading+'</td></tr>');
                    location.reload();
                }
            };
        });
    });
})(jQuery, window, document);

Login-Formular

Bei einem Login-Formular sollte die Fehlermeldung 403 Forbidden nicht als notify eingeblendet werden. Um dies einzustellen, erhält die Form-Klasse neben der Klasse alvineFormAjax auch die Klasse alvineFormLogin.

<form id="loginForm" method="POST" action="/login" novalidate="novalidate" class="alvineFormAjax alvineFormLogin">
(function($, window, document, undefined) {
    $(function() {
        
        /** Beim Löschen die gelöschte Zeile ausblenden */
        $('.alvineFormAjax.alvineFormLogin').each(function(index, element) {
            if(!element.hasOwnProperty('alvineFormAjaxSettings')) {
                return;
            }
            // Notify nur bei 500 und 404
            element.alvineFormAjaxSettings.notifications = ['500', '404'];
        });
    });
})(jQuery, window, document);
  • Keine Stichwörter
Schreiben Sie einen Kommentar...