Develop Reference

How to find row using multiple condition

Here is a getData method and I am unable to get row using multiple conditions.
because I am trying to set input value where rows condition is matched. but it's not working yet
function getData() {
$.ajax({
type: 'POST',
url: APIUrl + 'api/GetCustomerProductDetailsDetailByEmployeeID?JSONStringData=' + JSON.stringify(objReqCustomerProductDetails),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
crossDomain: true,
success: function (data, textStatus, xhr) {
objResCustomerProductDetails = data;
if ($(objResCustomerProductDetails.CustomerProductDetails).length > 0) {
$.each(objResCustomerProductDetails.CustomerProductDetails, function () {
$('#tbCustomer tbody tr[data-id=' + this.CustomerID + ' data-product-id=' + this.ProductID + '] td').find('input').val(parseFloat(this.Quantity.toString().trim()).toFixed(2));
});
}
},
error: function (xhr, textStatus, errorThrown) {
messageProvider(0, errorThrown);
}
});
}

$('#tbCustomer tbody tr[data-id=' + this.CustomerID + '][data-product-id=' + this.ProductID + '] td').find('input').val(parseFloat(this.Quantity.toString().trim()).toFixed(2));
After an attribute ends you need to close it. Convention is [attr1][attr2]. This was the problem with the above code.
Ref: https://api.jquery.com/multiple-attribute-selector/

Pass the argument from ajax function to aspx.cs file

I have created some code in HTML, JS and AJAX, yet it does not work how I want it to.
<script type="text/javascript">
function DeleteSelectedRecord(id) {
alert(id);
$.ajax({
type: "POST",
url: "PrintTasks.aspx/DeleteRecord",
data: '{"id":"' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert("Deleted!");
},
failure: function () {
alert("Failure!");
}
});
}
function CreateATableFromDataBase() {
var deserializedData = '<%=serializedList %>';
deserializedData = JSON.parse(deserializedData);
for (var i = 0; i < deserializedData.length; i++) {
document.write(
"<tr>" +
"<th scope=\"row\">" + i.toString() + "</th>" +
"<th>" + deserializedData[i]["Name"] + "</th>" +
"<th>" + deserializedData[i]["Where"] + "</th>" +
"<th>" + deserializedData[i]["Destination"] + "</th>" +
"<th><input type=\"button\" class=\"btn btn-primary\" onclick=\"DeleteSelectedRecord(" + deserializedData[i]["Id"] + ")\" value=\"Delete\"/></th>" +
"</tr>"
);
}
}
</script>
The second function passes the argument "id" to the first one. I have used alert method so as to check, whether at least it works properly. It does. The problem starts when I want to pass the parameter to my super method called DeleteRecord in PrintTasks.aspx.cs file...
[System.Web.Services.WebMethod]
public static void DeleteRecord(int id)
{
very sophisticated code...
}
It is not important what is inside. The most curious thing is that it does not read my parameter.
Thank you!

Just change This Line of code. It will work
data: '{"id":"' + id + '"}',
Change to
data: { id:id},
First id is the parameter name you set in .cs file method.. and second
one is value you are going to pass...

Try as mentioned below :
$.ajax({
type: "POST",
url: "PrintTasks.aspx/DeleteRecord?id=" + id,
success: function () {
alert("Deleted!");
},
failure: function () {
alert("Failure!");
}
});
Or
$.ajax({
type: "POST",
url: "PrintTasks.aspx/DeleteRecord",
data: JSON.stringify({id:id}),
contentType: "application/json;",
dataType: "json",
success: function () {
alert("Deleted!");
},
failure: function () {
alert("Failure!");
}
});

Use $.param() function for sending data to server.
Here is the code:
$.ajax({
type: "POST",
url: "PrintTasks.aspx/DeleteRecord",
data: $.param({"id": id}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert("Deleted!");
},
failure: function () {
alert("Failure!");
}
});

Try by changing your ajax code
$.ajax({
type: "POST",
url: "PrintTasks.aspx/DeleteRecord",
data: '{"id":"' + ParseInt(id) + '"}',//change your code here
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
alert("Deleted!");
},
failure: function () {
alert("Failure!");
}
});

jQuery select the appended element in an ajax call dose not work

In the code, .moneychoose is the div in moneychoose.jsp. $(".moneychoose") can not be selected in the ajax call.
$("input[name='money']").on("click", function() {
if ($("#money").find(".moneychoose")) {
$(".moneychoose").remove();
}
//append external html
$.get("moneychoose.jsp", function (data) {
$("#money").append(data);
});
$.ajax({
type: "POST",
url: "src/province_price.json",
data: '',
dataType: "json",
async: "false",
success: function(response) {
console.log($(".moneychoose"));
},
error: function(qXhr, status, error) {
alert(status + ':' + error + ':' + qXhr.responseText);
}
});
});
But if i add console.log($(".moneychoose")) after "append external html",
$(".moneychoose") in ajax call can be selected. why? however, the $(".moneychoose") after "append external html" still can not be selected.
$("input[name='money']").on("click", function() {
if ($("#money").find(".moneychoose")) {
$(".moneychoose").remove();
}
//append external html
$.get("moneychoose.jsp", function (data) {
$("#money").append(data);
});
console.log($(".moneychoose"));
$.ajax({
type: "POST",
url: "src/province_price.json",
data: '',
dataType: "json",
async: "false",
success: function(response) {
console.log($(".moneychoose"));
},
error: function(qXhr, status, error) {
alert(status + ':' + error + ':' + qXhr.responseText);
}
});
});

