I have a jquery foreach appended list in a table. What I want is to pass the full object that I am getting from an ajax success function. But when I try to pass the Object as a parameter to a different JS function, the parameter gets unexpected end of input.
This is my appended table:
$.ajax({
type: "post",
url: "#Url.Content("~/Estimate/GetOffsetLetterHeadCost")",
data: $('#OffLetterHeadForm').serialize(),
datatype: "json",
traditional: true,
success: function(data) {
var Json = data;
$.each(Json, function(index, obj) {
var row = '<tr>' + '<td><b>' + obj.VendorName + '</b></td>'
+ '<td><label id="machineId' + index + '">'
+ obj.MachineName + ' </label></td>'
+ '<td><input type="button" value="Order" id="btn'
+ index + '"onclick="SaveOffsetOrder('
+ JSON.stringify(obj) + ')"/></td></tr>';
$("#AllVendorsList").append(row);
});
}
});
<table id="AllVendorsList"></table>
function SaveOffsetOrder(obj) {
// do something with obj
}
At input close I am getting unexpexted end of input. Please help. I am new to javascript
enter image description here
Problem is that JSON.stringify(obj) doesn't escape quotes like this \" and the result is invalid html.
I suggest using jQuery onclick binding, so you don't have to stringify obj and then parse it.
Solution: https://jsfiddle.net/xpvt214o/452188/
var Json = [{
VendorName: 'kia',
MachineName: 'ceed'
}, {
VendorName: 'dacia',
MachineName: 'logan'
}];
$.each(Json, function(index, obj) {
var row = '<tr>' + '<td> <b>' + obj.VendorName + '</b></td>' + '<td><label id="machineId' + index + '">' + obj.MachineName + '</label></td>' + '<td><input type="button" value="Order" id="btn' + index + '"/></td></tr >';
$("#AllVendorsList").append(row);
$("#btn" + index).on('click', $.proxy(SaveOffsetOrder, this, obj));
});
function SaveOffsetOrder(obj) {
console.info(obj);
}
<table id="AllVendorsList"></table>
there are a lot of syntax problem. First of all, It's not clear where you have putted your js functions. If it's an .html file, your code should be:
<table id="AllVendorsList"></table>
<script type="text/javascript">
$.ajax({
type: "post",
url: "#Url.Content("~/Estimate/GetOffsetLetterHeadCost
")",
data: $('#OffLetterHeadForm').serialize(),
datatype: "json",
traditional: true,
success: function(data) {
var Json = data;
$.each(Json, function(index, obj) {
var row = '<tr>' + '<td> <b>' + obj.VendorName + '</b> </td> ' +
'<td><label id="machineId' + index + '">' + obj.MachineName + '
< / label > < /td > ' + '<td> <input type="button" value="Order"
id="btn' + index + '"onclick ="SaveOffsetOrder(' +
JSON.stringify(obj) + ')" / > < /td></tr > ';
$("#AllVendorsList").append(row);
});
}
});
function SaveOffsetOrder(obj) {
// do something with obj
}
</script>
So your error is related to syntax problems.
I'm storing a value inside a javascript variable, now I want to run a if statement to change the data-icon on a select option.
<script type="text/javascript">
$(document).ready(function(){
$("#fds_gender").change(function () {
var gender = $(this).val();
$.ajax({
type: "POST",
data: {
"username" : "<?php echo $user->username; ?>",
"gender" : gender
},
url: "ajax/fds_categories_ajax.php",
success: function(data){
$("#fds_categories").empty();
$.each($.parseJSON(data), function(index, element) {
if(element.p == 0){
$("#fds_categories").append(
$('<option data-icon="man"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
);
}else{
$("#fds_categories").append(
$('<option data-icon="man"></option>').val(element.id).html(element.name + ": " + element.p + ' Zcard')
);
}
});
}
});
});
});
</script>
gender does contains one of the following values: stud or babe.
What I want to create:
In case gender contains stud:
$('<option data-icon="man"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
In case gender contains babe:
$('<option data-icon="babe"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
What I have tested:
$('<option data-icon="' + if(gender == 'stud'){}else{} + '"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
Just got no clue how to echo out a value such as man or woman. Is there such a Javascript echo function as in PHP?
You can use ternary operator.
$('<option data-icon="' +( (gender == 'stud')?'man':'babe')+ '"></option>').val(element.id).html(element.name + ": " + element.pb + ' Zbucks')
I have the rss titles going into a dropdown box and they change when each one is clicked on but i want about 4 rss feeds showing on the page so i dont need the dropdown box.
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "rss_warriors.php",
dataType: "xml",
cache: false,
success: parse_rss
});
function parse_rss(rss_feed)
{
console.log(rss_feed);
$('#output').append('<select>');
$(rss_feed).find("item").each(function()
{
$('select').append('<option value="' +
$(this).find('title').text() + '">' +
$(this).find('title').text() + '</option>');
});
line_record(0,rss_feed);
$("select").on("change", function(evt)
{
line_record( $("select option:selected").index(),rss_feed)
});
}
function line_record(sel_index,rss_feed)
{
var local_index = sel_index;
var image_url;
var item_title;
var item_description;
var item_pubDate;
image_url = $(rss_feed).find("item").eq(local_index).find("thumbnail").last().attr("url");
item_title = $(rss_feed).find("item").eq(local_index).find("title").text();
item_description = $(rss_feed).find("item").eq(local_index).find("description").text();
item_pubDate = $(rss_feed).find("item").eq(local_index).find("pubDate").text();
$("#img_warriors").empty();
$("#txt_warriors").empty();
$("#img_warriors").append("<img src='" + image_url + "'>");
$("#txt_warriors").append("<span class='title_large'>" + item_title + "</span>");
$("#txt_warriors").append("<p>" + item_description + "</p>");
$("#txt_warriors").append("<p>" + item_pubDate + "</p>");
}
});
Not sure if it is what you mean, but what about :
$(rss_feed).find("item").each(function(i) {
if (i <=3) {
$('select').append('<option value="' +
$(this).find('title').text() + '">' +
$(this).find('title').text() + '</option>');
}
});
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">
This is my td that wrote with JS:
'<td contenteditable="true" onBlur="saveToDatabase(this,s1,' + d.pid + ')" onClick="showEdit(this);">' + d.s1+ '</td>' +
I want to to send saveToDatabase function value to this AJAX code.
function showEdit(editableObj) {
$(editableObj).css("background", "#FFF");
}
function saveToDatabase(editableObj,column ,id) {
$(editableObj).css("background", "#FFF url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "saveedit.php",
type: "POST",
data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
success: function(data) {
$(editableObj).css("background", "#FDFDFD");
}
});
}
But I get an error:
Uncaught ReferenceError: hashie_sod is not defined
what is the problem ?
It sounds like hashie_sod is the value in your d.pid variable. In which case you need to wrap it in quotes when building your HTML string:
'<td contenteditable="true" onBlur="saveToDatabase(this, s1, \'' + d.pid + '\'")" onClick="showEdit(this);">' + d.s1+ '</td>'
Or better yet, use JavaScript to attach your events:
'<td contenteditable="true" class="content-edit-td" data-s1="' + s1 + '" data-pid="' + d.pid + '">' + d.s1+ '</td>'
$('.content-edit-td').on({
'click': function() {
$(this).css("background", "#FFF");
},
'blur': function() {
$(this).css("background", "#FFF url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "saveedit.php",
type: "POST",
data: 'column=' + $(this).data('s1') + '&editval=' + $(this).html() + '&id=' + $(this).data('pid'),
success: function(data) {
$(this).css("background", "#FDFDFD");
}
});
}
});