We Keep Coding

Function to refactor AJAX post: Get field ID that changed and post it's value with AJAX

I'm a new developer asking my first SO question :). Working on a form that has some calculated fields based off corresponding text inputs in ASP.NET MVC. Essentially, takes value from text box, AJAX post that value to controller, perform calc, returns that data to read-only calculated field.
I have the following code for this working:
$("#volume").focusout(function () {
volume = $(this).val()
$.ajax({
type: "POST",
url: '/StaffingPlan/CalculatorAction',
data: { volume: volume },
dataType: "json",
success: function (data) {
console.log(data);
$("#selectorsNeeded").val(data);
}
});
});
$("#drops").focusout(function () {
drops = $(this).val()
$.ajax({
type: "POST",
url: '/StaffingPlan/CalculatorAction',
data: { drops: drops },
dataType: "json",
success: function (data) {
console.log(data);
$("#liftsNeeded").val(data);
}
});
});
and in the controller:
public ActionResult CalculatorAction(string volume, string drops)
{
int data = 0;
//one calculation performed for volume, but will be others to calculate
if (volume != null && volume != "")
{
data = Int32.Parse(volume) / 150 / 9;
}
//example of another calc
if (drops != null && drops != "")
{
data = Int32.Parse(drops) / 25 / 6;
}
return Json(data, JsonRequestBehavior.AllowGet);
}
This works, however, the form has several other inputs and calculated fields. Obviously there's better/dryer way to write this instead of duplicating the .focusout function. Would be nice to just get the field ID that changes and assign value to appropriate variable. Hope this makes sense! Any direction would be appreciated very much.

Change your code to this:
$("#volume").focusout(function () {
var data= { volume: $(this).val()},
var resultField= $("#selectorsNeeded");
calculateResult(data, resultField);
});
$("#drops").focusout(function () {
var data= { drops: $(this).val() },
var resultField= $("#liftsNeeded");
calculateResult(data, resultField);
});
function calculateResult (data, resultField) {
$.ajax({
type: "POST",
url: '/StaffingPlan/CalculatorAction',
data: data,
dataType: "json",
success: function (result) {
console.log(result);
resultField.val(result);
}
});
};

Issues with jquery html()

Having some issues properly getting the manipulated data from an element.
Everywhere on the internet doesn't seem to cover such a simple question with a simple answer. Please help.
I have manipulated an element with a returning ajax request:
$("#last_comment_added").html("1457856458")
now my function on the page:
jQuery(document).ready(function($) {
var post_slug = $("#post_slug").html();
var last_comment_added = $("#last_comment_added").text();
if (post_slug && last_comment_added) {
setInterval(function() {
$.ajax({
type: "POST",
url: "ajax_comments.php",
data: {
"task": "updates",
"post_slug": post_slug,
"last_comment_added": last_comment_added
},
cache: false,
success: function(html) {
eval(html)
}
});
}, 10000);
}
});
I get the old data from the element, not the new ajax "1457856458" data.
Please help.

If I understand your problem right it's just that you create this variable called last_comment_added and expect it to be continually updated, you set it once to be the text of the last_comment_added, it's never updated in your interval function. Here's a change that should make it work better for you.
jQuery(document).ready(function($) {
var post_slug = $("#post_slug").html();
if (post_slug && last_comment_added) {
setInterval(function() {
$.ajax({
type: "POST",
url: "ajax_comments.php",
data: {
"task": "updates",
"post_slug": post_slug,
"last_comment_added": $("#last_comment_added").text()
},
cache: false,
success: function(html) {
eval(html)
}
});
}, 10000);
}
});

Don't use eval.
Try
$(document).ready(function() {
var post_slug = $("#post_slug").html();
var last_comment_added = $("#last_comment_added").html();
if (post_slug && last_comment_added) {
setInterval(_update, 10000);
}
});
function _update() {
$.ajax({
type: "POST",
url: "ajax_comments.php",
data: {
"task": "updates",
"post_slug": post_slug,
"last_comment_added": last_comment_added
},
cache: false,
success: function(data) {
$("#last_comment_added").html(data)
}
});
}
and you return from PHP only NEW data. (something like: echo '1457856458';)

How to referesh the DataTable

