We Keep Coding

How to pass global variable data inside ajax load data in jquery?

I have an HTML Table and I am retrieving the data (using Jquery function) from the specific <td> VALUES and pass the data to another java server page using Ajax.
This is the table <tr>
<tr height=40 style='mso-height-source:userset;height:30.0pt'>
**<td class=xl86 style='border-left:none' contenteditable="true"> </td>
<td class=xl86 style='border-left:none' contenteditable="true"> </td>
<td class=xl86 style='border-left:none'contenteditable="true" > </td>
<td class=xl86 style='border-left:none'contenteditable="true"> </td>**
</tr>
I code a jQuery function for retrieving these table values individually that is below.
$(document).ready(function () {
var col1=" ";
var col2=" ";
var col3=" ";
var col4=" ";
$('#btn_read_HTML_Table').click(function () {
$('#mytable tbody>tr').each(function () {
var currentRow=$(this).closest("tr");
col1=currentRow.find("td:eq(0)").text();
col2=currentRow.find("td:eq(1)").text();
col3=currentRow.find("td:eq(2)").text();
col4=currentRow.find("td:eq(3)").text();
var data1=col1+"\n"+col2+"\n"+col3+"\n"+col4;
});
$.ajax({
url: "load_tabledata.jsp",
type:'POST',
data:{c1: col1,c2:col2,c3:col3,c4:col4},
success: function (data, textStatus, jqXHR) {
console.log(data);
}
})
});
});
Problem is Ajax taking empty value of var col,col2,col3 and col4 but inside function table values retrieving.
I want to get these retrieved values in my ajax function so that I could pass these values inside the data.

How to Refresh a dynamic table without refreshing the whole html page

I have a dynamic table that displays data from a mysql database. My database is updated every time in the server. I want to refresh only the table every 2 seconds without refreshing the whole page. How can do this? Please help how accomplish this?.
Parts of my table look like this:
<table id="getdata" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCFF00">Name</td>
<td bgcolor="#CCFF00">Comment</td>
<td bgcolor="#CCFF00">DatePosted</td>
</tr>
</table>

You will need to use a client-side scripting language such as javascript in order to be able to refresh certain contents on your HTML page. A very common library that is used is jQuery.
PHP
# ajax.php
$contents = '<table class="table table-hover">
<thead>
<tr>
<th>Sound</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bzzz Bzz</td>
</tr>
</tbody>
</table>';
echo json_encode($content);
HTML/Javascript
<button class="refresher">Refresh table</button>
<table id="table-to-refresh">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.refresher', function () {
$.ajax({
url: 'ajax.php',
method: get,
dataType: 'json',
success: function(response) {
$('#table-to-refresh').html(response);
}
});
});
});
</script>
Additional reading
jQuery Docs - Ajax

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('file.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
in file put your full html and php sql code like full code by which you are generating that table.
check this for refrence http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html

Use ajax on an specified time interval like:
$.ajax({
url: 'your_url',
method: get,
data:
{
var1 : val1
},
success: function(response)
{
$('#getdata').html(response); // it will update the html of table body
}
});

just do this:
$.ajax({
contentType: contentType,
dataType: dataType,
type: type,
url: urlGetsearch,
data: '{textvalue: "' + $("#tableId").val() + '" }',
success: function (textvalue) {
$("#tableId").html(htmlData);
},
});
}
The controller is look like this:-
[HttpPost]
public ActionResult Getsearch(string textvalue)
{
your code.....
}

How to use ajax.reload or fnReloadAjax in Data Tables?

manage_course_subject.php code table
<table id="manage_course_subject" class="display table table-hover ">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
When I click onclick="return add_course_subject_form();"
In file script.js use this function
var table = $('#manage_course_subject').dataTable();
function add_course_subject_form(){
$.ajax({
type:"POST",
url:"process.php",
data:$("#add_course_subject_form").serialize(),
success:function(data){
//close modal
$(".close").trigger("click");
//show result
alert(data);
//reload page
// location.reload();
// manage_course_subject.api().ajax.reload();
// table.fnReloadAjax();
// table.api().ajax.reload();
// table.ajax.reload();
// table.api().ajax.reload();
}
});
return false;
}
When I use fnReloadAjax() I include
var imported = document.createElement('script');
imported.src = 'media/js/fnReloadAjax.js';
document.head.appendChild(imported);
I try but didn't work the 2nd way
Can anyone help me?

jQuery beforeSend !confirm alerts twice

I have a button that, when clicked, triggers a borrame() function:
$("div").on ("click", ".bBorrar", function () {
var id = $(this.parentNode.parentNode).attr("id");
var tabla = $("table").attr("id");
borrame(id, tabla);
});
The borrame functions is the following:
function borrame(id, tabla) {
$.ajax({
url: "includes/borra.php",
type: "POST",
data: {id: id, tabla: tabla},
beforeSend: function() {
if (!confirm("Are you sure?")){
exit(0);
}
},
success: function(data) {
alert(data);
var este = "#"+id;
$(este).remove();
},
error: function() {
alert ("Error");
}
});
}
What I don't understand is why the "Are you sure?" confirm appears twice when I click the button. Any ideas?
UPDATE This is the HTML:
<table>
<tbody>
<tr>
<th>info</th><th>info</th><th>info</th>
</tr>
<tr id="1">
<td>info</td>
<td>info</td>
<td>info</td>
<td><button class="bBorrar btn btn-danger">Delete</button></td>
</tr>
</tbody>
UPDATE 2: The HTML is dinamically generated by PHP.

try with $(document) object, instead of div, multiple divs can make multiple requests.
$(document).on("click", ".bBorrar", function () {
var id = $(this.parentNode.parentNode).attr("id");
var tabla = $("table").attr("id");
borrame(id, tabla);
});

how to load all matching data row for selected dropdown values ajax

i have dropdown boxes for user_id and er and once both selected i want to load all the data as rows. please advice.
below is my controller
$getShifts = Shifts::Where('user_id','=',$user_id)->Where('week_id','=',$week)->get();
how can i proceed
table
<table class="table table-hover">
<tr class="table-header">
<th>Day</th>
<th>Date</th>
<th>Start</th>
<th>End</th>
<th>Total
<br/> Hours
</th>
<th>Run
<br/> Type
</th>
<th>Edit
<br/> / Delete
</th>
</tr>
EDIT
plese check below code which i have tried
success: function(data) {
var json_obj = $.parseJSON(data);//parse JSON
var output="<tr>";
for (var i in json_obj)
{
output+=
"<td>" + json_obj[i].id + "</td>"+
"<td>" + json_obj[i].bus_no + "</td>"+
"<td>" + json_obj[i].shift_no + "</td>"
;
}
output+="</tr>";
$('#span').html(output);
}

You should call your controller function in ajax and in controller you will get the selected data, so based on that run required query.
$(document).ready(function() {
$("#combo, #user_id").change(function(){
var combo = $('#combo option:selected').val();
var user_id = $('#user_id option:selected').val();
if(combo && user_id) {
$.ajax({
url: "path to controller function",
type: "POST",
dataType: "HTML",
async: false,
data:{combo:combo.user_id:user_id},
success: function(data) {
alert(data) // here you ll see the data from controllen, you can manipulate according to your requirement.
}
});
}
});
});
in controller
echo "
<tr>
<td>$day</td>
<td>$date</td>
<td>$start</td>
<td>$end</td>
<td>$end</td>
<td>$end</td>
</tr> ";
manipulate all fields in to a tr in controller and in ajax success() append the data to table.