Search jQuery

jQuery Forum

display function result in page body instead of message box

in Getting Started • 9 years ago

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.

Replies(13)

jay.blanc..

Re: display function result in page body instead of message box

9 years ago

What is generating the dialog box?

mandylaz

Re: display function result in page body instead of message box

9 years ago

Hi Jay,

I'm very new to jquery and wcf, as far as I can understand it's CallService function:

// 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
});
}

alano999

Re: display function result in page body instead of message box

9 years ago

Hi mandylaz.

Please will you share with us the code of your CallService() function. That seems to be where the action takes place, but you've not listed it.

Hope to help.

Alan

(we all posted at same time!)

jay.blanc..

Re: display function result in page body instead of message box

9 years ago

Now it appears that the dialog is created in ServiceSucceeded(). Can you post the code to that?

mandylaz

Re: display function result in page body instead of message box

9 years ago

alano999, jay.blanchard,

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[i]);
}

}

}

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>

alano999

Re: display function result in page body instead of message box

9 years ago

Hi mandylaz.

I expect Jay will respond similarly. The reason your result is appearing in a popup box is that you are using .alert(), which is a JavaScript popup method.

I am not sure how you wish to display the results, or even what form the results take (it looks like JSON, but the actual structure is not specified). Let's assume we will write the results as paragraphs direct to document body purely for demonstration purposes.

So, to solve your literal question, replace alert(resultObject[i]); with...

$("<p>").text(resultObject[i]).appendTo("body");

...assuming the resultObject array consists of plain text strings.

You say you are a beginner, so let me give you some constructive feedback and a worked solution.

You have two functions named ServiceFailed. I'm not sure whether you were hoping that JavaScript allows simple overloading like C# for example, but it doesn't. I expect each different type of browser will behave differently with duplicate function names. Some may tolerate it and use either the first or last ignoring the other; other browsers may crash. Either way, you should remove one of them.

In document.ready you are initialising some variables (some with local scope and some with global scope). Since JavaScript and jQuery allows a fair degree of Object Oriented structuring, and since $.ajax() will accept an object instead of individual parameters, it is usually neater and more flexible/portable to use object notation.

You are nesting several very similar functions, without adding any helper methods. The nesting therefore serves no purpose (at the moment) and could be removed. I do notice that in the Success handler you are testing whether DataType is JSON. Is this because you do intend to add abstraction layers? If not, it is a waste of time. I have omitted the check for JSON because it seems to serve no purpose at the moment. We need to know more about your design intentions if we are to advise further.

Also, when you are invoking your ajax Success or Failure callback functions, because you have made them into named functions (this is the way I normally program too) you do not also need to add the "immediate" function structure against the success: (etc.) callback definitions. You can simply supply the name of the function (without parameters) to the callback properties. Refer to my revised code below and you'll see what I mean...

function WCFJSON() {
var userId = 2;
//define a dataset object rather than individual parameters
var options = {
type: "POST",
url: "Service.svc/GetUser",
data: { Id: userid },
contentType: "application/json; charset=utf-8",
dataType: "json",
//Note: processData not included because "true" is default
success: ServiceSucceeded,
error: ServiceFailed
};
$.ajax(options);
}
function ServiceSucceeded(data) {
$.each(data.GetUserResult, function (i, result) {
//assumes GetUserResult elements are strings
$("<p>").text(result).appendTo("body");
});
}
function ServiceFailed(data) {
$("<p>").text("Service call failed: " + data.status + data.statusText).appendTo("body");
}
$(document).ready(function () {
WCFJSON();
});

I hope this helps you.

Best wishes,

Alan

mandylaz

Re: Re: display function result in page body instead of message box

9 years ago

Alan, thanks for your reply!

This works great

$("<p>").text(resultObject[i]).appendTo("body");

mandylaz

Re: Re: display function result in page body instead of message box

9 years ago

That's strange, but code doesn't work for me with commented ServiceFailed (1) or ServiceFailed (2) function...

Upd: I use Chrome version 22.0.1229.94 m

alano999

Re: display function result in page body instead of message box

9 years ago

Hi mandylaz.

What do you mean by "commented ServiceFailed (1) or ServiceFailed (2) function... "? Like I said, you can only have one function with any name.

Please paste the failing code here so we can see what you have done.

I am also using Chrome v22 (and v24 Canary build), and can confirm that my proposed code worked in Chrome.

Best wishes,

Alan

mandylaz

Re: Re: display function result in page body instead of message box

9 years ago

Alan,

well,

commented ServiceFailed (1) or ServiceFailed (2) function

I mean I tried to remove one of double function by pasting comment "//".

