web-dev-qa-db-fra.com

Twitter Bootstrap 2 boîtes de dialogue de formulaire modal

J'ai le formulaire de dialogue suivant:

<div class='modal' id='myModal'>
  <div class='modal-header'>
    <a class='close' data-dismiss='modal'>×</a>
    <h3>Add Tags</h3>
  </div>

  <div class='modal-body'>
    <form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class='modal-footer'>
    <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
  </div>
</div>

et son JS:

<script>
  //<![CDATA[
    $(function() {
      // wire up the buttons to dismiss the modal when shown
      $("#myModal").bind("show", function() {
        $("#myModal a.btn").click(function(e) {
          // do something based on which button was clicked
          // we just log the contents of the link element for demo purposes
          console.log("button pressed: "+$(this).html());
          // hide the dialog box
          $("#myModal").modal('hide');
        });
      });
      // remove the event listeners when the dialog is hidden
      $("#myModal").bind("hide", function() {
          // remove event listeners on the buttons
          $("#myModal a.btn").unbind();
      });
      // finally, wire up the actual modal functionality and show the dialog
      $("#myModal").modal({
        "backdrop" : "static",
        "keyboard" : true,
        "show" : true // this parameter ensures the modal is shown immediately
      });
    });
  //]]>
</script>

Lorsque je clique sur x, qui est <a class='close' data-dismiss='modal'>×</a>, le formulaire se ferme en me laissant sur la page courante, alors que j'aimerais aller sur la page d'accueil.

Aussi le bouton "Ajouter une balise", qui est <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> ne faites rien, tout en cliquant sur ENTRER sur le clavier faites le travail et je voudrais cliquer sur "Ajouter une balise" fait de même.

Je ne suis pas aussi compétent sur JS et prog frontal, donc toute aide est la bienvenue.

javascriptjqueryformsmodal-dialogtwitter-bootstrap
20
BBJ3

Votre bouton d'envoi est en dehors des balises de formulaire.
Il ne saura pas quel formulaire soumettre.

Utilisez javascript pour le connecter au formulaire.

<div class='modal-body'>
    <form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <input name="something" value="Some value" />
    </form>
  </div>

<div class='modal-footer'>
    <a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>

<script>
  $('#modal-form-submit').on('click', function(e){
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();

    // Find form and submit it
    $('#modal-form').submit();
  });
</script>

Quant au <a class='close' data-dismiss='modal'>×</a> Qui est censé créer un lien vers la page d'accueil, pourquoi ne pas simplement supprimer le data-dismiss='modal' Et le faire agir comme un lien normal en utilisant un href='home.html' Standard.

Voici un code supplémentaire pour vous orienter dans la bonne direction pour utiliser AJAX pour soumettre le formulaire:

// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both

$('#modal-form').on('submit', function(){

  //Serialize the form and post it to the server
  $.post("/yourReceivingPage", $(this).serialize(), function(){

    // When this executes, we know the form was submitted

    // To give some time for the animation, 
    // let's add a delay of 200 ms before the redirect
    var delay = 200;
    setTimeout(function(){
      window.location.href = 'successUrl.html';
    }, delay);

    // Hide the modal
    $("#my-modal").modal('hide');

  });

  // Stop the normal form submission
  return false;
});
33
TheShellfishMeme

Pour obtenir le bouton de soumission , mettez-le dans le formulaire.

<div class="modal">
    <form id="modal-form" action="/tagging" data-remote="true" method="post">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>A Modal Form</h3>
        </div>
        <div class="modal-body">
            <input name="something" value="Some value" />
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>
</div>

Cependant, cela ajoute une marge inattendue au bas du modal. Bootstrap 2.0.2 a introduit le modal-form class pour résoudre ce problème ou vous pouvez le corriger vous-même avec une définition de style comme:

.modal > form {
    margin-bottom: 0;
}

Pour un lien vers une autre page lors de la fermeture du modal je vais avec TheShellfishMeme

En ce qui concerne le × qui est censé créer un lien vers la page d'accueil, pourquoi ne pas simplement supprimer le data-unlock = 'modal' et le faire agir comme un lien normal en utilisant un href = 'home.html' standard.

23
breigo

Avec HTML5, vous pouvez avoir quelque chose comme ceci:

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Tags</h3>
  </div>

  <div class="modal-body">
    <form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="&#x2713;" />
          <input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
        </div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class="modal-footer">
    <div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
  </div>
</div>

Cela s'appelle en HTML5 élément associé au formulaire bien sûr, si vous devez prendre en charge tous les navigateurs + anciens, vous devez utiliser JavaScript, mais vous pouvez utiliser JavaScript comme solution de rechange :)

15
panosru

Le problème de soumission du formulaire se situe dans bootstrap propre bibliothèque modale JS (bootstrap-modal.js) - Fondamentalement, l'événement de soumission est empêché en raison de la ligne # 204: ev.preventDefault (Pourquoi?).

Ma solution a été d'ajouter:

if(!$(e.target).parents('form'))
   e.preventDefault();

mais je ne sais pas quels problèmes cela va engendrer.

2
eithed