Click here to Skip to main content
11,569,164 members (61,779 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# jQuery
How to call web services mwethod in html page my script like this

<script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
 
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
      
           
            $("#btnok").click(function () {
                //alert('');
                $.ajax({
                    type: "POST",
                    url: "http://localhost:3658/HostingService.asmx/SETPostJobDetails",
                    data: "{title:'" + $("#title").val() + "',C.Name:'" + $("#name").val() + "',city:'" + $("#city").val() + "',state:'" + $("#state").val() + "',date:'" + $("#date").val() + "',duration:'" + $("#duration").val() + "',pay:'" + $("#pay").val() + "',industry:'" + $("#industry").val() + "',type:'" + $("#type").val() + "',status:'" + $("#status").val() + "',description:'" + $("#description").val() + "',qualification:'" + $("#qualification").val() + "',}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    error: OnError
                });
            });
        });
 
        function OnSuccess(data, status) {
            alert('The addition of two number is : ' + data.d);
        }
 
        function OnError(data, status, error) {
            alert(data.d);
        }      
    </script>

my html page
<tr>
    <td width="25%" align="left" valign="middle">
        Job ID :
    </td>
    <td width="75%" align="left" valign="middle">
        <input id="id" type="text" class="textbox2" name="name" size="30">
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Title :
    </td>
    <td align="left" valign="middle">
        <input id="title" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Enter Company Name :
    </td>
    <td align="left" valign="middle">
        <input id="name" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        City :
    </td>
    <td align="left" valign="middle">
        <input id="city" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        State :
    </td>
    <td align="left" valign="middle">
        <input id="state" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Post Date :
    </td>
    <td align="left" valign="middle">
        <input id="date" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Duration :
    </td>
    <td align="left" valign="middle">
        <input id="duration" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Pay Rate :
    </td>
    <td align="left" valign="middle">
        <input id="pay" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Industry :
    </td>
    <td align="left" valign="middle">
        <input id="industry" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Type :
    </td>
    <td align="left" valign="middle">
        <input id="type" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Enter Job Status :
    </td>
    <td align="left" valign="middle">
        <input id="status" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Description :
    </td>
    <td align="left" valign="middle">
        <textarea id="description" name="" cols="" rows="" class="textarea1">&nbsp;</textarea>
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Qualification :
    </td>
    <td align="left" valign="middle">
        <textarea id="qualification" name="" cols="" rows="" class="textarea1">&nbsp;</textarea>
    </td>
</tr>
<tr>
    <td align="center" valign="middle">
        &nbsp;
    </td>
    <td align="center" valign="middle">
        <input id="btnok" name="Submit" type="button" value="Submit" class="btn2" border="0" /><input
            name="reset" type="button" value="Reset" class="btn2" border="0" />
    </td>
</tr>


please help me

thanks and regards
Posted 2-Jan-13 23:42pm
Edited 2-Jan-13 23:52pm
DaveAuld182.2K
v2
Comments
Tadit Dash at 3-Jan-13 7:28am
   
Are you facing any problem with this code?
If yes, please tell us the problem.
Santhosh23 at 3-Jan-13 8:10am
   
Yes, get the OnError alert box, and i dont get the data values and always i got undefined values in alert box. and object xmlhttprequest error.. this is are me facing the problems. please help me.. thank and regards
Tadit Dash at 3-Jan-13 8:43am
   
Write URL like below...
url: "HostingService.asmx/SETPostJobDetails".
Check if it works or not?
Santhosh23 at 3-Jan-13 9:08am
   
just now am tired.. but not working and already i added [ScriptService] method in .asmx page..
Tadit Dash at 3-Jan-13 9:24am
   
Then please post the codes of asmx service.
Santhosh23 at 3-Jan-13 9:33am
   
