JQuery AutoComplete with ASP.Net - asp.net

Below is my JavaScript
<script>
$(function () {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
$("#city").autocomplete({
source: function (request, response) {
$.ajax({
url: "getpostcodes.aspx",
dataType: "jsonp",
data: {
like: request.term
},
success: function (data) {
response($.map(data.RegionList, function (item) {
return {
label: item.Detail,
value: item.Detail
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
And below is my JSON Returned by the server
{"RegionList":[{"Detail":"2250, GOSFORD"}]}
But my auto complete doesn't show up the result? am i doing anything wrong?

What is the HTTP Status code response? I had problemas sometimes because I received the answer, but the status code was 500

Related

hello.js Work Login But publish is not work

Sorry, My english is poor.
I'm make some home page, that is gamedict.com.
this home page .Net framework 4.5 and Webform.
Oauth login is work very well. but hello.api(.... 'share'...) is not work.
this page have master page.
<button onclick="OauthLogin('google');" title="Signin to Google" class="zocial icon google"></button>
<button onclick="OauthLogin('facebook');" title="Signin to Facebook" class="zocial icon facebook"></button>
<script type="text/javascript">
function OauthLogin(network) {
hello(network).login();
}
function SignOut(){
var network = $("#hidNetwork").val();
$.ajax({
url: "/AjaxControls/AjaxSignOut.aspx",
type: "POST",
success: function (data) {
hello(network).logout().then(function (){
location.reload();
});
},
error: function (request, status, error) {
alert("getAuthentication code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
hello.on('auth.login', function (r) {
// Get Profile
hello(r.network).api('/me').then(function (p) {
var isAuthenticated = <%=Page.User.Identity.IsAuthenticated.ToString().ToLower() %>;
if (!isAuthenticated) {
$.ajax({
url: "/AjaxControls/AjaxAuthentication.aspx",
type: "POST",
data: {
Name: p.name,
Email: p.email,
AccTocken: p.id,
OauthType: r.network
},
success: function (data) {
location.href = "/Default.aspx";
},
error: function (request, status, error) {
alert("getAuthentication code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}else {
$("#hidNetwork").val(r.network);
}
});
});
hello.init({
google: CLIENT_IDS.google,
facebook: CLIENT_IDS.facebook,
twitter: CLIENT_IDS.twitter
}, {
scope: 'email',
redirect_uri: 'http://www.gamedict.com/'
});
</script>
this Code is work.
this is view page
<button onclick="GameShare('google');">Share Google</button>
<button onclick="GameShare('facebook');">Share Facebook</button>
<script type="text/javascript">
$(document).ready(function () {
var isBoardGame = $("#<%=IsBoardGame.ClientID%>").val();
if (isBoardGame == "true") {
$(".BoardNotUse").hide();
}
});
function GameShare(network) {
hello(network).login({ scope: 'publish' }, function () {
alert(network);
// Post the contents of the form
hello.api(network + ':/me/share', 'get', { link: "<%=string.Format("http://{0}{1}",HttpContext.Current.Request.Url.Authority, HttpContext.Current.Request.RawUrl) %>" }, function (r) {
if (!r || r.error) {
alert("Whoops! " + r.error.message);
}
else {
alert("Your message has been published to " + network);
}
});
});
}
</script>
this page "share" is not work.
My site url: http://www.gamedict.com/PC/test11
That page bottom has button for share.
What is my mistake?
Given hello.api( path, method, data ) the value of method needs to be "post" - not "get"

why autocomplete textbox textchange event not firing?

I have a textbox with ajax jquery autocomplete feature.but the textchange event is not firing.
<asp:TextBox ID="txtNumber" runat="server" width="98%" OnTextChanged="txtNumber_TextChanged" AutoPostBack="true" ></asp:TextBox>
Autocomplete function:
function QuoteNumber(sender, args) {
$(function () {
$("#<%=txtNumber.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Webservice.asmx/GetNumberForAutocomplete") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
async: false,
mustMatch: true,
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('^')[0],
val: item.split('^')[1]
}
}))
},
error: function (response) {
},
failure: function (response) {
}
});
},
select: function (e, i) {
$("#<%=hdnNumber.ClientID %>").val(i.item.val);
if (i.item.val == "No Records Found") {
$("#<%=hdnNumber.ClientID %>").val(-1);
document.getElementById('<%=txtNumber.ClientID%>').value = "";
return false;
}
},
minLength: 0
}).bind('focus', function () { $(this).autocomplete("search"); });
});
}
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
$("#<%=hfCustomerName.ClientID %>").val(i.item.value);
$("[id*=btnSubmit]").click();
},
minLength: 1
});
});
Add to end of select callback this line: __doPostBack('<%= txtNumber.UniqueID %>', '');
In addition to above answer we need to below code snippest in Select:
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
$("#<%=hfCustomerName.ClientID %>").val(i.item.value);
$("[id*=btnSubmit]").click();
$("#<%=txtNumber.ClientID %>").val(i.item.value);
__doPostBack('<%= txtNumber.UniqueID %>', '');
},

Unknown web method in asp.net

In the below code I have a textbox .My aim is when I focus on textbox it will call the server side code through ajax.But I got a error unknown web method txtField_GotFocus parameter name method name.Please help me to rectify the error.
design code:
$(document).ready(function () {
$("#<%=txtField.ClientID%>").bind("focus", function () {
$.ajax({
type: "POST",
url: "<%=Request.FilePath%>/txtField_GotFocus",
data: "{}",
contentType: "application/json",
dataType: "json",
success: function (msg) {
//alert("success message here if you want to debug");
},
error: function (xhr) {
var rawHTML = xhr.responseText;
var strBegin = "<" + "title>";
var strEnd = "</" + "title>";
var index1 = rawHTML.indexOf(strBegin);
var index2 = rawHTML.indexOf(strEnd);
if (index2 > index1) {
var msg = rawHTML.substr(index1 + strBegin.length, index2 - (index1 + strEnd.length - 1));
alert("error: " + msg);
} else {
alert("General error, check connection");
}
}
});
});
});
<asp:TextBox ID="txtField" runat="server" AutoPostBack="true" OnTextChanged="txtField_TextChanged" ClientIDMode="Static"></asp:TextBox>
field.ascx:
public static void txtField_GotFocus()
{
string foo = HttpContext.Current.Request["foo"];
//code...
}
You are missing [WebMethod] annotation. Also i have modified your code
[WebMethod]
public static string txtField_GotFocus()
{
string foo = HttpContext.Current.Request["foo"];//oops i got my super data
//code...
return "awesome, it works!";
}
Check this Article
Your refactored ajax code
$(document).ready(function () {
$("#<%=txtField.ClientID%>").bind("focus", function () {
$.ajax({
type: "POST",
url: "<%=Request.FilePath%>/txtField_GotFocus",
data: "{foo:'whatever'}",
success: function (msg) {
alert(msg);//awesome, it works!
},
error: function (xhr) {
}
});
});
});
Data returned form Server is stored in msg.d field. If you return a single value, you should get it using msg.d. If you return a JSON serialized object you have to parse it using JSON.parse(msg.d)
$(document).ready(function () {
$("#<%=txtField.ClientID%>").bind("focus", function () {
$.ajax({
type: "POST",
url: "<%=Request.FilePath%>/txtField_GotFocus",
data: "{foo:'whatever'}",
success: function (msg) {
alert(msg.d);//awesome, it works!
},
error: function (xhr) {
}
});
});
});

Asp.net mvc Web-Api Checking checkbox all for Delete all data showing 500 error

I am trying to delete all records with checking all checkboxed values. but it is throwing 500 internal server error.
//delete all menu
function performalldeletemenu()
{
if (confirm('Are you sure you want to delete this menu?'))
{
var AllCheckboxes = new Array();
$("input:checked").each(function () {
//console.log($(this).val()); //works fine
AllCheckboxes .push($(this).val());
});
$.ajax({
type: 'DELETE',
url: '/api/MenuWebApi/DeleteAllMenu/',
data: { deleteservice: AllCheckboxes },
success: function (data) {
if (data.Success == true) {
GetMenuList();
}
},
error: function (xhr, textStatus, errorThrown) {
//window.location = JsErrorAction;
},
dataType: "json",
headers:
{
'RequestVerificationToken': JsTokenHeaderValue
}
});
}
return false;
}
Web-Api Method
public HttpResponseMessage DeleteAllMenu(MenuModel objMenuModel)
{
}
please if any have done before please let me know.
1) Ajax request type should be
type: 'Post',
2) You Url should be
url: '/api/MenuWebApi/DeleteAllMenu',

Jquery AutoComplete Load Problem

Not Work
Jquery Code:
$('[id$=Name]').autocomplete('CallBack.aspx',{formatItem: function(item){return item.Name;}}).result(function(event, item) {
location.href = item.AGE;
});
Json:
var data = [{NAME:"John",AGE:"57"}];
Work
Jquery Code:
var data = [{NAME:"John",AGE:"57"}];
$('[id$=Name]').autocomplete(data,{formatItem: function(item){return item.Name;}}).result(function(event, item) {
location.href = item.AGE;
});
alt text http://img11.imageshack.us/img11/119/38235621.jpg
Help me pls how its make ? callback.aspx return json not work
Try changing your data to this:
var data = [{id:"John",value:"57"}];
EDIT
Here's a sample of what I think you're trying to do:
var data = [{NAME:"John",AGE:"57"}];
$('[id$=Name]').autocomplete('CallBack.aspx', {
formatItem: function(item) {
return item.NAME;
}}).result(function(event, item) {
location.href = 'somepage.aspx?age=' + item.AGE;
});
Basically you needed to capitalise return item.Name to return item.NAME.
Try This
<script type="text/javascript">
$(document).ready(function () {
$("#TextboxId").autocomplete({
source: function (request, response) {
$.ajax({
url: "URL",
type: "POST",
dataType: "json",
data: { ids: idstopass },
success: function (retrieveddata) {
alert(retrieveddata);
var dData = JSON.parse(retrieveddata);
alert(dData.Name);
},
error: function (request, status, error) {
console.log("Error! " + request.responseText);
}
})
},
});
})
</script>

Resources