Inclusion formulaire dans Modal boostrap 3 et retour dans la modal

Version imprimable

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:

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:

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:

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:

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);
            }
        })
    })

28/07/2014, 01h02
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 )
28/07/2014, 02h43
oitsuki

Merci,

J'ai réussi à résoudre mon pb entre temps.
28/07/2014, 07h06
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

Pas de pb,

voici la soluce.

Code:

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>');
       }
     });
  });
});

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:

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:

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>');
       }
     });
  });
});