I've got no doubt your code works for you, maybe I've done some other primitive mistake, 'cause it is hard for me in the very beginning. Please find my html code below.

The other thing I can't understand is why code doesn't work again after previous successful try. I tried to change different strings just randomly... So when I change this value (for example, 3 instead of 1) then it works again:

var userid = "3";

It starts ok just once and then I should change this value again, otherwise it doesn't work. Do you see some logic here?

full html 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 = "3";
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++) {
$("<p>").text(resultObject[i]).appendTo("body");
//alert(resultObject[i]);
//document.write(resultObject[i] + "<br>");

}

}

}

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();
}
);

//$('body').append('<div id="myDiv">I was created dynamically!</div>');

</script>

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


</body>
</html>

alano999

Re: display function result in page body instead of message box

9 years ago

Hi mandylaz.

Firstly, I can see a problem within your WCFJSON() function. You need to remove the highlighted outer single quotes in this line because you should be creating an actual JavaScript object {...properties...} not a string representation of it (which is what happens when you add quotes). Furthermore, you do not need to double-quote userid. Remove all highlighted parts..

Data = ' {"Id": "' + userid + '"} ';

For clarity, all you need is this...

Data = { Id: userid };

...jQuery will know to add userid as a string value (when appropriate).

Now let's look at the problem where the ajax works only once with any particular userid. This is because the browser has decided for you that it will cache the request because you have already done it once. If you do not wish this default action then you can simply add cache: false, to the list of options in your $.ajax() invocation. jQuery will then add an extra, changing, querystring parameter each time so that the browser thinks you are making a different request.

I cannot think why your ServiceFailed functions are not being commented out successfully. That is really strange. Is there any reason why you need both versions? Perhaps you could simply give them different names (such as ServiceFailed1 and ServiceFailed2) rather than comment one out, then change the error: property value within your $.ajax() invocation depending upon which one you wish to use?

As a quick reminder: within $.ajax() you should simplify this line as highlighted (like you have got for error: ServiceFailed) because you are unnecessarily chaining two calls...

success: ServiceSucceeded,

Hope that helps.

Regards,

Alan

mandylaz

Re: Re: display function result in page body instead of message box

9 years ago

Alan,

this option works great:

cache: false

This time one of ServiceFailed function is commented out successfully. I think I didn't do it in correct way last time, can't imagine something else. I'm "self-educated programmer" (with finances diploma), so I'm glad even for those poor results.

These changes didn't work:

Data = ' {"Id": "' + userid + '"} ';

Now code returns error in dialog box:

http://s9.postimage.org/n69vj6u0v/wcf_error_091112_0001.png

I'm having troubles to simplify code to avoid chaining two calls at this moment... But I'm working on it.

Maybe you can help me understand further:

1) how do I count all possible userid values?

2) how do I display all possible results?

3) how do I display two columns with all userid and resulting values?

alano999

Re: display function result in page body instead of message box

9 years ago

Hi again mandylaz.

I am struggling to understand why, to call $.ajax() you have so many layers of calls. Accepting this, on the assumption that you are trying to abstract your code into layers, perhaps it would be helpful if I told you that, in JavaScript, functions can also be stored in variables.

I am saying this because it seems in WCFJSON() you are setting abstraction properties for passing into CallService(), yet within CallService you are breaking that pattern by using hard-coded values for the success and error handlers. You can, if you wish, present those functions in to CallService() as variables too. For example, you could add 2 more vars... SuccessCallback and ErrorCallback, then inside WCFJSON() you could set them to the appropriate handler functions.

You can do so by adding this at the beginning of your code...

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

And inside WCFJSON() function add this...

function WCFJSON() {
var userid = "3";
Type = "POST";
Url = "Service.svc/GetUser";
Data = { Id: userid }; //corrected as per previous post
ContentType = "application/json; charset=utf-8";
DataType = "json"; varProcessData = true;
SuccessCallback = ServiceSucceeded;
ErrorCallback = ServiceFailed1; //"ServiceFailed1" named as per last post
CallService();
}

And finally, within CallService, modify the code to use your new variables...

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: SuccessCallback, {//On Successfull service call
error: ErrorCallback // When Service call fails
});
}

It is most unusual that you are using global variables as a mechanism for passing parameters to the $.ajax() inside CallService(), but at least the above would then mean that EVERYTHING within CallService() is now parametised.

Hope that helps.

Regards,

Alan

Top Reply

Response title

Attachments

jQuery Forum

display function result in page body instead of message box

Replies(13)

Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: Re: display function result in page body instead of message box

Re: Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Re: Re: display function result in page body instead of message box

Re: display function result in page body instead of message box

Statistics

Tags

Actions