/ / Stiftung bleiben 5.5 Ajax einreichen duplizieren - Zurb-Stiftung

Stiftung bleiben 5.5 Ajax einreichen duplizieren - Zurb-Stiftung

Am 5.4 funktioniert es, aber auf 5.5 gibt es zwei Anfragen

 $("#sendSms form").on("valid.fndtn.abide", function () {
$("#sendSms button").disable(true);
$.post(app.dir + "/sms", $("#sendSms form").serialize(), function (data) {
$("#sendSms button").disable(false);
},
"json" // I expect a JSON response
);
});


<div id="sendSms" class="reveal-modal" data-reveal>
<h2>Send sms</h2>

<form data-abide="ajax">
<div class="SmsMessage-field">
<label>
Body <small>required</small>
<input type="text" maxlength="300" required name="SmsMessage" id="SmsMessage" />
</label>
<small class="error"></small>
</div>
<div class="SmsPhoneNo-field">
<label>
PhoneNo <small>required</small>
<input name="SmsPhoneNo" type="text" pattern="d{9}" maxlength="9" required>
</label>
<small class="error"></small>
</div>
<button type="submit">Send</button>
</form>

<a class="close-reveal-modal">&#215;</a>
</div>

Antworten:

0 für die Antwort № 1

Sie können dieses Problem umgehen, indem Sie auf das Symbol klicken valid Ereignis statt der valid.fndtn.abide Veranstaltung.

Ich habe einen Kommentar zu der Die github-Seite des Projekts zu erklären, was die Ursache dieses Problems ist, aber hier ist die Kopie.

Ich glaube, dass dieses Problem wegen des Weges Ursache ist jQuerys Veranstaltung Namespace funktioniert. Grundsätzlich triggert ein valid Event wird jeden hörenden Zuhörer feuern valid.* Veranstaltungen.

Weil Foundation den valid Ereignis und Umzug in die valid.fndtn.abide Ereignis, die aktuelle Version des Codes löst beide während der Validierung, aber aufgrund der Art und Weise, wie jQuery "s Ereignis funktioniert, Listener für valid.fndtn.abide wird für beide feuern valid und valid.fndtn.abide Ereignis, und da beide Ereignisse ausgelöst wurden, lief der Listener zweimal, jeweils für beide Ereignisse.

Die offensichtliche Lösung besteht darin, einfach das Alte auszulösenEreignisse während der Validierung, und ich habe tatsächlich eine PR mit diesem Fix vorbereitet, aber ich bin mir nicht sicher, was die Absicht des Entwicklers ist, da ich bemerkt habe, dass sie beide Versionen der Ereignisse auch an anderen Stellen auslöst.


0 für die Antwort № 2

Wie auf der Github-Problemseite angegeben, verwenden Sie diese schnelle Lösung.

$("form").on("valid.fndtn.abide", function(e) {
// Fix for valid event firing twice
if(e.namespace != "abide.fndtn")  return;

// The rest of your form handling code here...

0 für die Antwort № 3

Ich weiß, dass du zu diesem Zeitpunkt dein Problem bereits gelöst hast, aber lass mich einfach teilen, was ich getan habe. Ich habe vor einem Jahr ein ähnliches Problem mit Ihnen und habe es versucht:

$ (Dokument) .on ("valid.fndn.abide", ".myForm ", Foundation.utils.debounce (Funktion (e) {// Handle Click   // Ajax-Funktion hier console.log ("Ich werde nicht zweimal gefeuert");  // Lösche alle Felder für die erneute Validierung nach erfolgreicher Übermittlung   }, 1000, wahr));

0 für die Antwort № 4

Ich benutze Foundation 6, aber das Prinzip sollte für 5.5 gleich sein!

Ich denke, das Problem ist, dass "gültig.fndn.abide "wird für jede validierte Eingabe im Formular ausgelöst.

Was ich getan habe, war die Funktion "Foundation.Abide.prototype.validateForm" hinzuzufügen, um einen neuen Trigger auszulösen "gültige Form.fndnn.abide "das wird ausgegeben, wenn die ganze Form validiert.

Ich beobachte dann diesen neuen Auslöser und führe meinen Ajax-Anruf aus, wenn dieser neue Auslöser ausgelöst wird:

window.onload = function() {


// Overwrite Foundation Abide validateForm to emit a trigger "validform.fndtn.abide" when the form validates
Foundation.Abide.prototype.validateForm = function($form) {
var self = this,
inputs = $form.find("input"),
inputCount = $form.find("input").length,
counter = 0;

while (counter < inputCount) {
self.validateInput($(inputs[counter]), $form);
counter++;
}

// what are all the things that can go wrong with a form?
if ($form.find(".form-error.is-visible").length || $form.find(".is-invalid-label").length) {
$form.find("[data-abide-error]").css("display", "block");
$form.trigger("invalidform.fndtn.abide", $form); // <== Added trigger
}
else {
$form.find("[data-abide-error]").css("display", "none");
$form.trigger("validform.fndtn.abide", $form); // <== Added trigger
}
}


// Listen for "validform.fndtn.abide"
$("#diventare_cliente_form").on("validform.fndtn.abide", function(e) {

var formdata =  $(this).serialize();

$.ajax({
url: "/backend/email_handler.php",
data: formdata,
dataType: "json",
cache: false,
type: "post"
})
.done(function(json) {
// do something
})
.fail(function() {
// do something
})

});

};

Hoffe das hilft jemandem weil ich ein ganzes bliesTag versuchte verschiedene Lösungen und das war das sauberste ich fand. Vielleicht verpasse ich hier etwas in Bezug auf Abide- und Ajax-Anrufe, aber es scheint seltsam, dass das Foundation-Team keine Möglichkeit bot, zu fangen, wenn die ganze Form validiert!