Discussion :

[oitsuki]

Bonjour,

Auriez vous une idée sur l'inclusion d'un formulaire dans une modal bootstrap 3 et son enregistrement sans fermeture de la modale ?

lorsque j'enregistre mon doc, celuici ne reste pas sur la modal mais revient sur autre page.

l'objectif est donc de pouvoir rester dans la modal, l'empêcher de se fermer afin de pouvoir continuer à insérer des enregistrement.

Certainement cela doit se passer via un ajax, mais je ne sais pas le faire.

Merci de votre aide

Code css :

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

1
2
3
  .modal-dialog {
    width: 900px!important;
  }

le fichier categories.php ==> On clique sur le bouton créer pour ouvrir une modal qui contient manufacturers_popup.php

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
16
17
<a data-toggle="modal" href="filenama_manufactuers_popup.php?page=&mID=&action=new' ;?>" data-target="#myModal">Créer</a>
 
     <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body"><div class="te"></div></div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
         </div> <!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

le fichier manufacturers_popup.php qui contient le formulaire qui va enregistrer les informations fournies.

Code html :

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

1
2
3
4
5
6
<form  name="manufacturers" <?php echo 'action="' . osc_href_link((manufacturers_popup.php, osc_get_all_get_params(array('action', 'info', 'mID')) . 'action='insert&mID=' . $_GET['mID']) . '"'; ?> method="post">
.....
.....
.....
<button type="submit" name="submit" value="Submit" class="btn">Submit</button>
</form>

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
$(document).ready(function () {
    $('#manufacturers').on('hidden.bs.modal', function() {
        return false;
    });
});
$(function() {
    $('#manufacturers').submit(function(e) {
        e.preventDefault();
        var procUrl = "<?php echo osc_href_link(FILENAME_MANUFACTURERS_POPUP, osc_get_all_get_params(array('action', 'info', 'mID')) . 'action=insert&mID=' . $_GET['mID']) . '"'; ?>",
        var formData = $(this).serialize();
        var _this = this;
        $.ajax({
            type: 'POST',
            url: procUrl,
            data: formData,
            success: function(response) {
                $('.popup2').html(response);
            }
        })
    })

[van-bom]

les données du formulaire sont bien envoyée quand tu valide le formulaire?
est ce que tu utilise firebug pour savoir s' il y a des erreurs javascript?

pourquoi tu utilise deux fois le document ready ?

je te conseil d'enlever le bouton de type submit et le remplacer par un simple bouton et tu fais une liason avec la méthode .on() ( car le contenu du modal est crée à la volé aprés le chargement de la page )

[oitsuki]

Merci,

J'ai réussi à résoudre mon pb entre temps.

[sekaijin]

kon nichi wa Oiysuki
Venir chercher de l'aide c'est bien.
en Proposer c'est Mieux.
pourrais-tu poster la solution à ton problème ça pourrait aider d'autre lecteurs.

A+JYT

[oitsuki]

Pas de pb,

voici la soluce.

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
 
 
  $("#ajaxform").submit(function (e) {
    e.preventDefault(); //STOP default action do this first in case any errors thrown in code
    var form = this;
 
 
 
    $("#simple-msg").html("<img src='/images/icons/loadingAnimation.gif' />");
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
 
    $.ajax({
      url: formURL,
      type: "POST",
      data: postData,
      success: function (data, textStatus, jqXHR) {
        $("#simple-msg").html('<pre><code class="prettyprint">' + data + '</code></pre>');
/* clear ckeditor instance */
        for(k in CKEDITOR.instances){
          var instance = CKEDITOR.instances[k];
 
/* clear data */
 
            instance.setData( '' );
        }
 
// cleanup now
        form.reset()
       },
       error: function (jqXHR, textStatus, errorThrown) {
         $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
       }
     });
  });
});

[oitsuki]

Bon je continue dans mon travail,maintenant un pt problème avec CKeditor avec les texarea.

si j'inscris ceci cela fonctionne parfaitement, les valeur du texarea passent et pas de pb avec l'ajax, tout s'inscrit dans la base de données mais cela me sort du modal de boostrap.

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
 
 
$(function () {
	$("#ajaxform").ajaxForm({
		beforeSubmit:  function() {
		for ( instance in CKEDITOR.instances ) {
		CKEDITOR.instances[instance].updateElement();
		}
	}
	});
 
	for (instance in CKEDITOR.instances) {
		CKEDITOR.instances[instance].updateElement();
	}
});

donc j'ai essayé ceci, cela ne fonctionne pas certainement du en partie qu'il manque beforesubmit ......

Bon bref comment je peux l'inclure dans la fonction ci dessous afin que je puisse enregistrer le textarea de ckeditor et après enregistrement effacer les champs de mon formulaire.

Merci de votre aide.

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
 
 
 
$(function () {
 
 
  $("#ajaxform").submit(function (e) {
    e.preventDefault(); //STOP default action do this first in case any errors thrown in code
    var form = this;
 
 
 
    $("#simple-msg").html("<img src='/images/icons/loadingAnimation.gif' />");
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
 
    $.ajax({
      url: formURL,
      type: "POST",
      data: postData,
      success: function (data, textStatus, jqXHR) {
        $("#simple-msg").html('<pre><code class="prettyprint">' + data + '</code></pre>');
 
 
/*****************/
/* test */
/*****************/
  for (instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].updateElement();
 }
 
 
/* clear ckeditor instance */
        for(k in CKEDITOR.instances){
          var instance = CKEDITOR.instances[k];
 
/* clear data */
            instance.setData( '' );
        }
 
// cleanup now
        form.reset()
       },
       error: function (jqXHR, textStatus, errorThrown) {
         $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
       }
     });
  });
});