POST bez przeładowania strony Opcje

[TwojPan]

Czesc,

Nie znam zupepnie JS czy AJAX. Szukam najprostszego rozwiazania tj. podczas wcisniecia SUBMIT aby strona sie nie przeladowywala tylko nie wiem jakis ruchomy gif lub napis 'dodawanie tresci' i na koncu info ze zostalo dodane. Nic wiecej. Czy ktos moglby mi pomoc z tym i ma gotowe rozwiazanie ? Tresc z formulara beda zapisywane w osobnym pliku .php

Formularz zawiera pola checkbox, radio, text, textarea. Nie potrzebuje zadnej walidacji oniewaz nie musi zostac nic wybrane - to tylko opcja.
Szukam w necie od rana ale tylko jakies bardzo skomplikowane rzeczy po 200 lini kodu i zbyteczne wlasnie walidacje etc..

szukam czego naprawde prostego.

Ten post edytował TwojPan 14.06.2014, 10:54:21

[johny_s]

http://malsup.com/jquery/form/

[rad11]

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
                $('#submit').click(function() {
                    $.ajax({
                        type: "POST",
                        url: "sciezka do pliku",
                        data: $("#form").serialize(),
                        beforeSend: function() {
                            $('.loader').html('<img src="sciezka do gifu" />').show();
                        },
                        dataType: "html",
                        success: function(result) {
                            $("#error_message").html(result);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
 
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                            alert(ajaxOptions);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
                        }
                    });
                    return false;
 
 
                });
 
            });
[PHP] pobierz, plaintext 

Ten post edytował rad11 14.06.2014, 11:23:43

[TwojPan]

http://malsup.com/jquery/form/

Dziekuje , sprawdze.

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
                $('#submit').click(function() {
                    $.ajax({
                        type: "POST",
                        url: "sciezka do pliku",
                        data: $("#form").serialize(),
                        beforeSend: function() {
                            $('.loader').html('<img src="sciezka do gifu" />').show();
                        },
                        dataType: "html",
                        success: function(result) {
                            $("#error_message").html(result);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
 
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                            alert(ajaxOptions);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
                        }
                    });
                    return false;
 
 
                });
 
            });
[PHP] pobierz, plaintext 

czy #submit to name=submit w <input type=submit> (IMG:style_emoticons/default/questionmark.gif) ? cy submit jako pole submit??

[Turson]

submit to id elementu

[rad11]

Tak jak Turson napisał.

[TwojPan]

Tak jak Turson napisał.

mozesz mi podac prykladowy formularz (IMG:style_emoticons/default/questionmark.gif)

[Turson]

Formularz powinieneś wiedzieć jaki zrobić, a submit to

[HTML] pobierz, plaintext 
<input type="submit" id="submit">
[HTML] pobierz, plaintext 

Ten post edytował Turson 14.06.2014, 16:50:15

[TwojPan]

Formularz powinieneś wiedzieć jaki zrobić, a submit to

[HTML] pobierz, plaintext 
<input type="submit" id="submit">
[HTML] pobierz, plaintext 

Dzieki bardzo. Jeszcze nie mialem czasu tego sprawdzic ale zrobie to dzisiaj i dam znac. Jeszcze raz bardzo dziekuje.

Jeszcze mam pytanie male. Moze wydac sie glupie ale czy to "html" w tresci moze byc skoro bede mial pliki *.php ?

Ten post edytował TwojPan 16.06.2014, 06:46:42

[rad11]

To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie (IMG:style_emoticons/default/haha.gif)

Ten post edytował rad11 16.06.2014, 07:08:01

[TwojPan]

To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie (IMG:style_emoticons/default/haha.gif)

Sory nie zauwazylem. Zaraz Ci dam tego plusa (IMG:style_emoticons/default/biggrin.gif)

Niestety cos nie dziala:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<form ACTION="save.php" method=post>
<input TYPE="text" name="ble">
<input TYPE="submit" id="submit" value=poslij>
</FORM>
[HTML] pobierz, plaintext 

