Im trying to use jQuery AutoComplete but all i get is a single item with all results all in it.
I have this ASP.Net WebMethod:
[WebMethod]
public static string FetchCompletionList(string term)
{
var json = JsonConvert.SerializeObject(CustomerProvider.FetchKeys(term, 8));
return json;
}
being called by this script:
$("[id$='txtLKey']").autocomplete({
minlength: 2,
source: function(request, response) {
$.ajax({
type: "POST",
url: "/Views/Crm/Json/Json.aspx/FetchCompletionList",
data: '{term: "' + $("[id$='txtLKey']") .val() + '", count: "8"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
response(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
alert(textStatus);
alert(errorThrown.toString());
}
});
}
});
And the result is this:
When what I actually want is a list of options the user can select i.e. each NZ should be an item in a list.
There are two problems here,
you need to pass data.d to response like response(data.d).
your value string is invalid it should be {"d":["NZ0008","NZ0015","NZ0017","NZ0018","NZ0026","NZ0027","NZ003??1","NZ0035"]}
Related
I write this ajax in view page in asp.net mvc:
<script type="text/javascript">
$(document).ready(function () {
$("#Shareitem").click(function (e) {
var serviceURL = '/Register/FirstAjax';
$.ajax({
type: "POST",
url: serviceURL,
data: '123',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
alert(data);
}
function errorFunc() {
alert('error');
}
});
});
</script>
and this is my action method in controller:
[HttpPost]
public ActionResult FirstAjax(string value)
{
string test = value.Trim();
return Json("PROF.VALI", JsonRequestBehavior.AllowGet);
}
but in this line:
string test = value.Trim();
get this error:
An exception of type 'System.NullReferenceException' occurred in UserRegister.dll but was not handled in user code
How can i solve that?thanks.
You need to send the data in a format that matches the name of the parameter of the method your posting to. Change the ajax data option to
data: JSON.stringify({ value: '123' }),
Alternatively, you can just use
data: { value: '123' },
and remove contentType: "application/json; charset=utf-8", option so it uses the default ('application/x-www-form-urlencoded; charset=UTF-8')
var jso = { "namep": "a", "age": "10" };
$.ajax({
type: 'POST',
url: '#Url.Action("gettestjsn","Cart")',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(jso),
success: function (data) {
alert(data.namep);
},
error: function () { alert("err"); }
});
this code always go to error function and i does not fire my mvc action,aslo i have a prop class which does match to this json obj. why is that i m new to json and jquery ajax please help
this is my action
public ActionResult gettestjsn(jso jso)
{
//do some here
return View();
}
Remove contentType from the ajax attributes and add
dataType: 'json',
This will work if the url is correct
this is how your code should look like
var jso = { "namep": "a", "age": "10" };
$.ajax({
type: 'POST',
url: '#Url.Action("gettestjsn","Cart")',
data: jso,
success: function (data) {
alert(data.namep);
},
error: function () { alert("err"); }
});
Also i would refrain from using alerts. Either use console.log or debug using the inspector in your browser (comes inbuilt with chrome) to see what your data from the server looks like.
Try like this,
var jso = { "namep": "a", "age": "10" };
$.ajax({
type: 'POST',
url: '/Cart/gettestjsn',
contentType: 'application/json; charset=utf-8',
data: jso,
success: function (data) {
alert(data.namep);
},
error: function (jqxhr, status, error) { alert("err:" + status + ':' + error); }
});
and your action should be,
[HttpPost]
public ActionResult gettestjsn(jso jso)
{
//do some here
return View();
}
Hope it helps.
I have to generate several graphs and each graph data I should get it from mvc controller.
so I am using the below jquery to do ajax calls from jquery to mvc
$(".emailgraphs").each(function () {
YAHOO.Report.Print("Email", $(this).attr("responsefield"), $(this).attr("id"), $(this).attr("metricid"));
});
Print: function (name, graphid, divid, metricid) {
try {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: m_oReport.ds,
data: JSON.stringify(m_oReport.printp(name, graphid, metricid)),
beforeSend: function () {
//Displays loading image before request send, till we get response.
//$("#" + divId).addClass("loading");
},
success: function (data) {
// if they define a success function (s), call it and return data to it.
if (typeof m_oReport.prints === "function") {
m_oReport.prints(data, divid, name)
}
},
error: function (err) {
$("#" + divid).html(err);
}
});
}
catch (err) { alert("catch"); }
}
The problem is the calls are asynchronous. sometimes I am getting one graph and sometime 2 like that and sometimes nothing.
Is there any fix for this?
try to use something like this
function getDataSync() {
return $.ajax({
type: "POST",
url: remote_url,
async: false,
}).responseText;
}
I am trying to bind the text box and the JQuery AutoComplete feature. When I checked the Firebug AJAX Request & Response it returns like the following. But the textbox is not showing any items. Could you please advise me, what I am doing wrong? Thanks.
Here is my coding:
$("#<%= TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
type: "POST",
dataType: "json",
data: {
'LocationID': "10543",
'Search': request.term
},
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.FullDrugName,
id: item.DrugID
}
}))
}
});
},
delay: 1,
minLength: 2,
select: function (event, ui) {
alert(ui.item.id);
}
});
DataType property is representing the type of data that you're expecting back from the server.
you define data type as json but server returns you a xml output. You should change your DataType property to xml
In addition to #fealin's answer, you're going to need to change the way you process the xml response. It doesn't look like you have a d property on the return data, and you also need to look for the correct nodes in the XML structure and pull out their text to build the response array that you return to the widget.
Based on the XML you've provided, it might look something like this:
$("#<%= TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
type: "POST",
dataType: "json",
data: {
'LocationID': "10543",
'Search': request.term
},
success: function (data) {
response($(data).find("Drug").map(function (_, el) {
var $el = $(el);
return {
label: $el.find("FullDrugName").text(),
value: $el.find("DrugID").text()
};
}));
});
},
delay: 1,
minLength: 2,
select: function (event, ui) {
alert(ui.item.id);
}
});
Here's an example that's just using the XML string (without an AJAX request): http://jsfiddle.net/J5rVP/29/
I've got a problem using ASP.NET MVC3, AJAX and JQUERY. I've got the following function
[HttpPost]
public bool Update(int id, FormCollection collection)
This is my jQuery Source:
$(document).ready(function () {
$('#btnUpdate').click(function (e) {
// Cancel default action
e.preventDefault();
var formCollection = $('#formId').serialize();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action","Controller")',
data: { id: $('#id').val(), collection: formCollection },
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
});
});
The id parameter submitted successfully, but the collection (FormCollection) includes an array with {[0]: 10000, [1]: collection}. I can't fix the problem. When I redesign the solution like this:
[HttpPost]
public bool Update(FormCollection collection)
$(document).ready(function () {
$('#btnUpdate').click(function (e) {
// Cancel default action
e.preventDefault();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action", "Controller")',
data: $('#formId').serialize(),
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
});
});
everything works fine. What I'm doing wrong in passing 2 parameter?
THX!!!
Try calling JSON.stringify() on your JSON:
data: JSON.stringify({ id: $('#id').val(), collection: formCollection })
$(document).ready(function () {
$('#btnUpdate').click(function (e) {
// Cancel default action
e.preventDefault();
var formCollection = $('#formId').serialize();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action","Controller")',
data: JSON.stringify({ id: $('#id').val(), collection: formCollection }),
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
});
});
you should have to pass the data with jsonstringify
This is the actual watch:
Parameter ID submitted successfully (Name=id, Wert=10000). Above id you can see formCollection including FORM.serialize() values of the ajax call. But the System.Web.Mvc.FormCollection including two keys only: id and collection! I expected
"Name"
"Address"
"Address_2"
...
I think if got a mistake in creating my ajax request, but I don't know why...
var customerNo = $('#fieldID').val();
var formCollection = $('#formID').serialize();
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action", "Controller")',
data: { id: customerNo, collection: formCollection },
dataType: 'json',
success: function (data) {
if (data) {
alert(data);
};
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
The following line generates an error:
data: JSON.stringify({ id: customerNo, collection: formCollection })
The parameters dictionary contains a null entry 'id' of non-nullable type 'System.Int32'...
Changed without effect:
data: { id: customerNo, collection: JSON.stringify(formCollection) },
Any ideas?
This is my idea (works!)
Add in a partial class from a model an string attribute, add this attribute manually in "data".
JS:
$.ajax({
cache: false,
type: 'POST',
url: '#Url.Action("Action", "Controller")',
data: $("form").serialize() + "&id=whatever",
dataType: 'json',
success: function (data) {
if (data) {
alert(data);
};
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error during process: \n' + xhr.responseText);
}
});
partialClass.cs Model:
public partial class TableName
{
public string id { get; set; }
}
Controller:
[HttpPost]
public bool Update(FormCollection collection){
var ID = collection.id;
}
Regards!