CodeIgniter Polska Forum

Witamy na polskiej stronie wsparcia CodeIgniter. Nie zapomnij odwiedzić naszej strony głównej

Nie jesteś zalogowany na forum.

#1 24-02-2019 16:01:52

PavlO.
Użytkownik
Data rejestracji: 09-03-2015
Liczba postów: 26

Przesłanie formularza bez przeładowania strony.

Witam, chce dodać funkcjonalność by dodawanie produktów do koszyka odbywało się bez przeładowania strony, niestety jak do tej pory mi to się nie udało.
Chodzi o przesłanie danych z formularza bez przeładowania, formularz:

<?php echo form_open(); ?>

           <input type="hidden" id="id_buta"  name="id_buta" value="<?php echo $but->id?>">
           <input type="radio" id="rozmiar"  name="rozmiar" value="M" > M
           <input type="radio" id="rozmiar"  name="rozmiar" value="L" > L
	   <input type="radio" id="rozmiar"  name="rozmiar" value="XL"> XL
	   <input type="text" id="ilosc"  name="ilosc" placeholder="Ilość szt">	<br>
			
	   <button type="submit" id="dodaj">Dodaj do koszyka</button>

<?php echo form_close(); ?>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){

        $('#dodaj').on('click',function(){
            var id_buta= $("#id_buta").val();
            var rozmiar= $("#rozmiar").val();
            var ilosc= $("#ilosc").val();

            $.ajax({
                type : "POST",
                url  : "<?php echo base_url('produkty/koszyk')?>",
                dataType : "JSON",
                data : {id_buta:id_buta,rozmiar:rozmiar,ilosc:ilosc},
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });

        });

    });
</script>

Niestety po przesłaniu tego formularza nie działa on poprawnie, jeśli dodam 
<?php echo form_open('produkty/koszyk'); ?> to dodawanie do koszyka działa poprawnie jednak jest przeładowanie strony,
więc sam kod php w controlerze jest oki tylko problem mam z stworzeniem odpowiedniego kodu js.

Ostatnio edytowany przez PavlO. (24-02-2019 16:14:31)

Offline

#2 26-02-2019 14:17:07

tj_gumis
Użytkownik
Data rejestracji: 24-02-2013
Liczba postów: 342

Odp: Przesłanie formularza bez przeładowania strony.

1) Usun z przycisku:

type="submit"

2) Najlepiej dla swietego spokoju umiesc przycisk w ogle poza formularzem.
3) Zserializuj formularz:

var data = $('#id-form').serialize()

Kto wie moze bedziesz go modyfikowal w przyszlosci i w ten sposob nie bedziesz musial grzebac ponownie w kodzie
Z drugiej strony kiego trzymac formularz, ktory spelnil swoja role ?
Czy nie powinienes zwrotnie przeslac ajaxem do kontentu strony jakis komunikat o sukcesie/porazce lub aktualny stan koszyka/zamowienia?

Ostatnio edytowany przez tj_gumis (26-02-2019 14:17:44)

Offline

#3 26-02-2019 16:26:40

PavlO.
Użytkownik
Data rejestracji: 09-03-2015
Liczba postów: 26

Odp: Przesłanie formularza bez przeładowania strony.

Dzięki za odpowiedź smile
Tak będę chciał zrobić też jakieś powiadomienie informujące o dodaniu do koszyka, ale jeszcze się tym nie zajmowałem.
I znam tylko taki sposób by w controlerze wsłac jakieś echo do widoku które będzie wyświetlone w danym div.

Poprawiłem kod tak jak poleciłeś:

<script>
    $(document).ready(function(){

        $('.dodaj').on('click',function(){
            var data = $('.id-form').serialize();

            $.ajax({
                type : "POST",
                url  : "<?php echo base_url('produkty/koszyk')?>",
                dataType : "JSON",
                data : data,
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });

        });
    });
</script>

z przycisku usunięty został typ, a do inputów dopisane class="id-form".
Niestety dalej to nie działa tak jak bym chciał, ponieważ teraz kliknięcie przycisku (obojętnie którego,nie ważne przy którym produkcie z listy) powoduje zapis zmiany ostatniego produktu z listy. Innych produktów dalej nie da się dodać. Ktoś mi polecił zapoznać się z funkcją closest() ale nie wiem jak ją użyć

"Z drugiej strony kiego trzymac formularz, ktory spelnil swoja role ?" A tego pytanie nie rozumie.

Ostatnio edytowany przez PavlO. (26-02-2019 16:27:28)

Offline

#4 26-02-2019 19:21:39

tj_gumis
Użytkownik
Data rejestracji: 24-02-2013
Liczba postów: 342

Odp: Przesłanie formularza bez przeładowania strony.

z przycisku usunięty został typ, a do inputów dopisane class="id-form".

Sugerowalem raczej identyfikator, a nie klase.

Niestety dalej to nie działa tak jak bym chciał, ponieważ teraz kliknięcie przycisku (obojętnie którego,nie ważne przy którym produkcie z listy) powoduje zapis zmiany ostatniego produktu z listy.

Trudno mi sie zorientowac jak to sobie wszystko zorganizowales, ale z grubsza powinienes to zrobic tak:

1) Przygotowac liste produktow w sklepie z podpietymi do niej w formie atrybutu identyfikatorem produktu oraz przyciskiem "Dodaj do koszyka".
2) Klikniecie przycisku "Dodaj" laduje karte produktu (informcje o produkcie + formularz) na podstawie identlyfikatora produktu.
2) Wypelnienie formularze i jego submit powoduje:
2.1) Dodanie artytulu do koszyka (referencja jest jest identyfikator produktu)
2.2) Przeladowanie strony i prezentacje stanu zakupow w formie listy (koszyka) z przyciskami "Usun" oraz "Modyfikuj", oraz linku powrotu do listy artykulow (sklepu).
3) Koszyk jest rowniez formularzem, ktorego submit powoduje przekierowanie do kolejnego etapu zakupow (np platnosc, czy dane adresowe ...).

