Ανανέωση table με ajax

[sinikos]

Χρόνια πολλά.

Κοντεύω να πάθω εγκεφαλικό.

Έχω ενα πίνακα που τραβάει από την βάση και με μια φορμα, πρόσθετα, διεγραφα και επεξεργαζομουν τις εγγραφες. Προσπαθώ τώρα να το κάνω με ajax για να μην έχω συνεχόμενα reload στην σελίδα. Έχω δει κάτι κατεβατά tutorial στο internet αλλά ειναι πολύ πιο τραβηγμένα από αυτό που θέλω και δεν βγάζω άκρη με τίποτα. Δηλαδή θεωρώ οτι έχω φτάσει πολύ κοντά (για το insert  προς το παρόν).

Μέχρι τώρα, φορτώνεται η php μου. Σε κάποιο σημείο φορτώνεται ο πίνακας και δυναμικά τα rows με foreach. Ποιο κάτω έχω βάλει 2 input πεδία και ένα κουμπί που εκτελεί ένα js και εισάγει τα πεδία στην βάση. Η εισαγωγή γίνεται κανονικά αλλά έχω πρόβλημα στο πως εμφανίζω την νέα εγγραφή στον υπάρχον πίνακα. Δεν ξέρω βεβαια και αν το κάνω σωστά. 

Αυτό που σκέφτομαι και προσπαθώ να κάνω είναι, να έχω τον πίνακα που στο πρώτο άνοιγμα της σελίδας, γεμίζει με το foreach της php, οπου τα rows τα έχω σε ένα div (πχ old_rows) και όταν γίνει η εισαγωγή με ajax εμφανίζει με echo τα νέα rows σε ένα νέο div(πχ new_rows) και κρύβει το div old_rows. Αλλά σκατά....

Ο πίνακας μου με js κλπ είναι κάπως έτσι (έχει πολλά ακόμα αλλά ήθελα όσο πιο απλά γίνεται να δείξω αυτό που θέλω).

<!--- Ο ΠΙΝΑΚΑΣ --->

<table class="table">
    <thead>
      <tr>
        <th style="width:15px;">Α/Α</th>
        <th>Username</th>
        <th>Email</th>
      </tr>
    </thead>
    
    <tbody>
        

        
<div id="old_php">   
    
<?php $inst_num=1; foreach($users as $user){?>

    <tr>
        <td style="width:15px;">#<?php echo $inst_num; ?></td>
        <td><input type="text" name="username" value="<?php echo $user->username ?>"  maxlength="40" class="form-control" form="new_user_ajax"></td>
        <td><input type="text" name="email" value="<?php echo $user->email ?>"  maxlength="60" class="form-control" form="new_user_ajax"></td>       
    </tr>

<?php $inst_num = $inst_num + 1; } ?>
    
</div>
        
<div id="new_php"></div>
    
<!--- ΓΙΑ ΤΗΝ ΠΡΟΣΘΗΚΗ ΕΓΓΡΑΦΗΣ --->    
    
<input type="text" name="username" value=""  maxlength="40" class="form-control" form="new_user_ajax"><br>
<input type="text" name="username" value=""  maxlength="40" class="form-control" form="new_user_ajax"><br>
<input type="submit" name="new_user_ajax_btn" id="new_user_ajax_btn" value="Προσθήκη Μέλους" class="btn btn-info btn-block" form="new_testim_ajax"/> 

<!--- ΤΟ SCRIPT  --->     
    
    
<script>  
 $(document).ready(function(){  
      $('#new_user_ajax').on('submit', function(e){  
           e.preventDefault();  
                $.ajax({  
                     url:"<?php echo base_url();?>users/new_user_ajax",   
                     method:"POST",  
                     data:new FormData(this),  
                     contentType: false,  
                     cache: false,  
                     processData:false,  
                     success:function(data)  
                     {  
                          if(data == 2) {
                              $('#new_php').html('Problem');    
                          } else {
                             $('#new_php').html(data); 
                             $('#old_php').html("");
                          }
                     }  
            });  
      });  
 });  
 </script> 

και ο controller (χρησιμοποιώ codeigniter) είναι κάπως έτσι:

public function new_testimonial_ajax() {  


        $username = sanitize($this->input->post('username'));
        $email = sanitize($this->input->post('email'));
        
        $data_ins = array(
        'username'  => $username,
        'email'   => $email
        );
    
        
    if($this->db->insert('users', $data_ins)){
        
        $this->db->select('*');
        $this->db->from('users');
        
        $data_users = $this->db->get();
        $data_row = $data_users->row();
        $data_results = $data_users->result(); 
        $inst_num=1;
        foreach($data_results as $user_obj){
            
        echo '<tr>';
        echo '<td style="width:15px;">#'.$inst_num.'</td>';
        echo '<td><input type="text" name="username" value="'.$user_obj->username.'"  maxlength="40" class="form-control" form="new_user_ajax"></td>';
        echo '<td><input type="text" name="username" value="'.$user_obj->email.'"  maxlength="60" class="form-control" form="new_user_ajax"></td></td>';  
        echo '</tr>';
             
        $inst_num = $inst_num + 1;       
                
        }

           } else {
              echo 2;
           }
}

 

Μέχρι στιγμής το πρόβλημα μου είναι οτί δεν μπορώ να "εξαφανίσω" τα παλιά rows όταν κάνω submit  οπότε φαίνονται και οι όλα μαζί μετά το πρώτο submit (ίσως θα ήταν καλύτερα να τα φορτώνω εξαρχής με js αλλά δεν ξέρω πως). Και το μεγαλύτερο προβλημά μου είναι οτί ενώ στέλνω με echo τα νέα rows να εμφανιστούν στο div (new_rows) μου χαλάει όλο το πίνακα. Δηλαδή εμφανίζει τα αποτελέσματα πάνω από τις κεφαλίδες του πίνακα (πάνω από το thead δηλαδή) και είναι σαν να είναι μαζεμένα τα rows σε width: 50%

Y.Γ. Άν στέλνω σχεδόν όλο το πίνακα με echo, είναι καταστροφικό από θέμα πόρων ή είναι αμελητέο? Ή έτσι είναι ο σωστός τρόπος?

 

 

Επεξ/σία 1 Ιανουαρίου 2019 από sinikos