ok this is my services code

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string SETPostJobDetails(string Title, string Type, string Description, string Qualification, string Compensation, string openings, string city,
string state, string name, string phone, string email, string date, string zipcode, string job_categories, string client_id)
{
DataSet ds = new DataSet();
try
{
SqlDataAdapter adp = new SqlDataAdapter();
adp.SelectCommand = new SqlCommand();
adp.SelectCommand.CommandType = CommandType.StoredProcedure;
adp.SelectCommand.Connection = (SqlConnection)OpenConnection1();
adp.SelectCommand.CommandText = "SP_POST_JOBDETAILS_SET";
SqlParameter[] Parameters = new SqlParameter[15];
Parameters[0] = new SqlParameter("@JOB_TITLE", SqlDbType.VarChar, 100);
Parameters[0].Value = Title;

Parameters[1] = new SqlParameter("@JOB_TYPE", SqlDbType.VarChar, 50);
Parameters[1].Value = Type;

Parameters[2] = new SqlParameter("@DESCRIPTION", SqlDbType.VarChar, 5000);
Parameters[2].Value = Description;

Parameters[3] = new SqlParameter("@QUALIFICATIONS", SqlDbType.VarChar, 1000);
Parameters[3].Value = Qualification;

Parameters[4] = new SqlParameter("@COMPENSATION_RANGE", SqlDbType.VarChar, 200);
Parameters[4].Value = Compensation;

Parameters[5] = new SqlParameter("@NO_OF_OPENINGS", SqlDbType.VarChar, 50);
Parameters[5].Value = openings;

Parameters[6] = new SqlParameter("@CITY", SqlDbType.VarChar, 200);
Parameters[6].Value = city;

Parameters[7] = new SqlParameter("@STATE", SqlDbType.VarChar, 100);
Parameters[7].Value = state;

Parameters[8] = new SqlParameter("@CONTACT_NAME", SqlDbType.VarChar, 500);
Parameters[8].Value = name;

Parameters[9] = new SqlParameter("@CONTACT_PHONE", SqlDbType.VarChar, 50);
Parameters[9].Value = phone;

Parameters[10] = new SqlParameter("@EMAIL", SqlDbType.VarChar, 100);
Parameters[10].Value = email;

Parameters[11] = new SqlParameter("@START_DATE", SqlDbType.DateTime);
Parameters[11].Value = Convert.ToDateTime(date);

Parameters[12] = new SqlParameter("@ZIPCODE", SqlDbType.VarChar, 20);
Parameters[12].Value = zipcode;

Parameters[13] = new SqlParameter("@JOB_CATEGORIES", SqlDbType.VarChar, 200);
Parameters[13].Value = job_categories;

Parameters[14] = new SqlParameter("@CLIENT_ID", SqlDbType.Int);
Parameters[14].Value = int.Parse(client_id);

adp.SelectCommand.Parameters.AddRange(Parameters);
adp.Fill(ds);
string[][] JaggedArray = new string[ds.Tables[0].Rows.Count][];
//int i = 0;
//Dictionary<object, object> resultMain = new Dictionary<object, object>();
List<object> resultMain = new List<object>();
foreach (DataRow rs in ds.Tables[0].Rows)
{

Dictionary result = new Dictionary();

foreach (DataColumn dc in ds.Tables[0].Columns)
{

result.Add(dc.ColumnName, rs[dc].ToString());

}

resultMain.Add(result);


//i = i + 1;
}

JavaScriptSerializer js = new JavaScriptSerializer();

string strJSON = js.Serialize(resultMain);
return strJSON;
}
catch
Santhosh23 at 4-Jan-13 2:24am
   
i got the new error in like. this error shows firebug
Error while calling a function using jquery-ajax ("NetworkError: 500 Internal Server Error)
Tharaka MTR at 3-Jan-13 10:28am
   
could you please modify your error function as follows and give us the output

function OnError(data, status, error) {
alert(data.responseText);
}
Santhosh23 at 4-Jan-13 1:58am
   
hi tharaka MTR,
just now am modify the script in On-error function. but it shows the empty alert box only. how to solve my problem please help me.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

First you have to check whether your web service is configured to access using client side script. If not, it will raise the error message “500 – Internal server error”.
To call the webservice using client side scipt, web service should configure with [ScriptService] attribute.

For more details how to do this please check the following URL
http://tharakaweb.com/2013/01/01/web-service-and-script-service/[^]

by changing the error function you can see the detail error response as follows

function OnError(data, status, error) {
      alert(data.responseText);
}

see the error message, it is occurred due to the serialization issue. Please check Dictionary object and serialization

{"Message":"Cannot convert object of type "System.String" to type "System.Collections.Generic.IDictionary`2[System.String,System.Object]","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}
  Permalink  
v3
Comments
Santhosh23 at 4-Jan-13 4:28am
   
{"Message":"Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic.IDictionary`2[System.String,System.Object]\u0027","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

i got the this type errors on my alert. am modifythe my script like below


<script language="javascript" type="text/javascript">


$(document).ready(function () {


$("#btnok").click(function () {


var title = $("#title").val();
var name = $("#name").val();
var city = $("#city").val();
var state = $("#state").val();
var date = $("#date").val();
var duratin = $("#duration").val();
var pay = $("#pay").val();
var type = $("#type").val();
var industry = $("#industry").val();
var status = $("#status").val();
var description = $("#description").val();
var qualification = $("#qualification").val();
// var data = { title: title, Name: name, city: city, state: state, date: date, duration: duratin, pay: pay, industry: industry, type: type, status: status, description: description, qualification: qualification };
var data = { title:$("#title").val(),name: $("#name").val(), city: $("#city").val(), state: $("#state").val(), date: $("#date").val(),duration:$("#duration").val(),pay:$("#pay").val(),type: $("#type").val(),industry:$("#industry").val(),status:$("#status").val(),description:$("#description").val(),qualification: $("#qualification").val() };
var data = JSON.stringify(data);
alert(data);
$.ajax({
type: "POST",
url: "http://localhost:3658/HostingService.asmx/SETPostJobDetails",
data:JSON.stringify(data),//"{'title':" + title + ",'C.Name':" + name + ",'city':" + city + ",'state':" + state + ",'date':" + date + ",'duration':" + duratin + ",'pay':" + pay + ",'industry':" + industry + ",'type':" + type + ",'status':" + status + ",'description':" + description + ",'qualification':" + qualification + "}",
// data: // "{'title':'" + $("#title").val() + "','C.Name':'" + $("#name").val() + "','city':'" + $("#city").val() + "','state':'" + $("#state").val() + "','date':'" + $("#date").val() + "','duration':'" + $("#duration").val() + "','pay':'" + $("#pay").val() + "','industry':'" + $("#industry").val() + "','type':'" + $("#type").val() + "','status':'" + $("#status").val() + "','description':'" + $("#description").val() + "','qualification':'" + $("#qualification").val() + "'}",
contentType: "application/json;charset=utf-8",
processData: false,
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (data, status, error)
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

hi all,

am solved my problem small modification in script code
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script src="http://localhost:3658/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

<script language="javascript" type="text/javascript">
$("#btnok").live("click", function () {
var username = $("#name").val();
var password = $("#password").val();
var clientid = $("#clientid").val();
$.ajax({
type: 'POST',
url: 'HostingService.asmx/SETusers',
data: "{username:" + JSON.stringify(username) + ",password:" + JSON.stringify(password) + ",clientid:" + JSON.stringify(clientid) + "}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data, status) {
alert(data.d);
}
});
});


code is working fine..

thanks and regards,
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


Advertise | Privacy | Mobile
Web03 | 2.8.150624.2 | Last Updated 4 Jan 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100