Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

Wszystko działa pięknie do momentu kiedy formularz jest zatwierdzany bezpośrednio w funkcji przypiętej do przycisku submit:

$("#submit").click(function(){
var data = 'var1=' + field1.val() +'&var2=' + field2.val();

$.ajax({
type: "POST",
url: "file.php",
data: data,
succes: function(){
$('#field1').val('');
$('#field2').val('');
$('div.class1').fadeIn(400);
setTimeout(function(){ $("div.class1").fadeOut(400) }, 4000);
}
});
return false;
});

Natomiast problem pojawia się gdy chcę utworzyć predefiniowaną funkcję wywoływaną przy kliknięciu guzika submit. Funkcja jest mi potrzebna ponieważ parametr z którym została uruchomiona chcę przekazać do pliku file.php.

Funkcję wołam jak poniżej:

$("#submit").click(function(){myfunc('param') });

funkcja:

function myfunc(param){
var data = 'var1=' + field1.val() +'&var2=' + field2.val() + ‘&var3=’ param;
$.ajax({
type: "POST",
url: "file.php",
data: data,
succes: function(){
$('#field1').val('');
$('#field2').val('');
$('div.class1').fadeIn(400);
setTimeout(function(){ $("div.class1").fadeOut(400) }, 4000);
}
});
return false;
});

Przy takim wywołaniu funkcji strona zostaje przeładowana. Jak w takim razie wywołać funkcję, żeby strona nie była przeładowywana ?Dawid Pierzchalski edytował(a) ten post dnia 28.03.12 o godzinie 09:15

konto usunięte

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

Nie lepiej dać return false; bezpośrednio przy evencie click zamiast w funkcji?
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

A czy nie powinieneś tak czasem przechwycić zdarzenia wysłania formularza... ?

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

return false przy evencie sprawia, że funkcja w ogóle się nie wykonuje.

Wywołanie funkcji w $(#form).submit() ma dokładnie taki sam efekt.

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

Dawid Pierzchalski:
Funkcję wołam jak poniżej:

$("#submit").click(function(){myfunc('param') });

funkcja:

function myfunc(param){
var data = 'var1=' + field1.val() +'&var2=' + field2.val() + ‘&var3=’ param;
$.ajax({
type: "POST",
url: "file.php",
data: data,
succes: function(){
$('#field1').val('');
$('#field2').val('');
$('div.class1').fadeIn(400);
setTimeout(function(){ $("div.class1").fadeOut(400) }, 4000);
}
});
return false;
});

1. Przy var3 z tego co widzę zamykasz innym "ciapkiem" niż otwierasz stringa.
2. Skąd są pobierane zmienne field1 i field2 podczas budowania stringa data? wcześniej nie widać żadnego przypisania wartości do tych zmiennych.
Jeśli któryś z powyższych błędów występuje lub jakikolwiek inny związany z js to w FireBugu w konsoli powinny zostać te problemy odnotowane.

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

Problemem nie jest funkcja tylko jej wywołanie. Dane zapisują się w bazie danych więc funkcja jest 100% ok.

1.Jeśli są jakieś błędy składniowe na gl to są one spowodowane edycją po skopiowaniu funkcji z pliku html.
2.Wartości do zmiennych są pobierane z pól w formularzu. Tak samo można by również pobrać wartość ostatniego parametru ( z jakiegoś ukrytego pola ), ale jest to pójście na skróty i nie rozwiązuje problemu ;)

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

A może coś takiego będzie działać prawidłowo

$("#submit").click(function(e) {
e.preventDefault();
# TUTAJ KOD DO WYKONANIA #
});

lub, jeśli jest to formularz:

$("#form").submit(function(e) {
e.preventDefault();
# TUTAJ KOD DO WYKONANIA #
});

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

Na linkach to rozwiązanie z wyłączeniem domyślnego zachowania działa, ale na formularzu powoduje, że przestaje się on wysyłać ;)

Edit:
W formularzu przycisk submit był typu image. Sprawę częściowo rozwiązuje albo zmiana zdarzenia na click dla przycisku typu image, albo zmiana typu przycisku na submit i obsłużenie zdarzenia submit dla formularza + wyłączenia domyślnego zachowania.

Dane zostają przekazane do pliku php, ale funkcja succes: function() się nie wykonuje...

Edit:
Zmieniłem opcję succes na complete i teraz działa prawidłowo. Do pełni szczęścia brakuje jakiegoś response'a z pliku php, że query wykonało się prawidłowo.

Próbowałem:

$rezultat = mysql_query($sql) or die(mysql_error('Error message'));
return $rezultat;

query się wykonuje, bo zapisy się dodają, ale chyba nie na to czeka ajax :-)

Dzięki za podpowiedzi.Dawid Pierzchalski edytował(a) ten post dnia 28.03.12 o godzinie 14:16

Temat: Wołanie predefiniowanej funkcji w Submit Form bez...

Jeśli chodzi o response od pliku php to proponuje w nim spreparować jakiś array lub string (w zależności co ma być zwrócone) a następnie


$return = #TUTAJ JAKIŚ RETURN#;
echo json_encode($return);
exit();


przy wywołaniu ajaxowym podać parametr
dataType: 'json'

i w metodzie dostęp do danych zwróconych:

complete: function(data){
// gdzie w data jest wlasnie return z PHPa
}



Wyślij zaproszenie do