We Keep Coding

getting <td> id with jquery not working

I am new to javascript and I jquery and I am trying to take the id of element and the value of the element.
So this is the first ajax request:
$.ajax({
type: "POST",
url: "Home/AddText",
data: JSON.stringify({ text: newText }),
contentType: "application/json",
success: function (result) {
idRow = result.id;
$("#myTable").append("<tr id = row" + idRow + "><td id = text>" +
result.text + "</td><td>" +
"<input type=checkbox id=checkbox onclick=CrossOut(" + idRow + ")>" + " " +
"<a class=btnEdit onclick=Edit(" + idRow + ")>Edit</a>" + " " +
//show this buttons only if the edit button is clicked
"<a class=btnSave onclick=Save(" + idRow + ")>Save</a>" + " " +
"<a class=btnCancel onclick=Cancel(" + idRow + ")>Cancel</a>" + " " +
"<a class=btnDelete onclick=Delete(" + idRow + ")>Delete</a>"
+ "</td> </tr>");
idRow++;
$(document).find('#text').attr('contenteditable', 'true');
$(document).find('.btnSave').hide();
$(document).find('.btnCancel').hide();
}
})
And this is the function:
function Save(idRow) {
var newText = $("#text").val();
console.log(newText);
$.ajax({
type: "POST",
url: "Home/Update",
data: JSON.stringify({ id: idRow, text: newText }),
contentType: "application/json",
success: function (result) {
$("#text").add(newText);
$(document).find('.btnSave').hide();
$(document).find('.btnCancel').hide();
$(document).find('.btnEdit').show();
}
})
}
So when I log the newText variable it doesn't display anything.

Since you are working with td you need to use .text()
var newText = $("#text").text();
Also note that you might have more than one unique id if you keep adding rows and the $(#text) would only get you the first one.

How dsiplay alert message after saving data using Jquery

Actually i got alert message display before saving data so please help me out
below my code is there
for (var i = 0; i < rows_count; i++) {
var count = 0;
$.ajax({
type: "POST", url: "Default.aspx/update_extraHoursWorked", cache: false, data: "{'empID':'" + $("#emp_id" + i).text() + "','emp_code': '" + $("#emp_code" + i).text() + "','emp_category':'" + $("#emp_category" + i).text() + "','g1': '" + $("#txtgen_Three" + i).val() + "','f1': '" + $("#txtfirst_Three" + i).val() + "','s1': '" + $("#txtsecond_Three" + i).val() + "','t1': '" + $("#txtthrid_Three" + i).val() + "','g2': '" + $("#txtgen_Four" + i).val() + "','f2': '" + $("#txtfirst_Four" + i).val() + "','s2': '" + $("#txtsecond_Four" + i).val() + "','t2': '" + $("#txtthrid_Four" + i).val() + "','g3': '" + $("#txtgen_Five" + i).val() + "','f3': '" + $("#txtfirst_Five" + i).val() + "','s3': '" + $("#txtsecond_Five" + i).val() + "','t3': '" + $("#txtthrid_Five" + i).val() + "','contracortName': '" + $('#ddlContractorNames>option:selected').text() + "'}", contentType: "application/json; charset=utf-8", dataType: "json",
success: function (data) { }, error: function (e) { alert('Error, Update att.'); }
});
} enableLastTwoDays(true);
alert('Saved Successfully');
}

You can count every success and finally alert ..
count_success= 0;
for (var i = 0; i < rows_count; i++) {
//---
//--
success: function (data) { count_success++; },
error: function (e) { alert('Error, Update att.'); }
});
} enableLastTwoDays(true);
alert(count_success +'Record Saved Successfully');
}

