We Keep Coding

How to make jqgrid row as a hyperlink

I am creating one jqgrid and now I want to make its rows as a hyperlink.
So whenever I click on the row it takes all row data and display it in another page???
Please suggest.

indise your grid definition add this option
.... (jqgrid initilization code)
onClickRow: function(ids){
if (ids != null) {
var data = $("#list").getRowData(ids);
location.href = ‘link where you want to go/id=’+ data.UserId;
}
},
.... (remaining initilization code )

How to refresh datatable column data

I use data table plugin with table as data source. I have to change some column value via javascript when the user types in some numbers into an input (this input is part of the table too and I have to export this values to). It is working well but when I want to export the table the columns witch was changed with javascript is not displayed in the exported file.
I think the problem is that I have not refreshed the datatable plugin. Is this correct? If yes how do I refresh the datasource? If no what can be the problem and how can I solve it?
I tried the refresh() method (var dataTableObject = $(this).parents('table').dataTable(); dataTableObject.refresh();) and the $(this).parents('table').dataTable() but is not working.
Edit: Here is how do I change the cell value:
$item.find('input.quantity-coefficient').each(function (i, d) {
$(d).off('change').on('change', function () {
var multiplier = $(this).val();
//var dataTableObject = $(this).parents('table').dataTable();
$($(this).data("row-price-info-class")).each(function (i, d) {
var priceContainer = $(d);
var price = parseFloat(priceContainer.data('price-value'));
var priceInfoRatioContainer = $(priceContainer.data("ratio-input-class"));
if (multiplier * price == 0) {
priceInfoRatioContainer.closest("td").addClass("no-euro");
priceInfoRatioContainer.html(" ");
} else {
priceInfoRatioContainer.closest("td").removeClass("no-euro");
priceInfoRatioContainer.html(localizeNumber(multiplier * price));
}
});
//TODO redrow the data
$(this).parents('table').dataTable().fnDraw();;
});
});

You can refresh the dataTable with fnDraw(). In your example:
$(this).parents('table').dataTable().fnDraw();

Thank you guys but I think I found the solution in this post: jquery DataTables - change value of a cell not just display value
When I tried it on the first time the problem was that I started the row numbering from 1 and not from 0.
So for the others who may have this issue to, I have to use something like this:
(this).parents('table').dataTable().fnUpdate("new value", 0, 2)
To update the cell value. Actually this is not what I asked because this is not refresh all the table, but this is a solution for me now.

get the amount of rows in a table

I want to get the amount of rows in a table on my page.
I am trying to do this using .execute(function(){}) but how is it possible to get a variable out of the execute function and use it there.
this isn't the counter yet, buy i can't even get a variable to work.
i tried something like this:
.execute(function(){
global.amountOfRows = 5;
})
.assert.numberOfElements('#content-list > tbody > tr', global.amountOfRows)
i tried the same using var amountOfRows = 5;
Any ideas?

Using jquery to return the number of row in your table body
$('#your_table_id tbody').find('tr').length;
http://api.jquery.com/length/
I tried this but it didnt work out as planned.

Using jquery to return the number of row in your table body
$('#your_table_id tbody').find('tr').length;
http://api.jquery.com/length/

