PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : jQuery Internet Explorer Problem


Gast
2009-12-31, 15:41:52
Hi,

Langsam kotz mich dieser scheiß kack Browser an, entschuldigung für diese Ausdrucksweise :P aber Sämtliche Sachen die ich mache Funktionieren in allen Browser tadellos außer in diesem Explorer mist nicht.

nun zum Problem, falls sich jemand mit jQuery auskennt und mir sagen kann woran hier das Problem liegt also folgender Code :


$(document).ready(function() {

var options = {
beforeSubmit: validate,
success: showResponse,
type: "post"
};

$('#newPMform').submit(function() {

$('#newPMform').ajaxForm( { beforeSubmit: validate } );
$(this).ajaxSubmit(options);
return false;
});



function sendingStatus() {
$('span.ajaxstatus').fadeIn("slow");
return false;
}


function showResponse() {

$('span.ajaxstatus').fadeOut("slow");
window.setInterval(
function() {
$('span.ajaxstatusOnSucces').fadeIn("slow");
$('span.formNotValid').fadeOut("slow");
$('span.formNotValid').addClass("invisible");

},
1190
);


}


function validate(formData, jqForm, options) {

var form = jqForm[0];
if (!form.Empfaenger.value || !form.Betreff.value || !form.Nachricht.value) {
$('span.formNotValid').fadeIn("slow");
return false;
}
$('span.formNotValid').fadeOut("slow");
$('span.formNotValid').addClass("invisible");
$('span.ajaxstatus').fadeIn("slow");
return true;
}




});



Soll die Form per Ajax an den Server gesendet werden soweit so gut, funktioniert alles nur das bei dem Internet Explorer das Ding 2 mal abgesendet wird warum auch immer.

Das ganze basiert auf diesem Plugin http://jquery.malsup.com/form/#getting-started. Habe mir eigentlich die Examples und die Dokumentation durchgelesen nur gehts bei IE8 trotzdem nicht richtig.

Auch der FadeIN und FadeOut funktioniert nicht sondern die Elemente werden einfach ein oder ausgeblendet ohne jeglichen Fade Effekt...dieses Phänomen tritt ebenfalls nur beim IE auf.

darph
2009-12-31, 16:45:24
Auch der FadeIN und FadeOut funktioniert nicht sondern die Elemente werden einfach ein oder ausgeblendet ohne jeglichen Fade Effekt...dieses Phänomen tritt ebenfalls nur beim IE auf.
Wie hast du sie denn vorher unsichtbar gesetzt?

Manche Browser (der FF kann das auch ganz gut) machen das nicht richtig, wenn der Startzustand nicht vorher explizit gesetzt wurde.

Gast
2009-12-31, 17:13:58
Wie hast du sie denn vorher unsichtbar gesetzt?

Manche Browser (der FF kann das auch ganz gut) machen das nicht richtig, wenn der Startzustand nicht vorher explizit gesetzt wurde.

das hab ich per

display:none;

gemacht, also wie gesagt Chrome, Opera, FF alles kein Problem :(

DanMan
2009-12-31, 19:38:32
event.preventDefault() ???

Gast
2009-12-31, 20:11:28
event.preventDefault() ???

Wenn ich das einbau bekomm ich ein PHP bzw. MySql error(
Fatal error: Call to a member function prepare() on a non-object in \htdocs\includes\pm_new.php on line 50), jedoch wird die Message trotzdem gesendet im Internet Explorer und tatsächlich auch nur 1 mal, jedoch im Firefox und allen anderen gar nicht mehr wie kann ich das interpretieren?
(Was die Fehlermeldung bedeutet is mir klar und logisch wäre das keine Message gesendet wird weil die Variabel ja nicht definiert ist...hmm komisch^^trotzdem danke und schönes neues Jahr bin erstmal raus jetz : ))

Ich hab auch schon überlegt nach dem Senden ein cookie zu setzten das 1 Sekunde hält um 2maliges absenden zu unterbinden, aber irgendwie gefällt mir dir Lösung auch nicht so richtig.

DanMan
2010-01-01, 14:32:20
Nun, ich vermute einfach mal, dass das Formular im IE 2x abgeschickt wird, weil es einmal per JS, und einmal stinknormal über die Schaltfläche verschickt wird. Das wollte ich mit dem JS Befehl verhindern. Wenn du dann plötzlich PHP Fehler kriegst, dann hast du irgendeinen Syntaxfehler.

