Twitter Bootstrap Modale De La Soumission Du Formulaire

Je suis un débutant dans Twitter Bootstrap et je suis en train de traiter un formulaire à partir d'une modal box, qui est également chargé avec Ajax. Le problème est que je ne sais pas comment l'utiliser. J'ai cherché sur google pendant des heures, mais je ne pouvais pas trouver un bon exemple.

J'ai utilisé jquery ui avant et je suppose que cela pourrait être presque la même.
Je voudrais savoir les suivantes:

  1. Comment puis-je charger un fichier qui contient un formulaire avec Ajax
  2. Fonctionne tout simplement utiliser les sélecteurs (par exemple, $('#item');) juste après que le formulaire a été chargé, pour obtenir les valeurs saisies dans les formulaires
  3. Comment puis-je lier le bouton envoyer de la modale d'envoyer le formulaire par le biais de l'Ajax ou un autre fichier

Je vous en seront reconnaissants de l'aide et je peux fournir un exemple de formulaire ci-dessous:

    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Submit a link</h3>
    </div>
    <div class="modal-body">
    <div id="msgholder1"></div>
    <div id="msg-loader"></div>
    <form action="../ajax/controller.php" data-async data-target="#msgholder1" id="add-link-form" method="POST">
    <table id="theform">
    <tr>
    <td>URL:</td>
    <td><input type="text" name="url" size="45" class="text ui-widget-content ui-corner-all" id="url" /></td>
    </tr>
    <tr>
    <td>Quality:</td>
    <td><select name="quality" id="quality">
          <option value="0">Pick One ...</option>
          <option value="1">CAM</option>
          <option value="2">TS</option>
          <option value="3">DVD</option>
    </select><br />
    </td>
    </tr>
    <tr>
    </fieldset>
    </form>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>

Tout type de documents connexes est également utile.

Merci!

OriginalL'auteur Comforse | 2012-10-06

  1. 18

    Après quelques heures de recherche et de travail, j'ai obtenu le travail suivants Ajax Modal script:

    <script type="text/javascript">
$(document).ready(function() {
  $('#addlink').on('click', function(event) {
    var href = SITEURL + '/modules/movies/addlink.tpl.php?movie_id=<?php echo $movie->id; ?>';
    $.get(href, function(response) {
      $('.modal').html(response);
      $('.modal').modal({keyboard:true});
      $('button#submit_link').bind('click', function()
        {
        $('.modal-body').html('<p>Loading ...</p>');
        $.ajax({
                    type: 'post',
                    url: SITEURL + "/ajax/controller.php",
                    data: 'action=report_link',
                    dataType : 'html',
                    context: $(this),
                    success: function (msg) {
                        $(".modal-body").html(msg);
                    }
                });
        });
    });
    event.preventDefault();
  });
});
</script>
    Un point pour trouver comment le faire et l'affichage de l'emballage de votre solution.

    OriginalL'auteur Comforse