jQuery Modal box : Sélection d'une image parmi d'autres dans une modal box

**furth** · 10/06/2013, 17h07

Bonjour tout le monde,

Je suis en train de développer un système de news où on a la possibilité de sélectionner son image dans un modal box (qui va se remplir avec une liste d'image présente en base de données) avant de valider sa news.

J'ai fait plusieurs tests sans succès avec le code de cet exemple http://jqueryui.com/dialog/#modal-form.

L'idéal serait, une fois la modal box ouverte, de cliquer sur l'image voulu et qu'elle s'ajoute directement dans la page parente.

Est-ce que c'est possible ? Si oui, quelqu'un peut il m'aider ??

Voilà mon code mais fonctionnel que pour une image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        body {
            font-size: 62.5%;
        }
        label, input {
            display:block;
        }
        input.text {
            margin-bottom:12px;
            width:95%;
            padding: .4em;
        }
        fieldset {
            padding:0;
            border:0;
            margin-top:25px; }
        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }
        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }
        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }
        div#users-contain table td, div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }
        .ui-dialog .ui-state-error {
            padding: 0.3em;
        }
        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
      <script>
      $(function() {
        var name = $( "#name" ),
          link = $( "#link" ),
          type = $( "#type" ),
          allFields = $( [] ).add( name ).add( link ).add( type ),
          tips = $( ".validateTips" );
 
        function updateTips( t ) {
          tips
            .text( t )
            .addClass( "ui-state-highlight" );
          setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
          }, 500 );
        }
 
        function checkRegexp( o, regexp, n ) {
          if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
          } else {
            return true;
          }
        }
 
        $( "#dialog-form" ).dialog({
          autoOpen: false,
          height: 600,
          width: 600,
          modal: true,
 
          close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
          }
        });
 
        $( "#test" )
              .click(function() {
                var bValid = true;  
                  if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                      "<td>" + name.val() + "</td>" +
                      "<td>" + link.val() + "</td>" +
                      "<td>" + type.val() + "</td>" +
                    "</tr>" );
                    $( this ).dialog( "close" );
                  }
              });
 
        $( "#select-image" )
          .button()
          .click(function() {
            $( "#dialog-form" ).dialog( "open" );
          });
      });
      </script>
    </head>
    <body>
 
        <!-- PARTIE MODAL  -->
        <div id="dialog-form" title="Select an image">
                <input type="hidden" name="name" id="name" class="text ui-widget-content ui-corner-all" value="slide1" />
                <input type="hidden" name="link" id="link" class="text ui-widget-content ui-corner-all" value="./img/slide-1.jpg" />
                <input type="hidden" name="type" id="type" class="text ui-widget-content ui-corner-all" value="Autre valeur" />
                <img src="./img/slide-1.jpg" id="test"/>
        </div>
        <!-- FIN -->
 
        <!-- PARTIE TABLEAU -->
        <div id="users-contain" class="ui-widget">
          <h1>Existing Users:</h1>
          <table id="users" class="ui-widget ui-widget-content">
            <thead>
              <tr class="ui-widget-header ">
                <th>Name</th>
                <th>Link</th>
                <th>Type</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <button id="select-image">Select an image</button>
         <!-- FIN -->
 
    </body>
</html>

Merci !!

**MTroy_** · 11/06/2013, 11h48

Pour construire ta solution, il te faudrait utiliser les sélecteurs au clic sur l'image.
Ta méthode n'est pas pratique, il faudrait encapsuler les données communes à l'image dans une div portant son id.
Aussi, les id sur type, name et link feront doublons.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="dialog-form" title="Select an image">
     <div id="img_89048">
           <input type="hidden" name="name" class="text ui-widget-content ui-corner-all" value="slide1" />
           <input type="hidden" name="link" class="text ui-widget-content ui-corner-all" value="./img/slide-1.jpg" />
            <input type="hidden" name="type" class="text ui-widget-content ui-corner-all" value="Autre valeur" />
             <img src="./img/slide-1.jpg"/>
     </div>
     <div id="img_89049">
             <input type="hidden" name="name" class="text ui-widget-content ui-corner-all" value="slide1" />
              <input type="hidden" name="link" class="text ui-widget-content ui-corner-all" value="./img/slide-1.jpg" />
              <input type="hidden" name="type" class="text ui-widget-content ui-corner-all" value="Autre valeur" />
              <img src="./img/slide-1.jpg"/>
     </div>
</div>

Ensuite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#dialog-form").on('click', 'img', function()
{
   var $handler = $(this).parent();
   var name = $handler.find("[name='name']").val();
   var link    = $handler.find("[name='link']").val();
   var type  = $handler.find("[name='type']").val();
   var newLine = "<td>"+name.+"</td>";
   var newLine += "<td>"+link.+"</td>";
   var newLine += "<td>"+type.+"</td>";
 
   $("#users tbody").append
   (
      $("<tr>"+newLine+"</tr>").attr("id", $(this).attr("id"))
   );
});

Mais de façon générale, plutôt que de trimbaler des inputs de partout,
j'aurais sérialiser les datas à valider dans un json via ajax, c'est quand même plus propre et moins lourd.

Par contre, je ne comprends pas pourquoi tu appliques des classes sur des input hidden ?
C'est pour faire liaison de l'état des données sélectionnées ?

**furth** · 11/06/2013, 13h46

Merci MTroy_ pour ta réponse.

J'ai bien saisi que mon code poserait des problèmes si je mettais plusieurs images, qu'il fallait que je génère pour chaque image un id unique afin d'éviter les doublons. C'est pas pratique en effet.

Surtout que le but est de pouvoir afficher les images de ma galerie dans une fenêtre modale qui sera alimentée via une base de donnée afin de permettre à l'utilisateur de sélectionner l'image voulu quand il clique dessus et de pouvoir la récupérer dans la page parent sans rafraîchir la page.

Je pensais pouvoir adapter la solution proposée ici (http://jqueryui.com/dialog/#modal-form)...

Après je suis nouveau sur le Jquery et je n'ai pas encore les billes pour pouvoir trouver une solution avec un json via ajax.

Pour les classes appliquées sur les input hidden c'est juste un oubli de ma part, fallait les enlever.

J'ai pas réussi à faire marcher ton code par contre, tu as testé ?

Merci en tout cas de t'y intéresser

**MTroy_** · 11/06/2013, 14h36

Oui j'ai fais une boulette en éditant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
   var newLine = "<td>"+name.+"</td>";
   var newLine += "<td>"+link.+"</td>";
   var newLine += "<td>"+type.+"</td>";

J'ai laissé des . par mégarde dans la concaténation...

Pour une solution direct via ajax / json, je n'en connais pas.
Je suis partisan du make self (du moins je n'ai pas trop de contraintes temporelle).

Mais vois du coté de serialize() pour grouper les données à insérer en base
avec un bout d'ajax et un json_decode() coté php.

jQuery Modal box : Sélection d'une image parmi d'autres dans une modal box

jQuery

Vue hybride

Discussions similaires

Partager

Partager