Problème avec Ajax

Grope
Javascript

Bonjour,
tout d'abord j'espère que je ne me trompe pas d'endroit pour poster ce post.

Pour commencer j'ai un simple tableau qui est alimenté par des données dans une base de données, elles sont affichées à l'aide d'une boucle, rien de bien spécial, cependant j'ai un bouton qui devrait me permettre d'afficher une modal.
Cette modal devrait être alimenté par des données présentent dans ma base de données.
Ces données devraient être différente selon le bouton cliqué.
Je pense devoir utilisé de l'Ajax cependant je n'ai jamais eu l'occasion de l'utiliser.
Et je ne comprends pas très bien les tutos proposés sur internet.

Je n'ai pas de code si ce n'est mon tableau, mais je ne pense pas que cela soit utile.

Je n'ai pas non plus d'erreurs.

J'espère que je me suis fait comprendre. :)
Merci pour votre aide !

1 réponse

keulu

hello. alors voila comment faire...

j'ai un bouton qui quand je clic dessus, affiche une modal dont l'id est recDataConnection.

<a href="#" data-toggle="modal" data-target="#recDataConnection"><i class="fa fa-fw fa-eye"></i> Voir les données</a>

ma modal ressemble a ca : 

<div class="modal fade" id="recDataConnection" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 95%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Données enregistrées</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="user_search">Recherche utilisateur</label>
                            <input type="text" class="form-control input-sm" id="user_search" placeholder="Nom ou @IP ou @mac">
                        </div>
                        <div id="record"></div>
                    </div>
                    <div class="col-sm-9" id="record_data">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

coté JS j'ai ca pour au clic sur le bouton :

$('#recDataConnection').on('show.bs.modal', function (event) {
    getRecords();
});

function getRecords(){
    $.get('zabbix/ajax/get_groups_records/'+groupid, function(data) {
        $('#record').html(data);
    });
}

Ce script va s'executer des que la modal est visible. (donc au clic sur mon bouton. Attention, c'est pas le clic sur le bouton qui execute le script, mais bien l'ecoute de l'evenement show.bs.modal)

Coté php

 $.get('zabbix/ajax/get_groups_records/'+groupid, function(data) {
     $('#record').html(data);
 });

va executer un appel serveur. 

public function get_unify_records($host_id)
    {
        $this->load->model('Host_model');

        $records = $this->host_model->get_rec_unifi_config_users_connections($host_id);

        $return = '';

        if ($records) {
            foreach ($records as $record) {
                $class = $record->is_complete == 1 ? 'btn-success' : 'btn-default';
                $icon = $record->is_complete == 1 ? 'fa-check' : 'fa-times';
                $return .= '<div class="btn-group">
                    <a data-record-id="'.$record->id.'"  class="record btn '.$class.'">
                        <i class="fa fa-fw '.$icon.'"></i> Du: '.$record->start.' - Au: '.$record->end.
                    '</a>
                    <a class="btn '.$class.' dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a data-record-id="'.$record->id.'" class="remove-record btn"><i class="fa fa-times"></i> Supprimer</a></li>
                    </ul>
                </div>';
            }
        } else {
            $return .= 'Aucun enregistrement prévu';
        }

        echo $return;
    }

et donc le $return renvoyé par le serveur est du code html que je rajoute directement a l'élément $('#record').html(data);

bon la c'est mon code avec ce dont j'ai besoin, a toi de faire ton taf :)