CODEWITHSUNDEEP
javascriptc#jqueryjsonmodel-view-controller
Roshan
Roshan

Reputation: 167

How to access Json return value in popup in jquery

This is my Json function. Using doAjax function i access the value from controller and i gives me the value.

    function doAjax(type, url, data, callback) {
    $.ajax({
        type: type,
        url: url,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {          
            callback(data);           
        },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });
}

here is my jquery code on button click. when i use debugger it have the values.

 $('.btn-setting').click(function () {       
    var data = "";
    doAjax("GET", "/Dashboard/OrderDetails/", data, function (result) {
        data = result;
        for (var i = 0; i < 1; i++) {
            var Html = "<ul><li><span>Name</span></li><li>??Name??</li></ul><ul><li><span>AirCraft Type</span></li><li>??AirCraftType??</li></ul>;
            Html = Html.replace("??Name??", data.Title + " " + data.FirstName + " " + data.LastName);
            Html = Html.replace("??AirCraftType??", data.AirCraftType);             
        }
    });
});

and here is my div and i want to show my json value in div popup.

<div class="modal hide fade" id="myModal">
    <div class="modal-body">

    </div>
</div>

So please help me to get the values on popup. Thanks in advance

Upvotes: 0

Views: 1954

Answers (4)

Moe
Moe

Reputation: 1599

Use the open function to load your AJAX result in your dialog. 

$('.btn-setting').click(function ()
     $("#myModal").dialog({
                    title: 'Dialog Title',
                    autoOpen: false,
                    resizable: true,
                    height: 350,
                    width: '550px',
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {

                        $.ajax({
                            url: url //Your AJAX call URL,
                            cache: false,
                            context: this,
                            success: function (result) {
                                $(this).html(result);
                            }
                        });


                    },
                    close: function (event, ui) {
                        }
                    }
                });
                });

Upvotes: 0

Vikas Kumar
Vikas Kumar

Reputation: 110

var data = [ {title:'tt', FirstName:'name first', LastName:'last name', AirCraftType:'Air Craft'}, {title:'tt1',FirstName:'name first1',LastName:'last name1',AirCraftType:'Air Craft 1'} ];

    var Html = "";
    $(data).each(function(i, value){
      Html = Html+ here your code ;
        //here you get value.title ,value.FirstName ...
    });
    $('div.modal-body', $('#myModal')).html(Html);

Upvotes: 0

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

assuming you want to put the content inside modal-body,

using jquery:

$('.modal-body').html('html string')

using javascript:

document.getElementsByClassName('modal-body')[0].innerHTML='html string'

Upvotes: 2

shine
shine

Reputation: 100

Try like this

success: function (data) { $('.modal-body').dialog(); }

or you can append data

Upvotes: 0

Related Questions