Yii2 Pjax und ActiveForm beforeSubmit funktioniert nicht nach reload?

Erstelle ich eine Ladeanzeige auf mein submit-button und das anbringen der "start" - Verfahren, um die beforeSubmit Ereignis mit der registerJs Funktion.

Funktioniert es das erste mal richtig, aber nach dem Pjax-container geladen wird, das Ereignis wird nicht ausgelöst, wenn das Formular abgeschickt wird wieder.

Ich lege die gesamte view-Datei in dem Pjax-container, so dass die flash-Nachrichten werden korrekt angezeigt.

Hier ist die main.php layout-Datei snippet:

<?php Pjax::begin([
'id' => 'pjax-container',
'enablePushState' => false,
]); ?>

<?= Alert::widget(); ?>

<?= $content; ?>

<?php Pjax::end(); ?>

Und hier ist die registerJs Funktion, die sich in main.php im Abschnitt:

<?php
$js = <<< 'SCRIPT'
$('#form').on('beforeSubmit', function(){
alert('Submitted...');
//$("#spinner").fadeIn();
});
SCRIPT;
$this->registerJs($js);
?>

Und hier ist die activeForm:

<?php $form = ActiveForm::begin(['id' => 'form', 'options' => ['data-pjax' => true]]); ?>

<?= $form->field($model, 'name')->textInput(['type' => 'text']) ?>

<?= $form->field($model, 'email')->textInput(['type' => 'email']) ?>

<?= $form->field($model, 'subject')->textInput(['type' => 'text']) ?>

<?php
echo $form->field($model, 'message')->textArea(['rows' => 6]);

echo $form->field($model, 'verify_code')->widget(Captcha::className(), [
        'captchaAction' => 'site/captcha',
        'template' => '<div class="row"><div class="col-lg-4">{image}</div><div class="col-lg-6">{input}</div></div>',
]);
?>

<button class="btn btn-success">
<span id="spinner" style="display: none; float:left; margin-right: 26px;">
<?php
echo Spinner::widget([
'pluginOptions' => [
    'top' => '50%',
    'left' => '10px',
    'lines' => 11,
    'length' => 5,
    'width' => 3,
    'corners' => 1,
    'trail' => 100,
    'speed' => 1.25,
    'radius' => 4,
],
]);
?>
</span>
<?php echo $model->isNewRecord ? 'Send Message' : 'Update'; ?>
</button>

<?php ActiveForm::end(); ?>

Ich bin mit dem Kartik Spinner (Details und Demo)

Irgendwelche Ideen auf, warum die beforeSubmit-Ereignis wird nicht ausgelöst, nachdem Pjax laden der Daten-container nach einem erfolgreichen submit?

Dank.

Die render-Methode verwenden Sie in Ihren controller? nur render()? oder renderAjax()?
Ich war mit der render (), aber habe einen schnellen test mit renderAjax() und das schien zu funktionieren. Hatte ich, um die registerJs () - Funktion, um die aktuelle Datei anzeigen wenn. Und nun ist die flash-Nachrichten zu zeigen. Irgendwelche Ideen?
Sorry, das meinte ich zu sagen, dass die flash-Nachrichten nicht zeigen, bis jetzt auf Ajax Last.
Also, es war ein Problem mit der render-Funktion. Ich verwende jetzt renderAjax() und es funktioniert Prima. Ich habe, um das verschieben der Pjax und Alarm::widget, um die view-Datei als renderAjax Funktion enthalten nicht-layout und flash-Nachrichten nicht zeigen.

InformationsquelleAutor Mike Pearson | 2015-04-08

5

Dieses problem tritt auf, aus mehreren Gründen.

Erstens, Beliebigen code innerhalb $(document).ready(); geladen und auf der ajax-Seite aufgerufen (Seite enthaltenen) wird nicht ausgeführt, sobald es geladen wird.

Zweitens, alle Verweise auf externe Scripte (<script src>) sind nicht garantiert, um zu laden, bevor Sie inline-Skripte. Bei Yii2 diese inline-Skripte registriert mit registerJs()

Immer Pjax zu spielen schön mit komplexen Schriftzeichen der abhängigen Seiten zu laden ist nicht trivial.

Ein paar Dinge, um Ihre Probleme lösen:

1) Inline-scripts geladen mit registerJs() haben und mit einer position der POS_READY (Standard?) wird innerhalb eines $(document).ready() wenn die view gerendert wird, die über render().

Daher ist es wichtig zu Rendern über renderAjax(). Dadurch wird sichergestellt, dass die inline-Skripts ausgeführt wird.

Manchmal (meisten mal), müssen Sie die Nutzung render() wenn statisch geladen und renderAjax() wenn pjax lädt eine Seite. In Ihrem Beispiel ist dies erforderlich, um den Pjax-widget in das layout. Sie können den folgenden code verwenden für diese Situationen:
```
if(Yii::$app->request->getHeaders()->has('X-PJAX'))
{
    return $this->renderAjax('myview');
}
else
{
    return $this->render('myview');
}
```
2) Beim schreiben externe Skripte, die Sie wissen, wird die Last im Rahmen einer pjax nennen. Verwendung:
```
$(document).on('ready pjax:success', function(){
    //...
});
```
Lädt das Skript korrekt. Aber Bedenken Sie, dass es neu laden/binden Sie das Skript jedes mal, wenn ein Pjax-Aufruf erfolgreich ist. Dass möglicherweise nicht erwünscht leider.

Beachten Sie auch, dass die pjax:success Ereignis nicht unbedingt ausgelöst werden, nachdem die externe Skripte aus dem geschlossenen Seite geladen werden. Siehe 3)