Zatem reasumujac to co sie dzieje z Twoimi artykulami zalezy od kilku czynnikow, a przede wszystkim od tego co robisz w backendzie z danymi  przekazanymi trakcie requestu ajax'em.

Offline

#5 26-02-2019 20:18:52

PavlO.
Użytkownik
Data rejestracji: 09-03-2015
Liczba postów: 26

Odp: Przesłanie formularza bez przeładowania strony.

Właśnie chciałem uniknąć punktu 2 z Twojej listy, produkty nie mają strony z "szczegółami" tylko lista i z listy możliwość dodawania do koszyka, bo tak jak Ty piszesz to robiłem nie raz i to prościej jest.
W backendzie jest oki bo bez przeładowania działa wszystko jak należy, tylko problem z przekazaniem ajaxem odpowiednich danych z odpowiedniego "formularza" danego produktu.
Ajax tak jakby pobiera dane z ostatniego proguktu "formularza"z listy, z inych produktów nie przesyła danych, problem jest na pewno przez to że wszystkie produkty na liście i ich formularz mają takie same name inputów. Produkty są wczytywane foreach funkcja na strone i ciezko nadać inne nazwy inputów a portem jeszcze ciężej obsłużyć w controlerze (bo nawet nie wiadomo ile tych produktów max będzie)

Offline

#6 27-02-2019 00:14:55

tj_gumis
Użytkownik
Data rejestracji: 24-02-2013
Liczba postów: 342

Odp: Przesłanie formularza bez przeładowania strony.

z przycisku usunięty został typ, a do inputów dopisane class="id-form".

Sorry, przeoczylem to. Oczywiscie pousuwaj z inputow ten identyfikator, ktory jak sama nazwa wskazuje dotyczy formularza. Serializujesz dane formularza wywolujac formularz wlasnie za pomoca tego identyfikatora. Ponizej troche go zmienilem.


Zalozmy ze masz wyswietlona liste produktow i nie lubisz przeladowan strony. Musisz zatem wziac pod uwage dwa wywolania ajax'owe.
1) Klikasz w element listy w celu wywolania formularza (wtedy mozesz albo podmienic kontent na stronie usuwajac liste i wstawiajac na jego miejsce formularz) lub mozesz po prostu umiescic formularz w modal'u.

<li class="product" data-id_product="354">Jakis produkt</li>

Nie jestem pewien, ale mozliwe ze byloby bardziej poprawnie umiescic w elemencie listy pusty link:

<li><a  class="product" data-id_product="354" href="">Jakis produkt</a></li>

Do tego potrzebujesz caller'a:

    $('.product').on('click', function () {
        var link = $(this);

        $.ajax({
            url: '/cart/add/' + link.data('id_product'),
            type: 'GET',
            contentType: 'text/plain',
            cache: false,
            processData:false,
            success: function(data) {

            // tutaj usuwasz niepotrzebny kontent i wstawiasz w jego miejsce przeslany formularz
           // lub wstawiasz przeslany formularz do modalu

            },
            error: function(data) {
                console.log(data.responseText);
            }
        });
    });

W tym przypadku przesylasz w url na serwer "id" produktu, a jako odpowiedz otrzymujesz html formularza do wstawienia na strone. Id produktu umieszczasz rowniez w formuarzu w inpucie hidden.

2) Klikasz na przycisk "Dodaj" formularza w celu umieszczenia produktu w koszyku.
Sam formularz jest jednoczesnie karta produktu. Oczywiscie nie musisz od razu umieszczac zadnych fotek ani opisu, ale z czasem przeciez mozesz zmienic zdanie.

Zatem dla zdarzenia "click" twojego przycisku bedziesz mial cos w tym stylu:

    $('#button-add-product').on('click', function() {
        var formData = $('#form-add-product').serialize();

        $.ajax({
            url: '/cart/add',
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            data: formData,
            cache: false,
            processData:false,
            success: function(data) {

            // tutaj usuwasz formularz i wstawiasz w jego miejsce komunikat o sukcesie lub nastepny formularz z informacja o bledach walidacji
            },
            error: function(data) {
                console.log(data.responseText);
            }
        });
    });

Cos takiego powinno hulac poprawnie.

Ostatnio edytowany przez tj_gumis (27-02-2019 13:45:06)

Offline

#7 07-03-2019 22:51:58

PavlO.
Użytkownik
Data rejestracji: 09-03-2015
Liczba postów: 26

Odp: Przesłanie formularza bez przeładowania strony.

Oki, udało się. Ten ostatni kod co wkleiłeś bardzo pomocny smile
Jeszcze mam pytanie w codeigniterze da się jakoś ustawić by po zamknięciu przeglądarki i ponownym włączeniu dalej być zalogowanym?
Mam takie ustawienia:

$config['sess_driver'] = 'files';
$config['sess_cookie_name'] = 'ci_session';
$config['sess_expiration'] = 7200;
$config['sess_save_path'] = NULL;
$config['sess_match_ip'] = FALSE;
$config['sess_time_to_update'] = 300;
$config['sess_regenerate_destroy'] = FALSE;

Wiem że dawniej był jeszcze taki parametr ale teraz on nie działa chyba:
$config['sess_expire_on_close']    = FALSE;

Offline

Stopka