Your confusion is because console.log is not synchronous.
Your error is because you have a race condition between two AJAX requests.
//append external html
$.get("moneychoose.jsp", function (data) {
$("#money").append(data);
});
And
$.ajax({
type: "POST",
url: "src/province_price.json",
data: '',
dataType: "json",
async: "false",
success: function(response) {
console.log($(".moneychoose"));
},
error: function(qXhr, status, error) {
alert(status + ':' + error + ':' + qXhr.responseText);
}
});
In order to ensure that .moneychoose is available in the success callback of $.ajax, you will either need to use a Promise that resolves once both requests have succeeded, or you will need to wait to execute one of the requests until the other has finished.

Increment counter on DataBase using jquery

I have a field on my database that stores a number of clicks, and want to increment that when I click in a link(<a href="#selecoes" data-identity="31" id="clicks" clicks="0">) of my tag cloud. Note that I get the number of clicks throught my webservice. This is I do so far:
index.html
<div id="tags">
<ul id="tagList">
<li>
<img src='.../>Brasil
</li>
</ul>
main.js
$('#tagList a').live('click', function() {
findByIdSelecoes($(this).data('identity'));
});
function findByIdSelecoes(id) {
console.log('findByIdSelecoes: ' + id);
$.ajax({
type: 'GET',
url: rootURLSelecoes + '/id/' + id,
dataType: "json",
success: function(data){
$('#btnDelete').show();
console.log('findByIdSelecoes success: ' + data.nome);
currentWine = data;
renderDetails(currentWine);
findJogadoresBySelecao(id);
addClick(currentWine);
}
});
}
function addClick(selecao) {
console.log('addClick na seleção: ' + selecao.id_selecao);
$.ajax({
type: 'PUT',
contentType: 'application/json',
url: rootURLSelecoes + '/update/' + selecao.id_selecao,
dataType: "json",
data: formToJSON(),
success: function(data, textStatus, jqXHR){
alert('clicks updated successfully');
},
error: function(jqXHR, textStatus, errorThrown){
alert('updateWine error: ' + textStatus);
}
});
}
function formToJSON() {
return JSON.stringify({
"clicks": ($('#clicks').val())++ // i dont know what i have to do so i try this(don't work)
});
}
I can't update the dataBase when I click the link in the list. The function formToJSON doesn't increment the value in the database.

Try to do this
Make a var number like global, and do this:
function addClick(selecao) {
console.log('addClick na seleção: ' + selecao.id_selecao);
number = parseInt(selecao.clicks,10);
$.ajax({
type: 'PUT',
contentType: 'application/json',
url: rootURLSelecoes + '/update/' + selecao.id_selecao,
dataType: "json",
data: formToJSON(),
success: function(data, textStatus, jqXHR){
alert("Done: " +number);
},
error: function(jqXHR, textStatus, errorThrown){
alert('updateWine error: ' + textStatus);
}
});
}
function`enter code here` formToJSON() {
var ola = parseInt(number,10);
ola = ola +1;
return JSON.stringify({
"clicks": parseInt(ola,10)
});
}

function calling ajax returns false

I have a javascript function which makes a JSON call to a web service using jQuery.
In the success function I need to evaluate the JSON response and if necessary make another call to a different method in the same web service.
Here is how I do it:
function firstAjaxCall(aid, tid) {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method1",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (response) {
var respData = response.d;
//do some stuff
if (respData.HasEnded == true) {
clearInterval(tid);
var end = false;
end = endFunction(aid);
if (end) {
// do some other stuff
}
}
},
failure: function (errorMsg) { alert(errorMsg.toString()); }
});
}
and the endFunction which is being called from within the ajax success function:
function endFunction(aid) {
var hasEnded = false;
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method2",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (callbackData) {
var endRespData = callbackData.d;
hasEnded = endRespData.Success;
alert(hasEnded.toString());
},
failure: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
return hasEnded;
}
Here is the weird stuff. The ajax-call is made all right. The code on the server is running according to plan. However, if I try to set a firebug breakpoint in the success function of endFunction(aid) is is not hit, but the alert box is shown displaying the word true. This is somewhat good since it seems that we are actually reaching the success function. The hasEnded variable however is never set to true so it always returns false.
Calling endFunction(1) from the Firebug console displays an alert box with the word true and returns value false.
What's going wrong?

AJAX is asynchronous — the $.ajax call will not wait for the server to reply.
Therefore, the return hasEnded; line runs before the AJAX callback.
You need to make your endFunction take a callback parameter, like $.ajax does.

http://api.jquery.com/jQuery.ajax/
It looks like you're using "failure" in the documentation you have "error":
error(XMLHttpRequest, textStatus, errorThrown)
also you should do something like this:
function firstAjaxCall(aid, tid) {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method1",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (response) {
var respData = response.d;
//do some stuff
if (respData.HasEnded == true) {
clearInterval(tid);
var end = false;
endFunction(aid,function(endv){
if (endv) {
// do some other stuff
}
});
}
},
error: function (errorMsg) { alert(errorMsg.toString()); }
});
}
function endFunction(aid,endcallback) {
var hasEnded = false;
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method2",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (callbackData) {
var endRespData = callbackData.d;
hasEnded = endRespData.Success;
alert(hasEnded.toString());
endcallback(hasEnded);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
endcallback("?");
}
});
//return hasEnded;
}