How to refresh the DataTable after changing in server side
Here i have define the dataTable when isData= 1 at server side mqsql(DB)
function one()
{
var DataTableApp = $('#DataTableApp').dataTable({
"sAjaxSource": "php/getAppDetails.php",
....
....
}
when click the some one in DataTable. I have changed isData=0, It is in ajax calling in another function.
After changing isData=0, I want to referesh the table..
How to referesh the DataTable
$.ajax({
type: "GET",
url: "php/removeApp.php",
data: data,
dataType: "json",
success: function (data) {
json_objApp = data;
if(json_objApp.isSuccessful == true)
{
document.getElementById('removeAppSucc').innerHTML = "Successfully Removed";
document.getElementById('collapseFive').setAttribute("class", "collapse");
DataTableApp.fnDraw();
DataTableApp._fnAjaxUpdate();
}
else
{
document.getElementById('removeAppSucc').innerHTML = "App is not removed"
}
},
});

Ajax call not succeeding after function call

I am attempting to load dynamic data based on the specific URI segment thats on the page.
Heres my Javascript:
$(document).ready(function() {
$(function() {
load_custom_topics();
});
$('#topics_form').submit(function() {
var topic = document.getElementById('topics_filter').value
$.ajax({
type: "POST",
url: 'ajax/update_session_topic',
dataType: 'json',
data: { topic: topic },
success: function(){
load_custom_topics()
}
});
return false;
});
function load_custom_topics(){
$.ajax({
type: "POST",
url: 'ajax/load_custom_topics',
dataType: 'json',
data: {},
success: function (html) {
$('div.topics_filter').html(html['content']);
get_threads();
}
});
}
function get_threads(){
var page = document.getElementById('page').value
$.ajax({
type: "POST",
url: 'ajax/get_threads',
dataType: 'json',
data: {page: page},
success: function (html) {
$('div#thread_list').html(html['content']);
}
});
}
});
So, as you can see, on page load, it kicks off load_custom_topics which runs just fine. Its then supposed to call get_threads(). This is where the thing stops, and I get no data.
Get_threads()
public function get_threads()
{
$session = $this->session->userdata('active_topic');
if ($this->input->post('page') == '1')
{
$data['list'] = $this->right_model->thread_list_all();
$data['test'] = "all";
} else {
$data['list'] = $this->right_model->thread_list_other($session);
$data['test'] = "not all";
}
if ($data['list'] == FALSE)
{
$content = "no hits";
} else {
$content = $this->load->view('right/thread_list', $data, TRUE);
}
$data['content'] = $content;
$this->output->set_content_type('application/json')->set_output(json_encode($data));
}
While I create the 'page' dynamically, the HTML outputs to this:
<div name="page" value="1"></div>
Any reason why get_threads() is not running?

This does not have an ID. It has a name.
<div name="page" value="1"></div>
This means that your request for getElementById is failing. So this line of code should be showing a TypeError in your console.
var page = document.getElementById('page').value

jquery ajax call execute once function after complete

I am in mobile app. I use ajax calls to receive data from webserver with this code:
$.ajax({
url: 'http://www.xxxxxxxxxxxx',
data: {name: 'Chad'},
dataType: 'jsonp',
success: function(data){
$.each(data.posts, function(i,post){
$.mobile.notesdb.transaction(function(t) {
t.executeSql('INSERT into bill (barcode, buildingcode, buildingaddress, flatname, flatdescription, entryseason, period, amount, pastpayments, todaypayments, receiptno) VALUES (?,?,?,?,?,?,?,?,?,?,?);',
[post.Id, post.Code, post.Address, post.Name, post.Description, post.EntrySeason, post.Period, post.Revenue, post.PastPayments, post.todaypayments, post.receiptno],
function(){
bill = 1;
$('#mycontent').append("bill - OK");
}
);
});
});
}
});
I want bill - OK displayed only once after all data inserted into sqlite.

try this:
success: function(data){
var count = data.posts.length;
$.each(data.posts, function(i,post){
$.mobile.notesdb.transaction(function(t) {
t.executeSql(<...>,
function() {
bill = 1;
if (--count == 0) {
$('#mycontent').append("bill - OK");
}
}
);
});
});
}

try to add:
$.ajax({
url: 'http://www.xxxxxxxxxxxx',
data: {name: 'Chad'},
dataType: 'jsonp',
async: false, //this line here
//...
EDIT
OK, what about:
$.each(data.posts, function(i,post){
//rest of stuff
});
$('#mycontent').append("bill - OK"); //this line outside the each() call