Twitter Bootstrap 2 form modale dialoghi

Question

Ho il seguente modulo di dialogo:

<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> 

e le sue 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> 

Quando scatto x, che è <a class='close' data-dismiss='modal'>×</a>, la forma chiudere lasciandomi su la pagina corrente, mentre mi piacerebbe andare sul posto.

Anche il pulsante "Aggiungi tag", che è <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> non fare nulla, mentre facendo clic su ENTER sulla tastiera fa il lavoro e mi piacerebbe fare clic su "Aggiungi tag" ha fatto lo stesso.

Non sono così abile su JS e prog front-end, quindi qualsiasi aiuto è benvenuto.

Answer 1

Il pulsante di invio è esterno ai tag modulo.
Non saprà quale modulo inviare.

Utilizzare javascript per collegarlo al modulo.

<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> 

Per quanto riguarda il <a class='close' data-dismiss='modal'>×</a> che dovrebbe collegare alla home page, perché non solo rimuovere il data-dismiss='modal' e farla agire come un normale link utilizzando uno standard href='home.html'.

Ecco alcuni codice aggiuntivo per puntare nella giusta direzione per l'utilizzo di AJAX per inviare il modulo:

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

Answer 2

Il problema per la presentazione modulo si trova all'interno di una libreria modale JS bootstrap (bootstrap-modal.js) - Evento di invio basicaly è stato impedito a causa della linea n. 204: ev.preventDefault (perché?).

La mia soluzione era quella di aggiungere:

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

però non so quali problemi si pongono anche.

Answer 3

Con HTML5 si può avere qualcosa di simile:

<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> 

Questo chiama in HTML5 form-associated element di partecipazione al corso, se è necessario supportare tutti i browser + quelli vecchi, allora avete bisogno di andare con JavaScript, ma è possibile utilizzare JavaScript come fallback :)

Answer 4

Per ottenere il pulsante di invio, inseritelo nel modulo.

<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> 

Tuttavia, questo aggiunge un margine inaspettato sul fondo del modale.Bootstrap 2.0.2 introduced the modal-form class per risolvere questo problema o si può risolvere il problema da soli con una definizione di stile come:

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

Per collegamento a un'altra pagina quando si chiude il modale vado avanti con TheShellfishMeme

Per quanto riguarda il × che si suppone che colleghino alla homepage, perché non rimuova solo data-dismiss = 'modal' e fallo agire come un normale link usando uno standard href = 'home.html'.

Answer 5

FYI È possibile effettuare le seguenti operazioni (scritto in giada):

.modal.hide.fadel 
    form.modal-form 
    .modal-header 
     button.close type='button' data-dismiss="modal" x 
     h3= t 'translation' 
    .modal-body 
     p hello 
    .modal-footer 
     button.btn data-dismiss="modal" href="#" = t 'close' 
     a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'