Dev Faq
0
votes

Mysql Select ID en mode modal

Aidez-moi s'il vous plaît! Je n'ai pas assez d'expérience dans JQuery pour trouver cette solution par moi-même.

I Affiche une table d'une base de données. J'ai 2 lignes avec une image (logo) qui est affichée correctement. Lorsque je veux changer le logo, j'ouvre la fenêtre modale.

Ma question est la suivante: Dans la fenêtre modale, comment afficher l'image du logo actuel que j'essaie de modifier?

Je pensais que je devais simplement utiliser l'identifiant des lignes pour créer un "SQL Select", mais après beaucoup de recherches que je capitulent.

L'ID de la ligne est bien affiché dans des fenêtres modales mais impossible à utiliser cela dans une variable pour créer une requête SQL.

un exemple
Un exemple

ci-dessous mon code: xxx

1 commentaires

Merci ! Mais il y a une affichage toujours la même image ???

3 Réponses :

0
votes

Assurez-vous que $ ligne [22] code> contient la valeur exacte que vous attendez.

Essayez le code suivant: P> 

$sql = "select * from setting WHERE id='" . $id . "'";
$result = mysqli_query($conn, $sql);
if(isset($result)){
    $row=mysqli_fetch_assoc($result);
    if (count($row) > 0) {
        //use proper array key name
        //if db column name name is logo then you can access it like $row['logo']
        $img_logo = '<img height="50" src="data:image;base64,' . $row['logo'] . '">';
    } else {
        //count is zero
        echo 'count is zero';
    }
} else {
    //result is empty
    echo 'result is empty';
}
?>

4 commentaires

Oui, il y a une valeur exacte en $ ligne [22]

Comparez les valeurs en $ Data-> img_logo_content et $ ligne [22]. Je pense que c'est votre problème.

L'erreur n'est pas comprise entre $ données> img_logo_content et $ ligne [22], mais parce que la valeur $ ID n'existe pas. Comment déclarer cette valeur?