darph
2010-01-01, 15:07:21
Das wollte ich mit dem JS Befehl verhindern.
Im Prinzip hat er das ja mit return: false; auch gemacht. Das ist schon korrekt so.
This default action can be prevented by returning false from one of the functions bound to the submit event (http://docs.jquery.com/Events/submit).

Eventuell hilft es, erstmal alle Events zu löschen (http://docs.jquery.com/Events/unbind):

$("<selector>").unbind("submit").submit(function() {/*...*/ return: false;});

darph
2010-01-01, 15:23:38
Edith, die Sau, weiß glaube ich, wo das Problem liegt.

$('#newPMform').submit(function() {
$('#newPMform').ajaxForm({
beforeSubmit: validate
});
$(this).ajaxSubmit(options);
return false;
});
Bist du sicher, daß du das Plugin dem Form erst zum Event zuordnen sollst? Es ist völlig klar, daß es zwei mal submittet wird!

Paß uff: Zum einen schickst du das Formular manuell ab: $(this).ajaxSubmit(options); Kurz davor aber bindest du an das Submit-Event ein neues Event, das selbständig den Submit abfängt und das Formular absendet: $('#newPMform').ajaxForm();

Das manuelle Absenden sollte gar nicht notwendig sein. Das Binding ist an der falschen Stelle.

$(document).ready(function() {
var options = {
beforeSubmit: validate,
success: showResponse,
type: "post"
};


// ENTWEDER du machst es so:
$('#newPMform').submit(function() {
$(this).ajaxSubmit(options);
return false;
});

// ODER du machst es so:
$('#newPMform').ajaxForm(options);

//aber nicht beides gleichzeitig. ;)
}


Beachte hierbei, wie das ajaxForm (http://jquery.malsup.com/form/#ajaxForm)-Beispiel nur Binding macht und das Submit-Event vom Plugin verwalten läßt:

// prepare the form when the DOM is ready
$(document).ready(function() {
var options = { /* … */ };

// bind form USING 'ajaxForm'
$('#myForm1').ajaxForm(options);
});

Während das ajaxSubmit (http://jquery.malsup.com/form/#ajaxSubmit)-Beispiel das Plugin nicht an das Formular bindet, dafür aber das Submit-Event manuell abfängt und dann entsprechend das Formular manuell abschickt:

// prepare the form when the DOM is ready
$(document).ready(function() {
var options = { /* … */ };

// bind to the form's SUBMIT event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);

// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});

Das sind zwei völlig unterschiedliche Herangehensweisen, die du nicht zeitgleich verwenden solltest. Du hast die beiden Beispiele vermischt.

Gast
2010-01-01, 17:07:20
Edith, die Sau, weiß glaube ich, wo das Problem liegt.

$('#newPMform').submit(function() {
$('#newPMform').ajaxForm({
beforeSubmit: validate
});
$(this).ajaxSubmit(options);
return false;
});
Bist du sicher, daß du das Plugin dem Form erst zum Event zuordnen sollst? Es ist völlig klar, daß es zwei mal submittet wird!

Paß uff: Zum einen schickst du das Formular manuell ab: $(this).ajaxSubmit(options); Kurz davor aber bindest du an das Submit-Event ein neues Event, das selbständig den Submit abfängt und das Formular absendet: $('#newPMform').ajaxForm();

Das manuelle Absenden sollte gar nicht notwendig sein. Das Binding ist an der falschen Stelle.

$(document).ready(function() {
var options = {
beforeSubmit: validate,
success: showResponse,
type: "post"
};


// ENTWEDER du machst es so:
$('#newPMform').submit(function() {
$(this).ajaxSubmit(options);
return false;
});

// ODER du machst es so:
$('#newPMform').ajaxForm(options);

//aber nicht beides gleichzeitig. ;)
}


Beachte hierbei, wie das ajaxForm (http://jquery.malsup.com/form/#ajaxForm)-Beispiel nur Binding macht und das Submit-Event vom Plugin verwalten läßt:

// prepare the form when the DOM is ready
$(document).ready(function() {
var options = { /* … */ };

// bind form USING 'ajaxForm'
$('#myForm1').ajaxForm(options);
});

Während das ajaxSubmit (http://jquery.malsup.com/form/#ajaxSubmit)-Beispiel das Plugin nicht an das Formular bindet, dafür aber das Submit-Event manuell abfängt und dann entsprechend das Formular manuell abschickt:

// prepare the form when the DOM is ready
$(document).ready(function() {
var options = { /* … */ };

// bind to the form's SUBMIT event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);

// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});

Das sind zwei völlig unterschiedliche Herangehensweisen, die du nicht zeitgleich verwenden solltest. Du hast die beiden Beispiele vermischt.

Vielen dank, das du dir die Zeit genommen hast nun funktioniert es einwandfrei ! =)