Redraw a row after ajax updated (using bootstrap modal)

beegeezzz

Hello everybody,

Hope you ara doing well...

I update a row with AJAX, all is OK, but when I close the bootstrap modal (contening the update form), I would like to redraw the row without relaod the page.

The problem is that I'm using a bootstrap modal and my dataTable is outside this modal.

I tried this code

success:function(result)
                          {
                              
                              
                              $("#result").show(); //DD: il faut le laisser autrement, il n'appraît plus quand on met à jour un second prestataire...
                              $("#result").html(result);
                              $("#result").fadeOut(3000);
                              
                              table
                                .row( $(this).parents('tr') )
                                .draw();
                          }

but the row contains the old information.

table contains this

var table = $('#example').DataTable();

Thanks in adavance for your help.

David

kthorngren

I think you might need to use row().invalidate(), for example:

     table
                                .row( $(this).parents('tr') )
                                .invalidate()
                                .draw();
                          }

Kevin

beegeezzz

Hello,

Thank you for your reply.

Unfortunately, it does not work for me.

I still have to refresh the page to see the new value.

Please, see this video, I recorded my screen to show you :

partnering4biotech.com/datatable.mov

Thanks again for your help

kthorngren

What does $("#result") refer to and what is the content of result?

I assume you are trying to update the cell or row with this?
$("#result").html(result);

Making assumptions that your success response result contains the updated row and you are wanting to update the row html with $("#result").html(result);. If this is the case then it suggests to me that "#result" is the incorrect row selector.

Once you get the row html updated then you use row().invalidate() to have DT update its cached data from updated html.

I may be off base with my assumptions, just taking my best guess.

Kevin

beegeezzz

Hello

Thanks for your quick reply.

$("result")

contains only a message to say something like "Update OK" or "Insert OK".

I think the main problem is that my bootstrap modal takes the focus and I'm not able to work on my dataTable.

I think also (I'm not sure) I have to send new content from PHP to feed the table ?

This is a part of my php code

The controller

public function addProfessionnel()
        {
            $params = array();
            //permet de transformer en array ce qu'on a reçu de js (seraialize)
            parse_str($_POST['data_form_insert_pro'], $params);
            
            $pro = new Professionnel();
            if (isset($_POST['action']) && ($_POST['action'] == 'add'))
            {
                $pro = $pro->addPro($params);
                echo "Insertion réussie...";
                return false;
                
            }
        
}

The model

public function addPro($params)
    {
        $sql = "INSERT INTO professionnels (nom, prenom, adresse, numero, boite, cp, ville, mail, telephone, inami, tva, disponibilite, commentaire, regions_id)
                VALUES (:nom, :prenom, :adresse, :numero, :boite, :cp, :ville, :mail, :telephone, :inami, :tva, :disponibilite, :commentaire, :regions_id)";
        $query = $this->db->prepare($sql);
        $parameters = array(':nom' => $params['nom'], ':prenom'=>$params['prenom'],':adresse' => $params['adresse'], ':numero'=>$params['numero'],':boite' => $params['boite'], ':cp'=>$params['boite'],
                            ':ville' => $params['ville'], ':mail'=>$params['mail'],':telephone' => $params['telephone'], ':inami'=>$params['inami'],
                            ':tva' => $params['tva'], ':disponibilite'=>$params['disponibilite'],':commentaire' => $params['commentaire'], ':regions_id'=> 1 );

        // useful for debugging: you can see the SQL behind above construction by using:
        //echo '[ PDO DEBUG ]: ' . Helper::debugPDO($sql, $parameters);  exit();
        $query->execute($parameters);
    }

And my js code

$('#form_insert_pro').submit(function(ev)
        {
            ev.preventDefault(); // to stop the form from submitting
            
            
            //alert($("#form_insert_pro").serialize());
            //return false;
            $.ajax
                      (
                          {
                              method : 'POST',
                              //la route (controleur) et le paramètre (id à supprimer)
                              url: url + "/professionnels/addProfessionnel/",
                              dataType: 'html',
                              data:{
                                  data_form_insert_pro : $("#form_insert_pro").serialize(),
                                  action : 'add'
                              },
                              success:function(result)
                              {
                                  
                                  
                                  $("#result_insert").show(); //DD: il faut le laisser autrement, il n'appraît plus quand on met à jour un second prestataire...
                                  $("#result_insert").html(result);
                                  $("#result_insert").fadeOut(3000);
                                  
                                  
                              }
                          
                          }
                      );
              
      });

Like you can see, I don't return any new information to put in the dataTable.

Do you think that I have to return information or can I update my dataTable without returning any information from PHP ?

Thanks for all.
David

kthorngren

There is a z-index property you might be able to apply to the popup message to force it in front of the bootstrap modal.

Probably what I would look at doing is having my server script update the DB then retrieve the record and return it in the ajax response. Then use the success function to update the Datatable using cell.data() or row.data() depending on what you return.

Kevin

beegeezzz

Hello Kevin,
Thank you very much for your reply and sorry for the delay of mine.

I tried, I tried and I tired, but no result so far...

My idea is to build in php the table and return it to js like this

I work on this id

<tbody id="tbody_categories">

I use a SELECT query

$sql = "SELECT id, nom_categorie FROM categories ORDER BY nom_categorie";
        $query = $this->db->prepare($sql);
        $query->execute();
        return $query->fetchAll();

I build the table

$retour = '';
            foreach ($categories as $categorie)
            {
                $retour.= '<tr><td>';
                if (isset($categorie->nom_categorie)) $retour.= htmlspecialchars($categorie->nom_categorie, ENT_QUOTES, 'UTF-8');
                $retour.= '</td>';
                
                $retour.= '<td><button class="supprimer_categorie#'.$categorie->id.'"'. ' btn btn-primary center-block> Supprimer</button></td>';
                $retour.= '<td><button id="maj_categorie#'.$categorie->id.'"'. ' data-toggle="modal" data-target="#squarespaceModalupdatecategorie" class="update_pro btn btn-primary center-block" > Editer</button></td></tr>';
            }
            
            echo $retour;

and in javascript, I use html to rebuild the tbody :

success:function(result)
                              {
                                  
                                  $('#tbody_categories').html(result);

I loose some effects (like color...) and I think that's not the best way.

What do you think ?

Have you something better for me please ?

Thank you again

David

allan

I would suggest you just have the server return a simple JSON structure with the data only - i.e. no class information. Then use data renderers to add classes and HTML to the buttons as required.

That way you won't need to use $().html() directly. You can do that, but it will overwrite whatever DataTables has put in the table.

Allan