display function result in page body instead of message box

Discussion in 'jQuery' started by efes, Nov 8, 2012.

0
  1. #1
    Hi all, help me please to get started with jquery.

    I've got function WCFJSON



    function WCFJSON() {
    var userid = "2";
    Type = "POST";
    Url = "Service.svc/GetUser";
    Data = '{"Id": "' + userid + '"}';
    ContentType = "application/json; charset=utf-8";
    DataType = "json"; varProcessData = true;
    CallService();
    }

    ​





    This function is called when document is ready:



    $(document).ready(
    function () {
    WCFJSON();
    }
    );

    ​





    As a result I get dialog box with value corresponding to userid = "2".

    Now the question is how do I display the result in page body instead of dialog box? As far as I can understand, I should mention this function in


    <body>
    <!--...-->
    </body>

    ​

    Help me plase with correct syntax for doing that.


    here is my htmlpage.htm code:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery.js"></script>
    <script src="jqgrid_demo40/js/i18n/grid.locale-ua.js" type="text/javascript"></script>
    <script src="jqgrid_demo40/js/jquery.jqGrid.min.js" type="text/javascript"></script>



    <script type="text/javascript">


    var Type;
    var Url;
    var Data;
    var ContentType;
    var DataType;
    var ProcessData;


    function WCFJSON() {
    var userid = "2";
    Type = "POST";
    Url = "Service.svc/GetUser";
    Data = '{"Id": "' + userid + '"}';
    ContentType = "application/json; charset=utf-8";
    DataType = "json"; varProcessData = true;
    CallService();
    }


    // Function to call WCF Service
    function CallService() {
    $.ajax({
    type: Type, //GET or POST or PUT or DELETE verb
    url: Url, // Location of the service
    data: Data, //Data sent to server
    contentType: ContentType, // content type sent to server
    dataType: DataType, //Expected data format from server
    processdata: ProcessData, //True or False
    success: function(msg) {//On Successfull service call
    ServiceSucceeded(msg);
    },
    error: ServiceFailed// When Service call fails
    });
    }


    function ServiceFailed(result) {
    alert('Service call failed: ' + result.status + '' + result.statusText);
    Type = null;
    varUrl = null;
    Data = null;
    ContentType = null;
    DataType = null;
    ProcessData = null;
    }




    function ServiceSucceeded(result) {
    if (DataType == "json") {
    resultObject = result.GetUserResult;


    for (i = 0; i < resultObject.length; i++) {
    alert(resultObject);
    }


    }


    }


    function ServiceFailed(xhr) {
    alert(xhr.responseText);


    if (xhr.responseText) {
    var err = xhr.responseText;
    if (err)
    error(err);
    else
    error({ Message: "Unknown server error." })
    }


    return;
    }


    $(document).ready(
    function () {
    WCFJSON();
    }
    );
    </script>




    <style>img{ height: 100px; float: left; }</style>
    </head>
    <body>




    <!-- ... -->
    </body>
    </html>



    ​
     
    efes, Nov 8, 2012 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2 
    
// Function to call WCF Service
function CallService() {
    $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        success: function(msg) {//On Successfull service call
[COLOR=#ff0000]           //ServiceSucceeded(msg);
           //set the value of an element like a textbox
           //or the innerHtml of a div
           //to msg here.
[/COLOR]        },
        error: ServiceFailed// When Service call fails
    });
}
    Code (markup):
     
    Rukbat, Nov 22, 2012 IP