Try this, the alert should be within the success function, which is called if the ajax request was successful. You can also get the response data from server within this the success function. Try console.log(data) to display data in the browser console if data is returned from the server.
for (var i = 0; i < rows_count; i++) {
var count = 0;
$.ajax({
type: "POST", url: "Default.aspx/update_extraHoursWorked", cache: false, data: "{'empID':'" + $("#emp_id" + i).text() + "','emp_code': '" + $("#emp_code" + i).text() + "','emp_category':'" + $("#emp_category" + i).text() + "','g1': '" + $("#txtgen_Three" + i).val() + "','f1': '" + $("#txtfirst_Three" + i).val() + "','s1': '" + $("#txtsecond_Three" + i).val() + "','t1': '" + $("#txtthrid_Three" + i).val() + "','g2': '" + $("#txtgen_Four" + i).val() + "','f2': '" + $("#txtfirst_Four" + i).val() + "','s2': '" + $("#txtsecond_Four" + i).val() + "','t2': '" + $("#txtthrid_Four" + i).val() + "','g3': '" + $("#txtgen_Five" + i).val() + "','f3': '" + $("#txtfirst_Five" + i).val() + "','s3': '" + $("#txtsecond_Five" + i).val() + "','t3': '" + $("#txtthrid_Five" + i).val() + "','contracortName': '" + $('#ddlContractorNames>option:selected').text() + "'}", contentType: "application/json; charset=utf-8", dataType: "json",
success: function (data) { alert('Saved Successfully'); }, error: function (e) { alert('Error, Update att.'); }
});
} enableLastTwoDays(true);
}
The modified code is below, the below code is to give u an idea, ideally this code should not be used in your production site as such. Here for every row that is successfully saved the save function is called which inturn increases the count of the count_successful. After the loop is completed the count of count_successful is checked if its equal to the row count
var count_successful = 0;
for (var i = 0; i < rows_count; i++) {
var count = 0;
$.ajax({
type: "POST", url: "Default.aspx/update_extraHoursWorked", cache: false, data: "{'empID':'" + $("#emp_id" + i).text() + "','emp_code': '" + $("#emp_code" + i).text() + "','emp_category':'" + $("#emp_category" + i).text() + "','g1': '" + $("#txtgen_Three" + i).val() + "','f1': '" + $("#txtfirst_Three" + i).val() + "','s1': '" + $("#txtsecond_Three" + i).val() + "','t1': '" + $("#txtthrid_Three" + i).val() + "','g2': '" + $("#txtgen_Four" + i).val() + "','f2': '" + $("#txtfirst_Four" + i).val() + "','s2': '" + $("#txtsecond_Four" + i).val() + "','t2': '" + $("#txtthrid_Four" + i).val() + "','g3': '" + $("#txtgen_Five" + i).val() + "','f3': '" + $("#txtfirst_Five" + i).val() + "','s3': '" + $("#txtsecond_Five" + i).val() + "','t3': '" + $("#txtthrid_Five" + i).val() + "','contracortName': '" + $('#ddlContractorNames>option:selected').text() + "'}", contentType: "application/json; charset=utf-8", dataType: "json",
success: function (data) { count_successful = count_successful+1; }, error: function (e) { alert('Error, Update att.'); }
});
} enableLastTwoDays(true);
}
if(count_successful == rows_count){
alert('Saved all rows successfully');
}

Have a hidden field respective to this function and increment/change the value of it on each success. Finally if the successCount value equals the total rows count, then the alert is shown.
function someFunction() {
for (var i = 0; i < rows_count; i++) {
var count = 0;
$.ajax({
type : "POST",
url : "Default.aspx/update_extraHoursWorked",
cache : false,
data : "{}",
contentType : "application/json; charset=utf-8",
dataType : "json",
success : function(data) {
$('#successCountID').val(i); // changed i+1 to i
},
error : function(e) {
alert("Error, Update att.");
}
});
}
enableLastTwoDays(true);
$(document).ajaxStop(function() {
// place code to be executed on completion of last outstanding ajax call here
var count = $('#successCountID').val();
if (count == rows_count) {
alert("Saved Successfully");
$('#successCountID').val(0);
}
});
}
Add a hidden field in the form
<input type="hidden" name="successCount" id="successCountID" value="0">

jquery multiselect after change removing selected values

