Below I've added my full Index.cshtml code. In ajax call it's hitting to success method. but i'm not able to reload or refresh the table without page refresh.
The below code is simple while clicking the submit button for filters i'm calling SubmitFilter method it redirect to c# method there i'm storing the results in a JArray variable.. then trying to reload the table...
this is the sample output screen
I've tried these
$("#tblTransactions").DataTable().draw();
$("#tblTransactions").DataTable().ajax.reload();
But it's not working for me. please Let me know if you got any idea ..thanks in advance..
#page
#model IndexModel
#{
Layout = "_Layout";
}
<script>
$(document).ready(function () {
$("#tblTransactions").DataTable();
});
function SubmitFilter()
{
var transactionNumb = $("#transactionNumber").val();
var cardHolderName = $("#cardHolder").val();
alert("SubmitFilter");
$.ajax({
type: "GET",
url: "https://localhost:7197/Transactions?transaction_number="+transactionNumb+"&cardholder="+cardHolderName,
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data)
{
}
});
}
</script>
<a style="max-width: 100px;max-height: 40px;margin-left: 10px;" href="#" onclick="SubmitFilter();" class="btn btn-primary">SUBMIT</a>
<table id="tblTransactions" class="table table-bordered table-condensed table-striped table-hover">
<thead>
<th scope="col">Transaction No</th>
<td scope="col">Type</td>
<td scope="col">Status</td>
</thead>
<tbody>
#foreach (dynamic transaction in #Model.Transactions)
{
<tr>
<td>#transaction.transaction_number</td>
<td>#transaction.type</td>
<td>#transaction.status</td>
</tr>
}
</tbody>
</table>
Related
I'm trying to add a class to the same row that the button I click on is in. I use the jquery "closest" function but it doesn't work. I also tried .parent etc. Anyone know what I do wrong?
<table class="table table-striped table-bordered table-hover">
<tbody class="">
<tr class=''> //I want to change this class
<td style=''><div class='btn btn-xs btn-success cellButton'></td>
</tr>
</tbody>
$('.cellButton').on('click', function(){
$(this).closest("tr").addClass('info')
}
EDIT: I realise now that the code I posted should work (I simplified it before posting), and the problem is because it's referencing $(this) from a different function. This is the real javascript function:
$('.cellButton').on('click', function(){
var formData = {
'action': 'blabla',
'ID': ID,
};
$.ajax({
type: 'POST',
url: 'includes/jquery-actions.php',
data: formData,
dataType: 'json',
error: function (response) {
alert("error!");
},
success: function (response) {
var row = $(this).parents("tr"); //$(this) here not referencing the HTML button?)
row.addClass('warning');
}
})
}
Your version is working. Also
you can use jQuery#parents function. Give it the selector, it will tries to find the closest one and return that element.
parents
$('.cellButton').on('click', function() {
$(this).parents("tr").addClass('info');
});
.info {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody class="">
<tr class=''>
<td style=''><div class='btn btn-xs btn-success cellButton'>Click me</td>
</tr>
</tbody>
closest
$('.cellButton').on('click', function() {
$(this).closest("tr").addClass('info');
});
.info {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody class="">
<tr class=''>
<td style=''><div class='btn btn-xs btn-success cellButton'>Click me</td>
</tr>
</tbody>
UPDATED
There is an issue with context.
You can keep your this in above the ajax request and use that variable inside the function
var that = this;
...
success: function (response) {
var row = $(that).parents("tr");
row.addClass('warning');
}
Or just use arrow functions
success: (response) => {
var row = $(this).parents("tr");
row.addClass('warning');
}
I have a datatable it have a search box (date range filter) once i click the search button table body replace according to the filter(ajax).
my problem is i cant initialize table after ajax success.
HTML
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
Ajax
type: 'POST',
url: "../system/user/modules/" + MODULE_NAME + "/controller.php",
data: "action=filterOc&" + url_data,
success: function (resultData) {
$('#occupancyBody').html(resultData);
$('#occupancy').dataTable();
}
});
sample screenshot
You can use below mentioned code to reinitialize table after ajax call.
While defining datatable, you can store in a variable.
var myTable = $('#occupancy').DataTable({ // all your configuration });
Now after ajax call you can call below line.
myTable.ajax.reload();
also remove this line in ajax:success function.
$('#occupancy').dataTable();
Let me know if it not works.
Please check here
$(document).ready(function(){
var table = $('#occupancy').dataTable();
$.ajax({
type: 'POST',
url: "../system/user/modules/controller.php",
data: "action=filterOc&",
success: function (resultData) {
$('#occupancyBody').html(resultData);
table.ajax.reload();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" rel="stylesheet"/>
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
The ajax.reload() API function should only work if you included the ajax option in Datatable's initialization (see here).
In this case, I'd recommend to add destroy:true to the initialization of Datatables, something like this:
$('#occupancy').DataTable({ destroy:true})
This would allow you to re-create the table every time the ajax call is successful.
hi i guess you selected wrong body id :
$('#occupancyBody').html(resultData);
but in your html :
<tbody id="dailyAct">
hope it's help,
I have a js file named admin.js which has knockout js functionality.
function AppViewModel() {
var self = this;
self.alldata = ko.observableArray();
self.viewAllInvoice = function() {
$.ajax({
type: 'POST',
url: BASEURL + 'index.php/main/learn_Ko/',
contentType: 'application/json; charset=utf-8'
})
.done(function(invoices) {
alert("hello");
self.alldata.removeAll();
$.each(invoices, function(index, invoice) {
self.alldata.push(invoice);
});
})
.fail(function(xhr, status, error) {
alert(status);
})
.always(function(data) {});
};
self.viewAllInvoice();
}
$(document).ready(function() {
ko.applyBindings(new AppViewModel(), document.getElementById('loanersclub_wrapper'));
});
I am trying to call the function in this page like this.
<script type="text/javascript" src="<?php echo base_url();?>js/admin.js" ></script>
<div style="margin-top:30px;" class="container" id="loanersclub_wrapper" class="wrapper">
<h1>HELLo</h1>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="text-center">1</th>
<th class="text-center">2</th>
</tr>
</thead>
<tbody data-bind="foreach: alldata">
<tr>
<td class="text-center"><span data-bind="text: $data.Loantime "></span></td>
<td class="text-center"><span data-bind="text: $data.Amount"></span></td>
</tr>
</tbody>
</table>
</div>
The thing is that, I am getting this data from a controller since I am using php, and I checked the controller does get the information as arrays, but the js file is not getting any thing, I even tried using alert, but seems like the function self.viewAllInvoice is not getting called at all.
You either need to set the value of BASEURL to the base url of your website, or use a relative path in your ajax call:
$.ajax({
type: 'POST',
url: '/index.php/main/learn_Ko/',
contentType: 'application/json; charset=utf-8'
})
I'm trying to post on ajax from a ajax get.
Here is my code below that I'm using:
$(window).load(function() {
$.ajax({
url: "/masterScreen/ajaxdealerpaid/{{$id}}",
type: "GET",
data: {},
success: function(data) {
document.getElementById("dealerPaid").innerHTML=data;
}
});
});
And then i'm trying:
$(".pay").click(function(){
alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
var id = $(this).attr('data-id');
var amountPaid = $("#payAmount_"+id).val()
$.ajax({
url: "/masterScreen/dealermarkpaid/"+id+"/"+amountPaid,
type: "POST",
data: {},
success: function(data) {
alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
location.reload();
}
});
});
My HTML is...
<table style="width: auto;" class="table table-striped table-condensed" border="0" cellspacing="0" cellpadding="0">
<thead class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px;">
<tr>
<th class="span2">Quote ID</th>
<th class="span4">Customer name</th>
<th class="span4">Connection date</th>
<th class="span4">BDM</th>
<th class="span4">Owed</th>
<th class="span4">Amount</th>
<th class="span2"></th>
</tr>
</thead>
<tbody id="dealerUnpaid" style="display:block; overflow:auto; max-height:400px;">
</tbody>
<tfoot id="dealerUnpaidtot" class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px; font-weight: bold;">
</tfoot>
</table>
It displays the data from the first javascript, but I also have this code from the view it's GET from...
<td class="span4"><input type="text" placeholder="Enter Amount" class="payAmount" data=name="amount" data-id="{{$unpaid->id}}" id="payAmount_{{$unpaid->id}}"></td>
<td class="span2"><input type="button" class="btn pay" value="Pay" data-id="{{$unpaid->id}}"></td>
When I press the Pay button it doesn't do anything :/
Any help to make this work would be nice please.
Thanks guys
If I understand correctly, you're loading your markup (including the .pay element) using AJAX and then attempting to bind something to the .pay element's click event. Since the .pay element doesn't exist in the page at the time you're doing the binding, the binding isn't working. Change your binding from:
$('.pay').click(function(){
to
$(window).on('click', '.pay', function(){
That will attach the binding to the window, which has the effect of working even on elements that are added after the window is loaded.
$(".pay").click(function(){...
Works only on already create elements with class pay, it doesnt work on newly created elements by ajax call.
You can use delegate function to handle newly created elements
$("body").delegate(".pay","click",function(event){
event.preventDefault(); // prevent default handlings
alert("Test");
//do other code...
});
There is something wrong with the way I am using the ajax call.
When I place the ajax call inside the block, it executes the error function in the ajax callback. When the ajax call is moved outside the block, the variable subcate passed to server is undefined.
var that = this;
var subCate ='' ;
var tr = $('#tbl').find('tr');
//My block
tr.bind('click', function(event) {
var values = '';
tr.removeClass('highlight');
var tds = $(this).addClass('highlight').find('td');
subCate = tds.find('#myid').text();
alert(subCate);
//Tried moving it out of the block but not much of help
$.ajax({
url: '/playground',
type: 'POST',
data: { id: subCate},
success: function(data){
alert("Sub category recvd");
console.log("successs");
},
error: function(jqXHR){
console.log("failed");
alert("failed");
}
});
});
//Ajax call moved here
Here is the node.js server code :
app.post('/playground', function(req, res) {
debug("Inside post(/playground) ",req.body.id);
res.send('ok', 200);
});
Hi Here is the snippet of HTML table, that will give an idea what the jquery code is doing
<div id="category-container">
<div id="category-form">
<h1></h1>
<p id="sub1" class="subheading">Select a category</p>
<!--hr-->
<div style="margin:20px" class="container">
<table id="tbl" class="table table-bordered table-striped">
<thead>
<tr>
<!--th(style='width:40px') #-->
<th style="width:180px">Name</th>
<th style="width:200px">Location</th>
<th style="width:180px">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="myid"><a id="item" href="/playground/:0">Electronics</a></div>
</td>
</tr>
<tr>
<td>
<div id="myid"><a id="item" href="/playground/:1">Real Estate</a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thanks in advance guys !
Add event.preventDefault() at the top of your bind.
Also, I recommend changing the event binding to the following:
$('#tbl').on('click', 'tr', function(event) {
event.preventDefault();
// your code
});