CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netajax
Azeristar
Azeristar

Reputation: 127

ASP.Net Ajax - JavaScript: How to display with returned variable in HTML

I have a webmethod which returns me following string:

{"d":"Here you will find more additional data."}

But in the code behind my string is only declared as 

string result = "Here you will find more additional data"

This string is going to be used for a modal view, which pop-ups by clicking into a HTML table row. By clicking the row of the HTML table, a column will be read, and passed to the webmethod (in codebehind). How can I display the string without {"d":"}?

Here is my javascript code:

 function GetModalDetails() {
        $('tbody tr').click(
            function () {
                var id = $(this).data('id');
                var JSONData = '{\'id\':' + JSON.stringify(id) + '}';
                makeAjaxCall(JSONData, id);
            });

        function makeAjaxCall(JSONData, id) {
            $.ajax({
                url: "<%= ResolveUrl("TestPage.aspx/getDetails") %>",
                data: JSONData,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var result = msg;
                    document.getElementById("ModalBody").innerHTML = JSON.stringify(result);
                    document.getElementById("ModalHead").innerHTML = "Details for" + JSON.stringify(id);
                }
            })
        }
    }

and this is my HTML Modal Code:

  <!-- Modal -->
<div class="modal fade" id="infoModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title" id="ModalHead">Auftragdetails</h3>
            </div>
            <div class="modal-body">
                <h5 class="text-center" id="ModalBody">Hier werden genauere Informationen zu dem geklickten Auftrag stehen.</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

So how can I display the string correct?

Is it a good idea to give the string some HTML tags, Modal content is styled like I need it? But then I will have again the problem with the

{"d":""}

Please help me :)

Upvotes: 0

Views: 521

Answers (1)

Mihir Solanki
Mihir Solanki

Reputation: 333

This should work

function makeAjaxCall(JSONData, id) {
        $.ajax({
            url: "<%= ResolveUrl("TestPage.aspx/getDetails") %>",
            data: JSONData,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                document.getElementById("ModalBody").innerHTML = msg.d;
                document.getElementById("ModalHead").innerHTML = "Details for" + JSON.stringify(id);
            }
        })
    }

Here is the code which render the message in the modal body:

document.getElementById("ModalBody").innerHTML = msg.d;

Upvotes: 1

Related Questions