3) Zu lösen-Skript, um die Probleme, die Sie benötigen, um entfernen Sie die folgende Zeile aus der pjax.js Skript:
```
obj.scripts = findAll(obj.contents, 'script[src]').remove() 
```
Wird dies jedoch schaffen, Probleme mit Browsern zu deaktivieren eval() (daher, warum die Linie existiert in den ersten Platz)

Pjax wird evtl. haben diese sortiert. Behalten Sie den überblick über den Fortschritt hier

Wenn etwas unklar ist lass es mich wissen, ich werde es anders formulieren.

UPDATE: Yii 2.0.7 hat änderungen eingeführt. Eine davon ist die Aktualisierung der bower\yii2-pjaxzu 2.0.6. Dies macht Punkt 3) nicht mehr notwendig und macht Punkt 2) weniger wichtig, obwohl es immer noch eine gute Sache zu wissen,.
- Danke. Ich war in der Lage, um es arbeiten mithilfe der renderAjax und ich habe eine "wenn" - Anweisung, wertet Yii::$app->Anfrage->isAjax verwendet die render-oder renderAjax beziehungsweise. Ich werde zu ändern es entsprechend Ihren Vorschlag prüfen für X-PJAX.
- Wissen Sie, wie Sie eine Umleitung durchzuführen, die in den controller, wenn es war ein ajax-Aufruf von Pjax. Seit der Umstellung auf Pjax, verloren ich habe die redirect-Funktionalität.
- Können Sie etwas konkreter über das, was nicht funktioniert? Ist die Umleitung nicht funktioniert oder pjax nicht geladen werden kann der umgeleitete Seite über Ajax?
- Pjax, ist das laden der Seite korrekt, aber die Umleitung in der controller nicht funktioniert. Ich habe gelesen, ausgiebig zu versuchen, zu verstehen, was Los ist, und die Yii Dokumentation klar, dass wenn es ein Ajax/Pjax rufen Sie dann eine X-Redirect-header Hinzugefügt wird und normale Umleitungen wird nicht richtig funktionieren. Es sagt auch, dass, wenn die yii\web\YiiAsset bundle geladen wird, lädt es Yii.js die Funktion, um die redirect-Funktion wie erwartet. Hier ist die Dokumentation link.
- Und hier ist die Umleitung code, ich war mit in der Steuerung return $this->redirect(Yii::getAlias('@web') . '/secure/dashboard/');
- Ah ich sehe. Möchten Sie vielleicht zu prüfen, öffnen eine andere Frage für diese. Aber zu sehen, wie diese Umleitung wird in den Geltungsbereich der Anwendung, wäre es möglich nur das zu tun, Yii::$app->runAction('secure/dashboard')?
- Ich war in der Lage, um es herauszufinden, und erzielte die Lösung oben.
- Sie sind nicht empfohlen, verbinden Sie die JS-Skripte in Pjax?
- Ich bin mir nicht sicher, ob ich verstehe, was du meinst? Beziehen Sie sich auf Punkt 3?
InformationsquelleAutor D.Mill

So. Ich habe eine Lösung, aber es widerspricht der Dokumentation...

Wenn man sich an die eigentliche redirect-Funktion (Quelle):

public function redirect($url, $statusCode = 302, $checkAjax = true) 
743     { 
744         if (is_array($url) && isset($url[0])) { 
745             //ensure the route is absolute 
746             $url[0] = '/' . ltrim($url[0], '/'); 
747         } 
748         $url = Url::to($url); 
749         if (strpos($url, '/') === 0 && strpos($url, '//') !== 0) { 
750             $url = Yii::$app->getRequest()->getHostInfo() . $url; 
751         } 
752  
753         if ($checkAjax) { 
754             if (Yii::$app->getRequest()->getIsPjax()) { 
755                 $this->getHeaders()->set('X-Pjax-Url', $url); 
756             } elseif (Yii::$app->getRequest()->getIsAjax()) { 
757                 $this->getHeaders()->set('X-Redirect', $url); 
758             } else { 
759                 $this->getHeaders()->set('Location', $url); 
760             } 
761         } else { 
762             $this->getHeaders()->set('Location', $url); 
763         } 
764  
765         $this->setStatusCode($statusCode); 
766  
767         return $this; 
768     }

Können Sie sehen, dass es Kontrollen für Pjax vor Ajax und hat zwei verschiedene überschriften als solche. die X-Redirect-header, der erwähnt wird, alle über das Internet und mehreren Standorten, funktioniert NICHT für eine Pjax nennen. Sie müssen prüfen, für X-Pjax-Url für ein Pjax nennen.

Melde ich meine eigenen javascript-Funktion zur Verarbeitung der redirect wie unten:

$js = <<< 'SCRIPT'
$(document).on('pjax:complete', function (event, xhr, textStatus, options) {
//$(document).ajaxComplete(function (event, xhr, settings) {
var url = xhr.getResponseHeader('X-Pjax-Url');
if (url) {
    window.location = url;
}
});
SCRIPT;
$this->registerJs($js);

Und für einige Grund, dies auf seine eigene war nicht genug. Die source-Funktion, standardmäßig läuft der checkAjax code, aber bis ich explizit aufgerufen wird es aus meiner redirect-code, es würde nicht funktionieren.

So, hier ist was ich in meinem controller:

Yii::$app->response->redirect(Yii::getAlias('@web') . '/secure/dashboard/', true)->send();
return;

Diese diskutiert wurde viele, viele Male und ich hoffe, das hilft anderen.

InformationsquelleAutor Mike Pearson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.