unfortunately Dalek doesn't has the capability to do assertions on data you did get out of a execute statement at the moment, but there is a workaround for you ;)
.execute(function(){
// store as a `data` var
this.data('amountOfRows', 5);
})
// doSomeOtherStuff
.execute(function () {
// using jquery here to keep it short
var actualNumberOfRows = $(''#content-list > tbody > tr').length;
// do an "in browser" assertion
this.assert.ok((actualNumberOfRows === this.data('amountOfRows')), 'Amount of rows is as expected');
})
.done();
You can find further info on this undocumented API here:
https://github.com/asciidisco/jsdays-workshop/blob/5-js/test/dalek/javascript.js#L16-L29

Creating HTML Refresh Button that only refreshes info in a HTML Table on webpage

UPDATE: Sorry, forgot to include some of the code (face-palm). I included it in with the initial code provided so everything will be clear. I'm really new to this stuff so please forgive me for not having the time to learn jsfiddle right now (I know what it is and does though).
I have figured out the problem with the sort toggling every time the table updates. The sorting() function I put into the code was new and calling method.sorting(); inside of the getEvents(method) function solved the issue. However, I'm still stuck on the refresh button concept.
One other problem I noticed and haven't figured out how to solve is that when I load the page, I have to wait for the first setInterval to start until the table populates. How do I work around this so that when the page initially loads, it immediately loads the data without having to wait the specified time within the setInterval?
One last problem: when the table auto-updates, any rows that were added using the addRow() function disappear because they aren't part of the info from the server (and no, I can't have the rows be populated to the server); how can I make the auto-update leave the added rows in without having to get the added rows updated to the server?
I have a HTML Table that uses knockoutjs to bind the data into the columns dynamically from a server using the $.getJSON(http://.....) method. I wish to be able to create a refresh button to refresh/update the table-and ONLY the table (I.E. not refreshing the whole page).
As it is right now, the table updates using the setInterval() function at bottom of the js file, but keeps toggling the column sortings. I can't figure out how to stop this.
Here's the code snippets needed for this:
HTML file:
<table border="6" id="widget"><thead>
<tr>
<th>TimeObserved</th>
</tr></thead>
<tbody data-bind="foreach: rows">
<td><input data-bind="value: TimeObserved, valueUpdate: 'change' " /></td>
</tbody>
</table>
<div>
<button date-bind="click: addRow, enable: rows()">Add Row</button>
</div>
<script src="TableViewModel.js" type="text/javascript"></script>
Heres the javascript viewmodel file:
function Event(TimeObserved){
var self = this;
self.TimeObserved = TimeObserved;
}
function TableViewModel(){
var self = this;
self.sortColumn = ko.observable("TimeObserved");
self.sortAscending = ko.observable(true);
self.addRow = function(){
self.rows.push(new Event(""));
}
self.SortByTimeObserved(){
if(self.sortColumn == "TimeObserved")
self.sortAscending = !self.sortAscending;
else{
self.sortColumn = "TimeObserved";
self.sortAscending = true;
}
self.rows.sort(function(a,b){
if(self.sortAscending == true)
for(self.TimeObserved in self.rows)
return a.TimeObserved > b.TimeObserved ? -1 : 1;
else
return a.TimeObserved < b.TimeObserved ? -1 : 1;
});
}
self.sorting = function(){
if(self.sortColumn() = "TimeObserved"){
self.rows.sort(function(a,b){
if(self.sortAscending() == true)
for(self.TimeObserved in self.rows)
return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0;
else
return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0;
}
}
}
//Access the server and pulls the info from it. I also apply my sorting() method to initially sort the info here.
function getEvents(model){
$.getJSON("http://mywebpage.com",
function (data){
model.rows([]);
$.each(data.d, function(i,item){
hendleEvent(item)
});
model.sorting();
}
);
}
//Populates the rows of the table with the info from the server I.E. item."infoIwant"
function handleEvent(item){
var newEvent = new Event(item.TimeObserved);
this.Model.rows.push(newEvent);
}
this.Model = new TableViewModel();
var eventInterval = setInterval(function(){
getEvents(this.Model);
}, 5000);
ko.applyBindings(this.Model);

You should take a look at the knockout mapping pluggin:
http://knockoutjs.com/documentation/plugins-mapping.html
-- UPDATE
Also take a look at understanding the MVVM pattern
http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/

I solved it by making the table itself update dynamically instead of having to rely on a button. The info is supposed to be read only anyway so editing is not a factor to consider. I also somehow got it to not undo the current sort that is activated.
by adding this into the viewmodel, I set the table to update after the given interval time:
var eventInterval = setInterval(function(){
getEvents(this.Model);
), 5000); //<-- in milliseconds

Can't get javascript/jquery to sort elements correctly more than one time

I have child divs that I'm trying to sort based on a jquery .data() value that I give them that is just a single number. This code works perfectly, but only once, after that I can't figure out how the heck it's sorting them. Here is a simplified version:
var myArray = $('#container div').get();
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
$('#container').empty().append(myArray);
I've tried so many other different methods of sorting, other plugins, etc., and I can't get anything to work right. This is as close as I can get. I just have this running on a jquery change event.
Here is the whole thing in case I'm doing something stupid elsewhere:
$('#attorneyFilter').change(function() {
//get array of links for sorting
var myArray = $('#attorneyBlocks div').get();
var selectedArea = $(this).val();
//sort alphabetically when "all" is selected
if (selectedArea == 'all') {
$('#attorneyBlocks div').show();
myArray.sort(function(a,b) {
return $(a).text() > $(b).text() ? 1 : -1;
});
//filter attorneys based on practice area and then assign its order# to the div with data, getting all values from the div's class
} else {
$('#attorneyBlocks div').hide().each(function() {
var attorneyArea = $(this).attr('class').split(', ');
for (var i=0;i<attorneyArea.length;i++) {
var practiceArea = attorneyArea[i].split('-');
if (selectedArea == practiceArea[0]) {
$(this).show().data('order',practiceArea[1]);
}
}
});
//sort based on order, the lower the number the higher it shows up
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
}
//append order back in
$('#attorneyBlocks').empty().append(myArray);
});
And a link to the page in question

Here's a jsFiddle with this working using .detach() instead of .empty() to keep the data.
http://jsfiddle.net/shaneblake/Tn9u8/

Thanks for the link to the site, that made it clear.
It seems to me you never clear out the data from the prior time. You hide everything but maybe something like this will solve your problem (here I set everything hidden to the bottom, you can clear it or use a different value -- as long as it is not the same as any sort key):
$('#attorneyBlocks div').hide().data('order',999999).each(function() {
var attorneyArea = $(this).attr('class').split(', ');
for (var i=0;i<attorneyArea.length;i++) {
var practiceArea = attorneyArea[i].split('-');
if (selectedArea == practiceArea[0]) {
$(this).show().data('order',practiceArea[1]);
}
}
});
Also, the code on the server is missing the 2nd line you have above:
var myArray = $('#attorneyBlocks div').get();
The problem is the change event is tied to the original items. After the sort you make all new items. They don't have any event tied to them. You will need to use .live()

Eventually figured it out, the data values from hidden divs were screwing with my sorting, so I changed my sorting code to only pay attention to :visible divs and that did the trick. Doh! Thanks for your help everyone.