plik.js

[HTML] pobierz, plaintext 
$(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<img src="loader.gif" />').show();
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
 
                            $('.loader').html('<img src="loader.gif" />').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
[HTML] pobierz, plaintext 

pik: save.php

[PHP] pobierz, plaintext 
<?
$foo = fopen($_POST['ble'], 'w');
?>
[PHP] pobierz, plaintext 

Nic sie nie wykonuje.

Ten post edytował TwojPan 16.06.2014, 07:42:07

[Turson]

Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości

[TwojPan]

Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości

Nie otwieram lecz probuje ustawic. 'w' ustawia plik. Nie ma znaczenia czy cos zapisze do srodka czy nie i czy to wyswietle. Powinien pik sie ustawic o nazwie z pola input.



Ten post edytował TwojPan 16.06.2014, 07:32:00

[rad11]

[PHP] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	    <script type="text/javascript">
	    $(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<img src="ajax-loader.gif" />').show();
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
 
	</script>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<form action="" method="post" id="form">
	    <input type="text" name="input">
	    <input type="submit" value="poslij"  id="submit" >
	</form>
 
<div class="loader"></div>
[PHP] pobierz, plaintext 

Ten post edytował rad11 16.06.2014, 09:32:04

[TwojPan]

[PHP] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	    <script type="text/javascript">
	    $(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<img src="ajax-loader.gif" />').show();
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
 
	</script>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<form action="" method="post" id="form">
	    <input type="text" name="input">
	    <input type="submit" value="poslij"  id="submit" >
	</form>
 
<div class="loader"></div>
[PHP] pobierz, plaintext 

Ok, teraz dziala (IMG:style_emoticons/default/smile.gif) dane z formularza przekazywane sa do pliku save.php.
Mialbym jeszcze jedna prosbe jesli chodzi o ten przyklad jesli mozna.
Czy bylbys w stanie dorobic jeszcze jedna rzecz?(IMG:style_emoticons/default/questionmark.gif) mianowicie jakies info / cos jak ten div class=loader / ze po wykonaniu wyswietla sie info ze dane zostaly przeslane.
Ja z tym sobie nie poradze.

[Turson]

Kod

success: function(result){
alert('ok');
}

[TwojPan]

Kod

success: function(result){
alert('ok');
}

Fajnie, tylko gdzie to wsadzic (IMG:style_emoticons/default/biggrin.gif)

Czy takie rozwiazanie jest poprawne ? / drugalinijka tylko dodana /

[PHP] pobierz, plaintext 
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
		alert('AJAX request made!');
[PHP] pobierz, plaintext 

[Turson]

[JAVASCRIPT] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	    <script type="text/javascript">
	    $(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<div class="loader"><img src="ajax-loader.gif" /></div>');
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
                            alert('jakis tekst');
                            $('div.loader').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
 
	</script>
[JAVASCRIPT] pobierz, plaintext 

[rad11]

mogles stworzyc poprostu pod formularzem:

[PHP] pobierz, plaintext 
<div id='error_message'></div>
[PHP] pobierz, plaintext 

i np w skrypcie php zrobic prosty warunek ze jezeli foo sie wykona to dac echo ze sie udalo.

Po to miedzy innymi jest linijka

[PHP] pobierz, plaintext 
 $("#error_message").html(result);
[PHP] pobierz, plaintext 

Ten post edytował rad11 16.06.2014, 12:33:02

[TwojPan]

Panowie slicznie dziekuje choc ten drugi przyklad nie za bardzo dziala. Tzn dzialac dziala ale nie wyswietla sie ten loader /ten caly ostatni przyklad/ Mniejsza z tym. Panowie, jak zrobic <div> ktory zaladuje sie z linkiem 'zamknij' zamiast alert ?

Cos w stylu:

[PHP] pobierz, plaintext 
$('.loader').html('<div style="width:200px; height:200px; top:50%; left: 50%; background-color: grey; opacity: 0.8"><div style="vertical-align: middle; text-align: center"><img src="ajax-loader.gif" /></div></div>').show();
[PHP] pobierz, plaintext 

[Turson]

http://jqueryui.com/dialog/

[TwojPan]

panowie, nie bijcie:)

Probowalem gdzies te funkcje DIALOG

[PHP] pobierz, plaintext 
 $(function() {
 
    $( "#dialog" ).dialog();
 
  });
[PHP] pobierz, plaintext 

umiescic w kodzie ale nie wiem dlaczego po wywolaniu pliku tekst z diva pojawia sie pod formularzem / znika po kliknieciu i pojawia sie okno o ktore mi chodzi / Jak / gdzie to wsadzic w te funkcje (IMG:style_emoticons/default/questionmark.gif) Teraz mam tak:

plik 'ajax.js'

[PHP] pobierz, plaintext 
 $(document).ready(function() {
 
                $('#submit').click(function() {
 
 
                    $.ajax({
 
 
                        type: "POST",
 
 
                        url: "save.php",
 
 
 
                        data: $("#form").serialize(),
 
 
 
                        beforeSend: function() {
 
 
 
                            $('.loader').html('<div class="loader"><img src="ajax-loader.gif" /></div>');
 
 
   $(function() {
    $( "#dialog" ).dialog();
  });
 
                        },
 
 
 
                        dataType: "html",
 
 
 
                        success: function(result) {
 
 
 
                            $("#error_message").html(result);
 
                            alert('jakis tekst');
 
                            $('div.loader').hide();
 
 
 
                        },
 
 
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
 
 
                            alert(xhr.status);
 
 
 
                            alert(thrownError);
 
 
 
                            alert(ajaxOptions);
 
 
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
 
                        }
 
 
 
                    });
 
 
 
                    return false;
 
 
 
 
                });
 
 
            });
[PHP] pobierz, plaintext 

plik z formularzem

[PHP] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ajax.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
 
 
	<form action="save.php" method="post" id="form">
 
	    <input type="text" name="input">
		<input TYPE="checkbox" name="checkb" value="aaa">
 
	    <input type="submit" value="poslij"  id="submit" >
 
	</form>
 
 
 
<div class="loader"></div>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
[PHP] pobierz, plaintext 

Na samym dole jest ten div ktory sie wyswietla na samym poczatku. Znika po kliknieciu.Co zrobic aby sie nie wyswietlal pod formuarzem lecz tylko po przeslaniu formularza w tym okienku

Ten post edytował TwojPan 16.06.2014, 18:15:13

[rad11]

To umiesc go w success jak ma sie wyswietlic po wykonaniu skryptu.

[TwojPan]

Wiesz, ja jestem poczatkujacym w te klocki. Moglbys pomoc ?
Robie tak ale to wydaje mi sie zupelnie bez sensu. no i oczywiscie nie dziala.

[PHP] pobierz, plaintext 
   success: function(result) {
 
 $("#error_message").html(result);
 
 $(function() {
 
 $("#dialog").html('<div id="dialog" title="informacja w tytule"><p>Dane zostały prawidłowo wprowadzone.</p></div>').dialog();
 
}); 
 
$('div.loader').hide();
[PHP] pobierz, plaintext 

Ten post edytował TwojPan 16.06.2014, 19:53:27

[Turson]

Musisz mieć w dokumencie gdzieś załadowanego tego diva, bo ładujesz do <div id="dialog"></div> to a pewnie nawet tego nie masz.
Stwórz pusty taki div, odwołaj się po prostu
$('#dialog').text('Dane zostały prawidłowo wprowadzone.').dialog();
i kontroluj konsolę js

[TwojPan]

Musisz mieć w dokumencie gdzieś załadowanego tego diva, bo ładujesz do <div id="dialog"></div> to a pewnie nawet tego nie masz.
Stwórz pusty taki div, odwołaj się po prostu
$('#dialog').text('Dane zostały prawidłowo wprowadzone.').dialog();
i kontroluj konsolę js

No, wlasnie myslalem zeby wywolac to w funkcji czyli tekst a wsadzic to w div ale nie wiedzialem ze jest takie cos jak TEKST() i probowalem html (IMG:style_emoticons/default/biggrin.gif)

Male pytanko. Znasz jakis dobry kurs ajax taki dla poczatkujacych opisujacy skladnie / funkcje ?

Dziekuje za pomoc

[Turson]

html() czy text() jedno i drugie by zadziałało.
W ajaxie nie trzeba znać nic więcej niż type, data, url, success, beforeSend i error
http://api.jquery.com/jQuery.ajax/

[TwojPan]

Panowie jest problem. Mam plik inex.php i tam na instrukcji switch(); w jednym z wywolan jest formularz ten sam co podany byl w przykladach i ten sam przyklad skryptu ajax. Problem w tym ze jak dam w url link do tego pliku: "index.php?id=ok" to nie wykonuje sie error lecz succes z tym ze jednoczesnie nic sie nie wykonuje. Instrukcja switch() nie zawiera takiego id wiec powinno zwracac error Troche to bez sensu bo jest info z succes ale nie wykonuje sie. Jesli zmienie url na inny plik lub id wystepuje juz w instrukcji switch() to juz jest dobrze. Co jest nie tak (IMG:style_emoticons/default/questionmark.gif)

[Turson]

Ajax nie sprawdza kodu PHP czy masz tam w switch to id, tylko czy link jest dobry itd, a że jest dobrym to zwraca success

[TwojPan]

Ajax nie sprawdza kodu PHP czy masz tam w switch to id, tylko czy link jest dobry itd, a że jest dobrym to zwraca success

Nie wiem czy sie rozumiemy.

w pliku ajax.js nalezy podac url i jesli podam url pliku gdzie znajduje sie formuar tylko wywolam go parametrem =id=costam i ten id istnieje to wykona sie ale jesli zmienie id z id=costam na id=costam2 /teraz juz nie ma takiego/ to nie wykona sie error lecz succes przy czym nic sie nie wykona /kod php/ bo nie ma takiego id tyle ze nie wiadomo dlaczego nie wykonuje sie error.

Dziwne jest to ze kiedy w url w pliku ajax.js podam adres innego pliku z TAKA sama budowa oparta o switch() to juz jest ok. Te same id i ten sam kod lecz musze to wsadzic w inny plik. Widac ze problemem jest odwolanie sie do tego samego pliku gdzie jest formularz no bo innego wyjasnienia nie ma.

Ten post edytował TwojPan 22.06.2014, 19:43:00

[Turson]

Jeżeli nie masz ustawionych reguł dla linków, to jest bez różnicy czy adres to ?id=123 czy ?id=dupa, bo ajax zawsze w tym przypadku zwróci sukces, bo taki link jest poprawny. Ze swojej strony w PHP możesz ustalić, że jeżeli parametr jest inny niż oczekujesz, ustawiasz nagłówki na błąd np. 404 i ajax już nie przejdzie

[TwojPan]

Jeżeli nie masz ustawionych reguł dla linków, to jest bez różnicy czy adres to ?id=123 czy ?id=dupa, bo ajax zawsze w tym przypadku zwróci sukces, bo taki link jest poprawny. Ze swojej strony w PHP możesz ustalić, że jeżeli parametr jest inny niż oczekujesz, ustawiasz nagłówki na błąd np. 404 i ajax już nie przejdzie

To wiec dlaczego jesli podam inny plik w url pliku z js to bedzie dzialalo ? Wtedy dziala prawidlowo error i succes.
Jesli jest to w jednym pliku to juz nie dziala.
Switch() ma instrukcje default dla id ktorego nie ma a i tak przechodzi.

[fate]

zrob adres: ./index.php?x=y

Moze masz pliki porozrzucane po folderach i problemem jest względność ścieżki