如何将表单数据发送到远程URL并以Bootstrap模式显示结果？

Question

I have a CakePHP form and I want to allow users to display a preview. So there is a preview submit button #btn_submit_preview and when user clicks the button, data from the form are serialized and sent to my controller. This controller saves the data and return HTML view output with preview:

 $('#btn_submit_preview').click(function (event) {
    var formData = $("#OfferAddForm").serialize();
    $.ajax({
        type: "POST",
        url: "/offers/preview/",
        data: formData,
        success: function (data) {
            $('#content').html(data);
            $('#myModal').modal('show');
        }
    });
    event.preventDefault();
    return false;
});

After data are passed back to the page I need to display them in a Boostrap modal window. I have these HTML source code for 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" id="content">
        </div>
    </div>
</div>

Question: is the way how I open the "preview" correct or should I do something else? I am quite sure about assigning returned data back to modal window - $('#content').html(data); maybe I should return all HTML source for modal window with preview data and open it only...?

Answer 1

I think what you have now is perfectly fine. I wouldn't return the HTML source for the entire modal, I'd just grab the HTML for the email and display it on my modal, this helps to achieve a better separation of concerns IMO.