I have a scroller in my page containing 10 static tables which I scroll using jquery-als anylistscroller. The problem is that my data source contains many objects so when I update the tables the only result I get is the last 10 elements from the data source. I tried using setTimeout function to delay the update of values but that didnt work and I could not add tables dynamically to the page.
here is example of the tables
<div id="lista2" class="als-container">
<div class="als-viewport">
<div class="als-wrapper">
<div class="als-item">
<table id="table" border="1">
<tr class="cla">
<th rowspan="2" id="01">
<img title="img1" id="img01" height="30" width="30" src="~/Images/orderedList0.png">
</th>
<th id="111">qte
</th>
<th id="112">var
</th>
</tr>
<tr>
<td id="121">prix
</td>
<td id="122">symb
</td>
</tr>
</table>
</div>
here where I update the values :
$.ajax({
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
url: '#Url.Action("getTickerObjects", "Home")',
success: function (ListTicker)
{
for (var i = 0; i < ListTicker.ListTicker.length; i++)
{
var obj = ListTicker.ListTicker[i];
Update(c, obj.QteE.toString(), obj.Trade_Price.toString(), obj.Price_Trade_Variation.toString(), obj.Mnemonic.toString().trim());
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
Is there a way I can slow down the updating process ?
You can try the defered attribute on an <script> tag that points to an external file. Try placing it before the closing </body> tag. Here' an article
<script src="script.js" defer="defer"></script>
Related
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>
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 have a select dropdown and I can display/remove the condition outputs from my script except for one. What I'm having trouble is removing/deleting the rows created by the $.each. I'm still new with js and I've searched for solutions online but I still couldn't get it to work. Here's my code so far.
<table id="view_programs" class="table table-striped table-bordered">
<thead>
<tr>
<th>Year</th>
<th width="12%">Action</th>
</tr>
</thead>
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
</table>
script
if(selectedValue == '') {
$("#delbutton").hide();
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No program selected.")
).appendTo('#view_programs');
}
else {
$.ajax({
url: '<?php echo site_url("query.php");?>',
type: 'post',
data: {option: selectedValue},
dataType: 'json',
success: function(response) {
$("#delbutton").show().attr("href", "delete/program/"+encodeURIComponent(selectedValue));
if(jQuery.isEmptyObject(response)) {
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No records found.")
).appendTo('#view_programs');
}
else {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += "<tr><td>"+value+"</td><td>"+value+"</td></tr>";
});
$('#view_programs').append(trHTML);
}
console.log(response);
}
});
}
Update:
Achieved what I wanted thanks to Mr. Simon for shedding me some light. I doubt that my code could be better so I'm open to any suggestions.
changed this
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
into this
<tbody class="toBeRemoved">
<tr>
<td colspan="2">No program selected.</td>
</tr>
</tbody>
and this
$('#view_programs').append(trHTML);
into this
$('.toBeRemoved').append(trHTML);
and turned all the #toBeRemoved into .toBeRemoved
you append your table rows to the end of #view_programs, which means after the </tbody> element... so they don't have a #toBeRemoved id which you want to remove i guess?
If you want to remove multiple rows, make sure to use a class (i.e. .toBeRemoved) instead of an id. Ids are unique identifiers for one element only.
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
});