J'ai oublié de dire cela avec ce code, j'ai toujours le dernier identifiant de mon tableau. (Quand je clique sur la ligne 1, c'est $ ID de la rangée 2)

0
votes

Il y a deux options pour faire ceci:

  • appelez une API pour obtenir la ligne de détail lorsque vous ouvrez le modal, puis utilisez. img_logo_content à partir de la réponse de l'API à l'affichage. Cette option sera utile si vous essayez d'afficher une valeur qui ne s'affiche pas dans la table. LI>
  • Obtenez img_logo_content à partir de la table et affichez-le sur le mode MODAL (voir exemple ci-dessous) LI> ul>

    Si vous choisissez une deuxième option, vous pouvez le faire comme ci-dessous: P>

    1. Supprimer ci-dessous Code: Li> ol> xxx pré>
      1. Changement ci-dessous Code: LI> ol> xxx pré>

        à ci-dessous: p> xxx pré>

        et veuillez également modifier le code ci-dessous: p> 

        <body class="docs">

  <!-- Header -->
  <!-- Content -->
  <div class="container">
    <div class="docs-section">

      <div class="example">
        <table id="editing-example" class="table" data-paging="true" data-filtering="false" data-sorting="false">
          <thead>
            <tr>
              <th data-name="id" data-breakpoints="xs" data-type="number">ID</th>
              <th data-name="nom_config">Name</th>
              <th data-name="img_logo_content">Logo</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach( $datas as $data ) { ?>
            <tr data-expanded="true">
              <td>
                <?php echo $data->id; ?></td>
              <td>
                <?php echo $data->nom_config; ?></td>
              <td>
                <?php echo '<img height="20" src="data:image;base64,' . $data->img_logo_content . '">' ?></td>
            </tr>
            <?php } ?>
          </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
          <style scoped>

            .form-group.required .control-label:after {
              content: "*";
              color: red;
              margin-left: 4px;
            }
          </style>
          <div class="modal-dialog" role="document">
            <form class="modal-content form-horizontal" id="editor">
              <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="editor-title">Add Row</h4>
              </div>
              <div class="modal-body">

                <input type="number" id="id" name="id" class="hidden" />

                <div class="form-group required">
                  <label for="nom_config" class="col-sm-4 control-label">Name</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control" id="nom_config" name="nom_config" required>
                  </div>
                </div>

                <div class="form-group">
                  <label for="img_logo_content" class="col-sm-4 control-label">logo</label>
                  <div class="col-sm-8">

                    <!-- Display logo -->
                    <div id="logo-preview"></div>

                    <input type="file" class="form-control" id="img_logo_content" name="img_logo_content" placeholder="Votre Logo">
                  </div>
                </div>

                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Save changes</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
            </div>
          </div>

        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://fooplugins.github.io/FooTable/docs/js/prism.js"></script>
        <script src="https://fooplugins.github.io/FooTable/docs/js/ie10-viewport-bug-workaround.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
        <script src="https://fooplugins.github.io/FooTable/compiled/footable.js"></script>
        <!-- Initialize FooTable -->
        <script>
          jQuery(function($) {
            var $modal = $('#editor-modal'),
              $editor = $('#editor'),
              $editorTitle = $('#editor-title'),
              ft = FooTable.init('#editing-example', {
                editing: {
                  enabled: true,
                  addRow: function() {
                    $modal.removeData('row');
                    $editor[0].reset();
                    $editorTitle.text('Add a new row');
                    $modal.modal('show');
                  },
                  editRow: function(row) {
                    var values = row.val();
                    $editor.find('#id').val(values.id);
                    $editor.find('#nom_config').val(values.nom_config);
                    $editor.find('#logo-preview').html(values.img_logo_content);

                    $modal.data('row', row);
                    $editorTitle.text('Edit row #' + values.id);
                    $modal.modal('show');
                  },
                  deleteRow: function(row) {
                    if (confirm('Are you sure you want to delete the row?')) {
                      row.delete();
                    }
                  }
                }
              }),
              uid = 10;

            $editor.on('submit', function(e) {
              if (this.checkValidity && !this.checkValidity()) return;
              e.preventDefault();
              var row = $modal.data('row'),
                values = {
                  id: $editor.find('#id').val(),
                  nom_config: $editor.find('#nom_config').val(),
                  img_logo_name: $editor.find('#img_logo_name').val()
                };

              if (row instanceof FooTable.Row) {
                $.ajax({
                  url: 'update.php',
                  dataType: "json",
                  cache: false,
                  data: {
                    id: values['id'],
                    nom_config: values['nom_config'],
                    img_logo_content: values['img_logo_content']
                  },
                  success: function(data) {
                    if (data.return) {
                      alert("Success");
                      row.val(values);
                    } else {
                      alert("No modifications!");
                    }
                  },
                });


              } else {
                $.ajax({
                  url: 'insert.php',
                  data: {
                    id: values['id'],
                    nom_config: values['nom_config'],
                    img_logo_content: values['img_logo_content']
                  },
                  success: function(data) {
                    if (data.return) {
                      alert("Success");
                      ft.rows.add(values);
                      location.reload();
                    } else {
                      alert("Already used!");
                    }
                  },

                });
              }
              $modal.modal('hide');
            });
          });
        </script>
</body>

6 commentaires

Merci beaucoup pour votre aide, ça marche bien maintenant! Je vais essayer de comprendre mon erreur plus tard .. pas eu du temps en ce moment

Je vous en prie! N'oubliez pas d'accepter ma réponse: D

Une dernière question. Si je veux utiliser une demande SQL dans ma fenêtre modale comme le code que vous me demandez de supprimer, est-ce possible et comment préparer le code JQuery? Je cherche cela depuis longtemps.

Vous ne pouvez pas. Tout le code PHP sera exécuté avant d'envoyer la sortie (HTML) sur le navigateur. Ainsi, lorsque vous cliquez sur Ouvrir le modal, vous ne pouvez plus exécuter de code PHP. La solution consiste à créer une API qui exécutez la requête SQL puis retourner la ligne de détail, puis utilisez ces informations à afficher dans le modal.

Je pense avoir enfin la solution pour la deuxième option (API). Qu'est-ce que tu penses?

@Canta j'ai des améliorations pour votre code, vous pouvez le vérifier ici: Pastebin.com/lepcietr

0
votes

Je pense avoir enfin la solution pour la deuxième option (API).

Ajouter ci-dessous Code P> 

<?php
include('../connection.php');

if (isset($_POST['productID'])) {
$productID = $_POST['productID'];

$sql = "select * from setting WHERE id='" . $productID . "'";
$result = mysqli_query($conn, $sql);
if(isset($result)){
    $row=mysqli_fetch_assoc($result);
    if (count($row) > 0) {
        $data = '<img height="50" src="data:image;base64,' . $row['img_logo_content'] . '">';
    }
}
echo json_encode($data);
}
?>

0 commentaires

Articles qui pourrait vous intéresser :

Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?
Select2 ne s'affiche pas correctement dans le mode bootstrap
Laravel Echo n'écoute pas
La validation de la demande de formulaire ne fonctionne pas. Il charge juste la page d'accueil dans Postman