[JavaScript][AJAX][PHP] Dynamiczne wyświetlanie treści z bazy danych Opcje

[marbodz]

Witam,
Chciałem prosić o nakierowanie ponieważ robię skrypt aukcji podbijanych i chciałem zrobić z użyciem AJAXA dynamiczne wyświetlanie po podbiciu ceny:
- zwiększonej kwoty
- osoby która wygrywa i podbiła jako ostatnia

Skorzystałem z gotowego skryptu z cioci google i efekt jaki chciałem uzyskać - uzyskałem:

index.php

Kod

      
<script>
        /* AJAX request to checker */
        function check(){
            $.ajax({
                type: 'POST',
                url: 'checker.php',
                dataType: 'json'
            }).done(function( response ) {
               $('#message-list').html(response.news);
            });
        }
        setInterval(check,4000);
</script>

checker.php

Kod

<?php
require('config/mysql.php');

    $data['news'] .= $db->get_oczekujace();

echo json_encode($data);

mysql.php

Kod

    function get_oczekujace(){
        
    $result = $this->db->query('SELECT *, (SELECT SUM(liczba_wejsc) FROM lots_user WHERE loteria=lots.id) AS wszystkie_wejscia,
                              (SELECT user FROM lots_user WHERE loteria=lots.id AND status=1) AS id_wygranego,
                              (SELECT user.login FROM user WHERE id=id_wygranego) AS login        
                               FROM lots WHERE status=1 ORDER BY data_rozpoczecia');

                $czas_do_rozpoczecia = array();
                while($r = $result->fetch_array()){

                $czas_do_rozpoczecia[] = strtotime($r["data_rozpoczecia"]);        
                $wejscie = $r["wejscie"];
                $w_wejscia = $r["wszystkie_wejscia"];
                
                if ($r["login"] == ''){
                    $r["login"] = "------";
                }
                $cena_przedmiotu = number_format($w_wejscia * $wejscie, 0, ',', '.');

                if ($r["premium"] == 1){    
                    $return .= '<div class="box premium_zapisany">';    
                }else{
                    $return .= '<div class="box zapisany">';    
                }        
                    $return .= '<a href="aukcja-{$lots_nowe[i].id}.html"><p>'.$r["nazwa"]." (".$r["id"].')</p></a>';    
                    $return .= '<a href="aukcja-{$lots_nowe[i].id}.html"><img width="160" height="160" style="border: 2px solid #ECECEC;" src="../images/nagrody/'.$r["zdjecie"].'" /></a>';    
                    $return .= '<div class="col-lg-12">
                                       <span class="czas_do_rozpoczecia"></span>
                                </div>';     
                if ($r["premium"] == 1){
                    $return .=  '<div class="col-lg-12 box-pasek-premium">';
                }else{
                    $return .=  '<div class="col-lg-12 box-pasek">';
                }
                    $return .= '<span style=" font-size:18px;">
                                        <a href="aukcje">
                                        <span class="glyphicon glyphicon-refresh"></span>
                                     </a> Wejście: '.$r["wejscie"].'<img class="waluta-b" src="../images/mini-coin.png" />
                                </span>';
                    $return .= '</div>';
                    $return .= '<a class="btn btn-success" href="index.php?site=aukcje&przebij='.$r["id"].'">
                                    Przebij!
                                </a>
                                <a class="btn btn-primary" href="#">
                                    Kup teraz!
                                </a>';
                    $return .= "<p>".$cena_przedmiotu.'<img class="waluta-b" src="../images/mini-coin.png" /></p>';
                if ($r["premium"] == 1){
                    $return .= '<div class="col-lg-12 box-pasek-premium">';
                }else{
                    $return .= '<div class="col-lg-12 box-pasek">';
                }
                    $return .= 'Wygrywa: <span class="glyphicon glyphicon-user"></span> '.$r["login"].'
                        </div> ';
            
                                
                    $return .= '</div>';
                                    
            }
            
///// po dodaniu pliku z licznikiem odliczającym czas nie działa dynamiczne odświeżanie treści! ////////
            
                //include("scripts/lots_oczekujace.php"); // skrypt js

            return $return;

        }

Problem niestety pojawił się z wyświetlaniem licznika z odliczaniem czasu do zakończenia aukcji. Gdy dodam plik (w kodzie powyżej ujęty w komentarzu include("scripts/lots_oczekujace.php") to nie działa już dynamiczne aktualizowanie kwoty i osoby wygrywającej bez odświeżania strony. Proszę powiedzieć co robię źle bo chwilę się z tym męcze i nie mogę sobie poradzić... Z góry dzięki za każdą wskazówkę.

Podgląd skryptu Link
(podbijanie nie jest zrobione dynamicznie zatem należy sprawdzać na dwóch kartach bo jescze za to się nie brałem)

[blahy]

jak odkomentujesz ten include("scripts/lots_oczekujace.php"); to sobie firebugiem (czy co tam uzywasz) sprawdz co ci ten ajax zwraca. wydaje mi sie, ze juz nie ten json, ktorego oczekujesz czylko jakis blad, ktorego nie widzisz na stronie tylko wlasnie w tym ajaxowym response.

[marbodz]

dzięki za odpowiedź, zwraca przy odkomentowaniu tylko licznik. czyli jak to mógłbym zaincludować? jakbyś mógł mnie nakierować jakoś hmm

[ilidir]

jaki licznik ci zwraca bonie bardzo rozumiem.

[marbodz]

licznik czasu do zakonczenia aukcji, na podglądzie skrypt jest teraz z licznikiem
lots_oczekujace.php

Kod

<script>
var czas_do_rozpoczecia = <?php echo json_encode($czas_do_rozpoczecia); ?>;

$(document).ready( function() {
    $('span.czas_do_rozpoczecia').each(function(index) {
        wstaw_czas(this, index);
    });    
});

function wstaw_czas(obj, index) {
    var do_konca = czas_do_rozpoczecia[index] - Math.round((new Date()).getTime() / 1000);

    if (do_konca <= 0) {
        //location.reload();
        $(obj).html('00:00:00');
    } else {
        var hours = Math.floor(do_konca/3600);
        var minutes = Math.floor((do_konca - hours*3600)/60);
        var seconds = Math.floor(do_konca - hours*3600 - minutes*60);

        if (hours < 10) hours = "0"+hours;
        if (minutes < 10) minutes = "0"+minutes;
        if (seconds < 10) seconds = "0"+seconds;
    
        // will display time in 10:30:23 format
        var formattedTime = hours + ':' + minutes + ':' + seconds;
    
        $(obj).html(formattedTime);
    
        setTimeout(function() { wstaw_czas(obj, index); }, 1000);
    }
}

</script>

[b4rt3kk]

Widzę, że chcesz okradać ludzi w stylu za10groszy?

Jeśli chcesz odświeżać wszystkie aukcje na stronie to proponowałbym tutaj raczej użycie socketów, bo inaczej będzie mulić przy dużej liczbie użytkowników.

[marbodz]

haha nie nie, zresztą na rynku jest już trochę takich serwisów więc jaki jest sens?

Chciałem na prostym przykładzie dojść jak to jest zrobione i zacząłem się bawić z tym ale mi przystawiło w tym miejscu

[blahy]

response ajaxowy ma ci zwracac json, a zwraca cos takiego:

<script>
jakis skrypt
</script>{"news":"<div class=..."}

Nie potrzebujesz tego skryptu, tam. zakladasz, ze response ci zwroci json:
$('#message-list').html(response.news);
a to nie jest poprawny json, wiec nie aktualizuje ci zawartosci #message-list.

ten include("scripts/lots_oczekujace.php"); robi pewnie gdzies echo tego skryptu js. Nie wiem czemu chcesz to dolaczyc do tego ajaxa.

[marbodz]

no wiem właśnie że zwraca mi to. Ale jak nie dorzuce do tego ajaxa tego includa to nie działa odliczanie czasu i <span class="czas_do_rozpoczecia"></span> nic nie wyświetla hmmm. Myślałem żeby może wyświetlanie boxu Aukcji zrobić poza funkcją get_oczekujace() czyli w php lub na tpl w pętli a w funkcji jedynie wyswietlanie kwoty całkowitej + osoby która wygrywa i to dołączyć do skryptu ale nie wiem czy dobrze myśle i czy dałoby się to tak zrobić?

[blahy]

na document ready robisz cos takiego:

$(document).ready( function() {
$('span.czas_do_rozpoczecia').each(function(index) {
wstaw_czas(this, index);
});
});

To Ci inicjalizuje te liczniki czasu pewnie.
Pozniej zastepujesz ten html innym, dla ktorego juz nie wolasz tego.
Powinienes po zastapieniu tego contentu zawolac taka sama funkcje, czyli po:
$('#message-list').html(response.news);
zrobic:
$('span.czas_do_rozpoczecia').each(function(index) {
wstaw_czas(this, index);
});

pewnie moznaby tez w tym Twoim ready zrobic "message-list".on('jakis event', '.czas_do_rozpoczecia', function() {tutaj kod do inicjalizacji licznikow}) ale tak jak wyzej bedzie latwiej.
Na pewno nie mozesz dodawac tego jsa tak jak masz teraz bo robi Ci sie niepoprawjny json z tego.