have big problem.
have jquery multiselect plugin from here
$.ajax({
url: 'my url',
type: 'post',
data: {'data': data1, 'data2': 'data2'},
dataType: 'json',
success: function(data){
if(data.length >= 1){
$('#selector').find('option').remove();
$.each(data, function(key, value) {
if ($("#selector option[value='" + value.email + "']").length == 0){
$("#selector").append('<option value="'+ value.email +'" data-id="'+value.id+'" data-name="' + value.name + '" data-surname="' + value.surname + '">'+ value.name + ' ' + value.surname + ' ' + ' (' + value.email + ') sent (' + value.sent + ')' +'</option>').multiselect("destroy").multiselect( { sortable : false } );
}
});
}else{
$('#selector').find('option').remove();
$('#selector').append('').multiselect("destroy").multiselect( { sortable : false } );
}
}
});
and after change (call this function, whitch selecting cantacts from other list) my selected values disapears

post variable in ajax

I would like to post the variable var projectid=data.projectid, the same as i did with:
url: "rapportage/rapport_detail?idKlant=" + klant,
the ajax call look like this:
$.ajax({
type: "POST",
url: "rapportage/rapport_detail?idKlant=" + klant,
dataType: 'json',
error: function(){ alert("Onvoldoende gegevens beschikbaar om rapportage to genereren."); },
success: function(data){ // Plaats data op de juiste plek in de tabel
var projectid=data.projectid,
titel=data.titel,
projecttype =data.projecttype,
projectleider =data.projectleider,
projecttype =data.projecttype,
statusproject =data.statusproject,
startproject =data.startproject,
deadlineproject =data.deadlineproject,
omzetproject =data.omzetproject,
kostenproject =data.kostenproject,
margeproject =data.margeproject,
totaalurenproject =data.totaalurenproject,
totaalminutenproject =data.totaalminutenproject,
urenkostenproject =data.urenkostenproject;
var str='';
for(var i=0,len=titel.length;i<len;i++){
str+="<tr>"+"<td>" + titel[i] + "</td>";
str+="<td>" + projectleider[i] + "</td>";
str+="<td>" + projecttype[i] + "</td>";
str+="<td>" + statusproject[i] + "</td>";
str+="<td>" + startproject[i] + "</td>";
str+="<td>" + deadlineproject[i] + "</td>";
str+="<td>" + "€" + omzetproject + "</td>";
str+="<td>" + "€" + kostenproject + "</td>";
str+="<td>" + "€" + margeproject + "</td>";
str+="<td>" + totaalurenproject + ":" + totaalminutenproject + "</td>";
str+="<td>" + "€" + urenkostenproject + "</td>"+"</tr>";
}
alert(JSON.stringify(data));
$("#details tbody").append(str);
}
});

You can use this;
$.ajax({
type: "POST",
url: "rapportage/rapport_detail?idKlant=" + klant,
dataType: 'json',
success: function(data) {
var projectid=data.projectid;
........
$.ajax({
type: "POST",
url: "rapportage/rapport_detail?idKlant=" + klant,
data: "projectid=" + projectid,
dataType: 'json',
success: function(response) {
}
}
.....

i didn't get what you are asking, but if you want to post a variable by POST then you can
type: "POST",
url: "rapportage/rapport_detail",
data : {"idKlant" : klan},
add this in ajax

Jquery if clause

I need help to write a if statement using jquery. So if results.d.ProductName is empty do not show `$(prdHtml).html(html);
$.ajax({
type: "POST",
url: "Services.asmx/GetProduct",
data: '{ "fieldName": "' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(results) {
var html = '<h3>' + results.d.ProductName + '<h3>'
+ '<a href=""' + results.d.Url + '</a>';
$(prdHtml).html(html);

success: function(results) {
if(results.d.ProductName.length) {
var html = '<h3>' + results.d.ProductName + '<h3>'
+ '<a href=""' + results.d.Url + '</a>';
$(prdHtml).html(html);
} else {
$(prdHtml).hide();
}
}

try:
success: function(results) {
if (results.d.ProductName!="") {
var html = '<h3>' + results.d.ProductName + '<h3>'
+ '<a href=""' + results.d.Url + '</a>';
$(prdHtml).html(html);
}
}

success: function(results) {
// should probably test if d exists before testing for productname
if (typeof(results.d) == "undefined" || typeof(results.d.ProductName ) != "string")
return;
...code
}