Below is the jquery script that takes one input value from textBox1 and pass it to a web method then returns the name of the person and displays it in textBox2. The web method only takes one parameter, the user initials.
<script type="text/javascript" >
$('#textBox1').live('keydown', function(e) {
var keyCode = e.keycode || e.which;
if (keyCode == 9) {
e.preventDefault();
$.ajax({
type: "POST",
url: "Default.aspx/GetName",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"value1":"' + $('#textBox1').val() + ' " }',
success: function(data) {
$('#textBox2').val(data.d);
}
});
}
});
</script>
I want to be able to pass two values from two textboxes for a web method that requires two parameters. how can I modify the jquery code above to accomplish that?
You add the parameters to the data object, which by the way should be an object:
data: { value1: $('#textBox1').val(), value2: $('#textBox2').val() },
Is this what you mean?
<script type="text/javascript" >
$('#textBox1').live('keydown', function(e) {
var keyCode = e.keycode || e.which;
if (keyCode == 9) {
e.preventDefault();
$.ajax({
type: "POST",
url: "Default.aspx/GetName",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"value1":"' + $('#textBox1').val() + '", "value2":"' + $('#textBox2').val() + '" }',
success: function(data) {
$('#textBox2').val(data.d);
}
});
}
});
</script>
I'd use something like jQuery Json
Related
I am strangling when I added my comments with AJAX method of jQuery, after stressful, I want to make this textbox to null
my Ajax method like this :
function AddComments() {
$(".Comment input[type=text]").keypress(function (e) {
if (e.which == 13) {
var comment = $("#" + this.id).val();
var textId = "#" + this.id.replace("txt", "div");
$(textId).append(comment);
$.ajax({
type: "POST",
url: "Posts.aspx/AddComments",
data: "{'id': '" + this.id.replace("txt", "") + "','comments': '" + comment + "'}",
dataType: "json",
contentType: "application/json",
success: function (response) {
$("#" + this.id).val("");
//alert(response.d);
}
});
}
});
}
what I want is on Success, I want make current textbox to NULL
$("#" + this.id).val("");
This is a scoping issue. this in the success handler holds a reference to the window object, not the input the keypress fired on. You just need to cache the input in a variable you can use in the success handler. Try this:
function AddComments() {
$(".Comment input[type=text]").keypress(function (e) {
if (e.which == 13) {
var $input = $(this);
var comment = $input.val();
var textId = "#" + this.id.replace("txt", "div");
$(textId).append(comment);
$.ajax({
type: "POST",
url: "Posts.aspx/AddComments",
data: "{'id': '" + this.id.replace("txt", "") + "','comments': '" + comment + "'}",
dataType: "json",
contentType: "application/json",
success: function (response) {
$input.val("");
//alert(response.d);
}
});
}
});
}
you can't access this in jquery ajax do it like this save your object in any variable
function AddComments() {
$(".Comment input[type=text]").keypress(function (e) {
if (e.which == 13) {
var Element=this;
var comment = $("#" + this.id).val();
var textId = "#" + this.id.replace("txt", "div");
$(textId).append(comment);
$.ajax({
type: "POST",
url: "Posts.aspx/AddComments",
data: "{'id': '" + this.id.replace("txt", "") + "','comments': '" + comment + "'}",
dataType: "json",
contentType: "application/json",
success: function (response) {
$(Element).val("");
//alert(response.d);
}
});
}
});
}
Your success function is in another context, you can't use this, you have to send the id on the json response and do something like:
success: function (response) {
$('#'+response.div_id).val("");
}
and your json response should include the div_id that's passed on the ajax request
I have following code. Jquery Ajax calls webmethod . If i pass zipcode "07306" it returns and sets session to "7306" . No idea why it removes zero from front!
function onChangeLocation(){
var newzip =$('#<%= txtNewLocation.ClientID %>').val();
$('#<%= lblDefaultLocation.ClientID %>').html(newzip);
$.ajax({
type: "POST",
url: "/WebMethods.aspx/ChangeLocation",
data: "{newLocation:" + newzip + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
}
});
}
[System.Web.Services.WebMethod()]
public static String ChangeLocation(String newLocation)
{
HttpContext.Current.Session["ClientZipCode"] = newLocation.ToString();
return newLocation.ToString();
}
Can someone please explain why it removes zero from front ?
The problem is that JS thinks it an integer changing
$('#<%= lblDefaultLocation.ClientID %>').html(newzip);
to
$('#<%= lblDefaultLocation.ClientID %>').html(newzip + '');
Should fix it.
I'm trying to get data back after an element is ready in the DOM. I'm trying to use the load function from JQUERY but I get a message .load() is not a function.
Is there a best practice when using ajax to get data for an element (in my case a div) during a page load? I'm using ASP.NET and calling a webmethod in code behind.
Here is my ajax/jquery code:
$(document).ready(function () {
$(function () {
$("[id$=divArea]").load()(function () {
$.ajax({
type: "POST",
url: "apage.aspx/Role",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
alert("got data from Role");
},
error: function (data) {
alert("failed to get data from Role");
}
});
});
});
Thanks.
$(document).ready() is for calling code once the DOM is ready - therefore, if I have understood you correctly, you don't need to include $("[id$=divArea]").load()(function () {
It should work like this:
$(document).ready(function () {
$(function () {
$.ajax({
type: "POST",
url: "apage.aspx/Role",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
alert("got data from Role");
},
error: function (data) {
alert("failed to get data from Role");
}
});
});
});
By the way - it was probably a paste error, but you also omitted the $(document).ready closing }); in the code you posted.
I think that the problem it's the code itself, try the code like this
$(document).ready(function (){
$("[id$=divArea]").load('apage.aspx/Role',function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
})
});
I have to display data in a web application with the ability to filter. The data is ported via FTP as XML. Can I use Dynamic Data to handle this or is there an alternative way. I do know I can manually linq to the xml and display in datagrid or some other control but the Dynamic Data Template seems to offer all the Data management functionality.
ya use JSON and JQUERY
here is code from which i filter account no,
$(function () {
var search = $("#<%=txtAccountNo.ClientID%>");
search.watermark('Enter Account No');
search.autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/") %>AutoCompleteService.asmx/GetAccountNo',
data: "{ 'prefixText': '" + search.val() + "', 'count' : '10','contextKey':''}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
if (data.d != null) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
}
},
error: function (XMLHttpRequest, textStatus, error) {
//alert(textStatus);
}
});
},
minLength: 1
});
});
I am making a simple game with jquery and i want to make a call to asp.net web service which i know how to do, but the server call need to continue to run until i get a specific response from the server.
I will wait like 3 seconds with each loop cycle
function servercall() {
while (true) {
// code for clone and insert ...
$.ajax({
type: "POST",
url: "Server.asmx/HelloWorld",
data: "{'name': '" + $('#name').val() + "', 'time': '2pm'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
AjaxSucceeded(msg);
},
error: AjaxFailed
});
setTimeout("nothing", 2000);
}
}
Use recursion with setTimeout. And be sure start the timer when you receive a response, so that you account for network delays (you don't want a bunch of requests going at the same time)...
function servercall() {
$.ajax({
complete: function(xhr) {
var msg = xhr.responseText;
if(xhr.statusCode == 200)
AjaxSucceeded(msg);
else
AjaxFailed(msg);
setTimeout(servercall, 2000); //recursion magic
}
});
}
You want the JavaScript setTimeout() Function.
You could try either:
function serverCall() {
// ajax code
setTimeout("serverCall()", 2000);
}
or:
function ajaxSucceeded(msg) {
if (isTheAnswerYouAreLookingFor) {
// do stuff
} else {
setTimeout("serverCall()", 2000);
}
}
Here is an article on setTimeout and setInterval that may help you further:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
Set interval is more helpful :
<script type='text/javascript'>
setInterval("servercall()", 2000);
function servercall() {
// code for clone and insert ...
$.ajax({
type: "POST",
url: "Server.asmx/HelloWorld",
data: "{'name': '" + $('#name').val() + "', 'time': '2pm'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
AjaxSucceeded(msg);
},
error: AjaxFailed
});
}
}
</script>