http://jsfiddle.net/ADvCJ/124/ works without the $.getJSON so that tells me Im having a problem with $.getJSON to work. I searched all over the place and cannot find solution to this issue. Please help!
Other thing I noticed it duplicates the four items from JSON how do I stop duplicating them?
code
$(document).ready(function() {
$.getJSON("js/dataPokerPlayers.json", function(data) {
$.each(pokerplayers, function(i, data){
$(".tableData tbody").append("<tr><td>" + data.rank + "</td><td>" + data.name + "</td><td>" + data.earnings + "</td><td>" + data.points + "</td><td>" + data.totalearnings + "</td></tr>");
});
});
});
It looks like there were a couple of changes required.
Firstly, the table needed a <thead> around the heading row.
<table class="tableData">
<thead>
<tr>
<th>Rank</th>
<th width="250">Name</th>
<th>Earnings</th>
<th>Points</th>
<th>Total Earnings</th>
</tr>
</thead>
<tbody></tbody>
</table>
And secondly, the JSON URL wasn't really returning JSON; it was regular Javascript. var pokerplayers = needed to be removed from the start and ; removed from the end of the content.
Related
We use Knockout.js and MVC in a Webapp and are having an issue, where the order merchandise total observed is 0 by Knockout.js, as displayed in the GUI.
The code seems to be working intermittently, because sometimes we do show the merchandise total in other orders. All orders use the same code and a merchandise total non zero value is always seen in the
OrderDetailClientViewModel object within the controller before being passed to the view. The view is coded in Knockout.js and plain javascript.
The "Totals" property shown below is an object (Models.OrderTotalViewModel), which contains the "MerchandiseTotal" field, which is sometimes showing a 0. I'm showing the relevant parts of the two view files below. I don't see the merchandiseTotal value being modified erroneously in the code. Only helpful segments are shown below.
Any suggestions to fix this intermittent behavior would be greatly appreciated!!!
Thank you,
Ken
--Edit.cshtml
#model Models.OrderEditPageViewModel
...
var rawViewModel = #(Html.ToJson(Model.OrderDetailClientViewModel()));
var viewModel = ko.mapping.fromJS(rawViewModel,
{
'HeaderData': {
create: function(options) {
options.data.StartDate = new Date(options.data.StartDate);
options.data.EndDate = new Date(options.data.EndDate);
var headerData = ko.mapping.fromJS(options.data);
headerData.errors = new HeaderDataError();
return headerData;
}
},
'Totals': {
create: function(options) {
var totals = ko.mapping.fromJS(options.data);
totals.errors = new TotalsError();
totals.isPromoCodeApplied = ko.observable(false);
if ($.trim(totals.PromoCode()) !== "")
totals.isPromoCodeApplied(true);
return totals;
}
}
});
...
-- This segment in Edit.cshtml shows where the OrderTotalViewModel.cshtml is called for Totals.
<tr>
<td colspan="3">
#Html.EditorFor(m => m.Totals)
</td>
</tr>
--OrderTotalViewModel.cshtml
#model Models.OrderTotalViewModel
#{ Layout = null; }
...
<td colspan="3" style="text-align:right">
<table class="PaddedTable" style="width:925px">
<tbody>
<tr>
<td style="width:125px;text-align:right">Merchandise Total:</td>
<td style="text-align:right" class="NormalTextBold">
#(Html.Knockout().SpanFor(m => m.MerchandiseTotal)
.HtmlAttributes(new { #class = "NormalTextBold" })
.Currency())
will bootgrid work with non numeric column-id as the identifier, if its a unique value?
<th data-column-id="mytextid" data-identifier="true">Unique Text ID</th>
Will selection="true" work for instance? Or do I need a numeric value for the identifier column?
OK tried it in fiddle. You can have a non numeric data-identifier. (IMHO it should be called data-row-identifier...)
In order to access that column you simply use the name you set in the data-column-identifier, so:
<!-- works!! even without data-type="numeric" -->
<th data-column-id="myid" data-identifier="true">My ID</th>
<th data-column-id="info">Info</th>
</tr>
</thead>
and the code should be
$("#mygrid").bootgrid(
{
// other settings... and:
selection: true
}).on("selected.rs.jquery.bootgrid", function(e, rows)
{
alert("Selected: " + rows[0].myid);
});
Here's a jsfiddle to prove the point
I'm using Knockout for data binding and using dataTable+YADCF for Sorting and filtering. My scenario is little complex, on clicking the Category nodes (left side) each time need to make an AJAX call and refresh the table data (right side) through Knockout. This Knockout binding functionality works fine without any issue.
HTML Code
<table class="pdm-data-table pdmList" id="ListCatAttrVal" data-link="row">
<thead>
<tr>
<th>Display Name</th>
<th>Display Source</th>
</tr>
</thead>
<tbody id="listAttribute" data-bind="foreach: attributevalue">
<tr>
<td data-bind="text: dispName"></td>
<td data-bind="text: dispSrc"></td>
</tr>
</table>
Knockout Model Code
if (!ko.dataFor(document.getElementById("listAttribute"))) {
var attributeModel = function () {
this.attributevalue = ko.observableArray();
};
attributeBinding = new attributeModel();
ko.applyBindings(attributeBinding, document.getElementById("listAttribute"));
}
Issue is after applying DataTable for the Table
$("#ListCatAttrVal").dataTable().fnClearTable();
for (var x in response.attributes) {
attributeBinding.attributevalue.push(response.attributes[x]);
}
$("#ListCatAttrVal").dataTable();
After this, Datatable Sorting is not working.
I'm trying to remove the existing generated dataTable and re-initiate it every-time when I click on the category node. But it is not working as expected.
I had a similar issue while working with knockout and datatables - my bindings inside the datatable don't seem to work initially. As a workaround I ended up initialising the datatable in the following way:
var table = $("#ListCatAttrVal").dataTable();
table.fnPageChange(0, true);
After calling fnPageChange (or any other function of datatable library, I believe) bindings seem to be working.
Hey All I've been searching around for awhile and haven't much luck finding the reasoning behind this so hopefully somebody can help me. I don't understand why it is returning newline characters
$('#tbl tr td').click(function () {
// Here selection =" 710-610A " spaces are included
var selection = $(this).text();
alert(selection)
$.ajax({
type: "Post",
url: "/Home/Index/",
dataType: "json",
data: { grpCode: selection },
success: function (ResponseData) {},
error: function (errorResponse) {
alert('AJAX Call Failed');
}
// When passed grpCode = "\n 710-610A\n "
I dnt understand why theres so many spaces along with it
[HttpPost]
public ActionResult Index(string grpCode)
{
// do something
}
I'm thinking it has something to do with the way I'm displaying my table in the View
<table id="tbl">
<tr>
<th>
Groups
</th>
</tr>
#foreach (var item in Model.groupCodesList.Select(m=> m.Group_Code).Distinct())
{
<tr>
<td>
#item
</td>
</tr>
}
</table>
I am using EF Code First to retrieve Data
I solved the problem by adding .trim() to my text
$('#tbl tr td').click(function () {
var selection = $(this).text().trim();
alert(selection)
Does anybody know why this was an issue?
The contents of
<td>
#item
</td>
is
"
#item
"
(as a multi-line string literal)
Normally, in HTML, the whitespace is mainly ignored, but they're still part of the content. They have to be, you could be using CSS's white-space to make them visible (like <pre>). So when you use JQuery's .text(), you get the full contents, including seemingly redundant whitespace.
If you make sure there is no whitespace in the first place,
<td>#item</td>
no extra whitespace will get inserted.
I have a homepage that will display a table with some data for each user. The back-end handles that and I have a list in my model. I am trying to view a dynamic table based on this list and be able to delete elements from without having to hit refresh. I do not know where to start to do something like this. Any help?
Here is what I have so far:
Inside HomePage controller I have an action returning Json representation of the model. Have of 'HpModel' gets set in the login controller and the other is in this one:
public JsonResult GetUserInfo(HomePageModel HpModel)
{
DBOps ops = new DBOps();
HpModel.PhoneDisplay = ops.getDisplayInfo(HpModel.ExtNum);
HpModel.NumberOfLines = HpModel.PhoneDisplay.Count;
return Json(HpModel);
}
In my view I have a javascript to grab this model:
function getInfo() {
alert('here');
$.ajax({
url: '#Url.Action("GetUserInfo", "HomePage")',
data: json,
type: 'POST',
success: function (data) {
alert(data);
}
});
}
I am not sure what is going wrong, and not 100% sure its the way to be done anyway.
Help is appreciated :)
One more idea. You may use jQuery to hide and callback function to $Post to your Delete ActionResult.
For examp: (here I created easy example without $post: jsfiddle)
<script>
$('.delete').click(function()
{
$(this).closest('tr').hide(callback);
function callback() {
$post(/Home/Delete/....
});
</script>
<table>
<tr>
<td>Marry</td>
<td>10 points</td>
<td><a class="delete" href="#">Delete</a></td>
</tr>
<tr>
<td>Jane</td>
<td>8 points</td>
<td><a class="delete" href="#">Delete</a></td>
</tr>
<tr>
<td>Lara</td>
<td>5 points</td>
<td><a class="delete" href="#">Delete</a></td>
</tr>
</table>