Łączenie plików js z ajaxem

Question

Witam

w moim projekcie mam takie pliki

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src=”js/script.js” type=”text/javascript” ></script> 

<style>
    <?php include 'css/board.css'; ?>
</style> 

<?php

    include_once 'models/board.php';
    include_once 'services/gameplay-service.php';

    $o= new Board;
    $o->DrawBoard();     

?>

 

board.php

<?php
    final class Board
    {

        private $fields;
        
        function Board(){
            $this->fields = array(
                array('e', 'r', 'e', 'r', 'e', 'r', 'e', 'r'),
                array('r', 'e', 'r', 'e', 'r', 'e', 'r', 'e'),
                array('e', 'r', 'e', 'r', 'e', 'r', 'e', 'r'),
                array('e', 'e', 'e', 'e', 'e', 'e', 'e', 'e'),
                array('e', 'e', 'e', 'e', 'e', 'e', 'e', 'e'),
                array('b', 'e', 'b', 'e', 'b', 'e', 'b', 'e'),
                array('e', 'b', 'e', 'b', 'e', 'b', 'e', 'b'),
                array('b', 'e', 'b', 'e', 'b', 'e', 'b', 'e')
            );

        }

        public function DrawBoard(){        
            echo '<table id="board">';
            $i = 0;

            for($row= 0; $row < 8; $row++)
            {
                echo '<tr>';
 
                for($col= 0; $col < 8; $col++){            

                    if($this->fields[$row][$col] != 'e')
                    {
                        echo '<td id="'.$i.'">' . $this->fields[$row][$col] . '</td>';
                    }   
                    else
                    {
                        echo '<td id="'.$i.'"></td>';
                    }
                    $i++;
                }
                echo '</tr>';
            } 
            echo '</table>'; 
        }  
    }   
    $id = $_POST["id"]; 
    echo '<p id="asda">' .$id. '</p>';
?>

script.js

    $('#board td').on('click', function(){
        var id = $(this).attr('id');
        var fieldValue = $(this).html();
        
        $(this).css("background-color","green");

        $.post('models/board.php', {'id': id}, function(){});
    });
    

 

Chodzi o to że w pliku board.php generuje tabele o id #board, odnosze się do niej w js'ie przez ajaxa, plik skrypt dolaczam w index.php, jednak coś jest nie tak, mógłby ktoś wskazać bląd

Answer 1

Ajax jest asynchroniczny miej to na uwadzę. Co  zwraca Ci ajax? Promisa?
Wywołania ajaxowe nie zwracają Ci danych per se, dopiero trzeba je np obsłużyć w call-back, żeby te dane otrzymać bo nigdy nie mają gwarancji stąd pojawienie się obiektu typu promise

Comments

A czemu jeśli kod js umieszczam w pliku index.php to działa?

---

bo to jest jeżyk JEDNO-WĄTKOWY. W sytuacji kiedy dołączasz skrypt do pliku, skrypty są czytane najpierw, stąd to co wykonuje się w skrypcie, odwołuje się do czegoś, czego np jeszcze nie ma w pliku PHP lub nie zostało załadowane. Szczególnie odwołanie się do "elementu "

Patrz na kolejność dołączasz skrypty, one się wykonują wykonać się próbuje metoda na obiekcie który dopiero w twoim głównym pliku później jest ładowany 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src=”js/script.js” type=”text/javascript” ></script> 
 
 
<?php
 
    include_once 'models/board.php';
    include_once 'services/gameplay-service.php';
 
    $o= new Board;
    $o->DrawBoard();     
 
?>

https://pasja-informatyki.pl/programowanie-webowe/metody-dolaczenia-skryptow/

---

Zachowaniem domyślnym przeglądarki (w sytuacji, gdy nie ustawiono ani atrybutu asych, ani defer) jest sparsowanie i wykonanie skryptu natychmiast w linii dołączenia, zanim przeglądarka kontynuować będzie wczytywanie dalszego źródła witryny.