Pass values to bootstrap modal in jQuery success function

Question

I have a Bootstrap modal inside a jQuery success function. I want to show some value in the model.

My model:

<div class="modal fade" id="REQModal" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header btn-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Error Message</h4>
            </div>
            <div class="modal-body">
                 <div id="num"></div>
                <p>Error has occured!.</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

My function:

$.ajax({
                url: $('#addRequest').val(),
                type: "POST",
                data: { Request: Request },
                dataType: "json",
                success: function (refNo) { // refNo comes here.
                    $("#num").val(refNo);
                    $("#REQModal").modal('show'); // modal popup's but refNo doesn't show.
                }
            });

Answer 1

Try this

$("#num").html(refNo);

Answer 2

try:

$("#num").html(refNo); 

instead of

$("#num").val(refNo);