Requisição AJAX

by Ivan Ferrer

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<br>
<a data-toggle="modal" data-id="123456" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">Testando</a>
<p>&nbsp;</p>


<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p id="result">some content</p>
         <form name="teste" method="post">
         <input type="text" name="bookId" id="bookId" value=""/>
         <input type="button" value="Enviar" id="sender">
         </form>
    </div>
</div>

JavaScript

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
});
$(function(){
$('#sender').on('click', function(){
   enviarDado(document.teste.bookId.value);
});
function enviarDado(val) {
$.ajax({
        cache:false,
        type: 'POST',
        url: '/echo/json/',
        data: {
            json:'{"dado":"Dado enviado: '+val+'"}'
        },
        success: function(data) {
            $('#result').html(data.dado);
        },
        error:function(error){
            alert('there was an error');  
        },
        dataType: 'json'
    });
}
    
});