The page I am trying to create is an edit page for different labtests. Each labtest has different results that fall under it and different normal ranges (hence the Min/Max) so the values are from a SQL SELECT statement in PHP then sent to Smarty. I am using BootStrap hence why I went with X-editable.
I want to use X-editable to edit these lab test values, but am running into issues in the foreach statement. The edit function works for the first row, but not the following rows. My understanding is it is because they have the same id (I.E. a id=""). Is there any way around this? I am quite new to JS so I am struggling to come up with solutions.
Shooting in the dark here, but I could try using the PK in addition as part of the id and send the array to the JS to loop through as well to make the link editable in JS? It seems a bit silly logically though so hopefully there is a better way?
Here is what I have done.
<table class="table table-striped">
<thead>
<th>Test Type</th>
<th>Measurement Unit</th>
<th>Min. Male</th>
<th>Max. Male</th>
<th>Min. Female</th>
<th>Max. Female</th>
<th>Min. Child</th>
<th>Max. Child</th>
</thead>
{foreach from=$alltests item=alltests}
<tr>
<td>{$alltests.valuename}</td>
<td>{$alltests.Units}</td>
<td>{$alltests.MaleMin}</td>
<td>{$alltests.MaleMax}</td>
<td>{$alltests.FemaleMin}</td>
<td>{$alltests.FemaleMax}</td>
<td>{$alltests.ChildMin}</td>
<td>{$alltests.ChildMax}</td>
</tr>
{/foreach}
{literal}
<script>
$(document).ready(function() {
$('#TestName').editable();
$('#TestPrice').editable();
$('#valuename').editable();
$('#Units').editable();
$('#MaleMin').editable();
$('#MaleMax').editable();
$('#FemaleMin').editable();
$('#FemaleMax').editable();
$('#ChildMin').editable();
$('#ChildMax').editable();
});
</script>
{/literal}
Thank you for your time!
Have you tried doing it with one class instead of id?
<td>{$alltests.valuename}</td>
<td>{$alltests.Units}</td>
and so on, and then:
$('.is_editable').editable();
Related
I just included some logging into my application. For testing purpose, I filled the database with some test values (basically the same row over and over again, about 27k rows..).
Now I wanted to print the data on a view, doing this:
<table id="chatLogs">
<thead>
<tr>
<th>ID</th>
<th>Message ID</th>
<th>User Agent</th>
<th>IP:Port</th>
</tr>
</thead>
<tbody>
<?php
foreach($chatlogs as $log){ ?>
<tr>
<td><?=$log['ID'];?></td>
<td><?=$log['messageID'];?></td>
<td><?=$log['userAgent'];?></td>
<td><?=$log['IP'];?></td>
</tr>
<?php }
?>
</tbody>
</table>
$log is a variable I'm getting using the Database-Interface called Medoo.
Additionally, I included jQuery DataTables for better and sortable tables.
<script>
$(document).ready( function () {
$('#chatLogs').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
});
} );
</script>
Now, until everything is done and the page is fully loaded, it takes about 15 seconds (with the 27k test-rows).
I just tested the same query directly on the database, and it takes 0.02 seconds, so its definetely about the PHP, not about the SQL.
And it seems like echoing everything in the table takes some time, as well as "loading it into DataTables"...
Now the question is: Is it possible to have it loading faster or instantly, and load the data, when its needed? I mean like only load the data into JSON and not echoing everything first (which is the longest part)? Because in the table, there are only 10 rows first anyway, and everytime I click on the next page, it could render it. Ofcourse though, all data would still need to be available for search.
Any ideas?
You could improve the loading time by loading only a set of records at a time using limit $start $stop to improve performance using php and sql or you could use "iDisplayLength", property of DataTable to do so.
On my website I have a schedule optimization for semester, classes, times, and locations. After optimization is run, several tables of choices show up. I want to show an empty semester in the table. here is an example of what I mean:
I know my table looks ugly, but I can't put blanks in the table to make the columns / side complete because i'm running complex calculations on the data in the table that would get disrupted if I were to put blanks in (it would try to do look-ups on blanks). I can't tell it to ignore the box if it's a blank either (Just go with me here). So, is there a way to add a note in that area that says "No classes for this semester" programmatically? The results are often different sizes so I can't like hardcode in a location on my website for the note. I need it to just know where to go. I didn't think this was possible but wanted to pose the idea to you guys. Ideas?
This would be the end goal:
--tons of results in form of tables ---
one example result:
IF it is even possible to close in the table so it's a complete box that would be great. ****I NEED A JAVASCRIPT / JQUERY SOLUTION
UPDATED: Based on the replies so far, I tried this:
if(classes.length === 0){
var $noClasses = $('<td></td>').html('No Classes available');
$noClasses.colSpan = "3";
$table.append($noClasses);
}
and this gave me
Use rowspan and colspan to accommodate the 'awkwardness' of your table structure. The table structure is still standard, you're just wanting to span your cells across rows and/or columns:
HTML
<!DOCTYPE html />
<html>
<head>
<style>
td,th{
border-style: groove;
}
</style>
<title></title>
</head>
<body>
<table>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
<th>Title4</th>
</tr>
<tr>
<td rowspan="3">Semester1</td>
<td>Class1</td>
<td>Time1</td>
<td>Loc1</td>
</tr>
<tr>
<td>Class2</td>
<td>Time2</td>
<td>Loc2</td>
</tr>
<tr>
<td>Class3</td>
<td>Time3</td>
<td>Loc3</td>
</tr>
<tr>
<td>Semester2</td>
<td colspan="3">No Classes available</td>
</tr>
<tr>
<td>Semester3</td>
<td>Class1</td>
<td>Time1</td>
<td>Loc1</td>
</tr>
</table>
</body>
</html>
Result
So here is the code that ended up working:
if(classes.length === 0){
var $noClasses = $('<td colspan="3"></td>').addClass('noClass').html("No Classes ");
}
but I had to take out some of the html/css from the javascript because it was getting too confusing to implement this part. I made a template with icanhaz and converted some of the code and then this worked.
I ended up reporting this issue as a bug. Seems to affect webkit browsers. https://code.google.com/p/chromium/issues/detail?id=233677
Original question below.
I'm using jQuery 1.8.1 with Christian Bach's tablesorter 2 plugin and running into a peculiar problem. (Same problem with jQuery 1.7.1 and tablesorter 1.)
I have a table with hundreds of rows and it sorts in about 1 second.
When I wrap the table in an HTML <form> element the tablesorter plugin becomes very slow. A table with ~500 rows takes upwards of 8 seconds to sort.
I'm only calling $("#table").tablesorter() with no extra parameters, and just plain HTML with no other JavaScript or CSS.
The HTML for this table is around 1.2mb and each <td> contains additional HTML elements such as <button>, <div>, <span>, <a>, ...
Any ideas what the <form> element may be interfering with? Thanks, /w
Edit: Here's an example with only 10 rows. Scale to 500 for realistic times, and wrap the table in <form></form> to see how that slows the sorting. http://pastebin.com/95KAAb88
I discovered this issue is not unique to tablesorter or datatables. Possibly something with the JavaScript engine in my version of Chrome (23).
I created a simple jsfiddle. Firefox 20.0 doesn't seem to have this issue.
http://jsfiddle.net/wsams/yGpdv/27/
If you open a web developer console and run this script, note the Appending child time. This is the time it takes to append a row to the table.
After a couple passes, simply wrap the table in <form> like this,
<form>
<table>
<thead>
<tr>
<th>count</th>
<th>link</th>
<th>input</th>
<th>button</th>
<th>count</th>
<th>link</th>
<th>input</th>
<th>button</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>item 1</td><td>a big link</td><td><input type="text" value="something" /></td><td><button type="submit" name="test" value="why">why this</button></td><td>item 1</td><td>a big link</td><td><input type="text" value="something" /></td><td><button type="submit" name="test" value="why">why this</button></td>
</tr>
</tbody>
</table>
</form>
Now run the script again and note the Appending child times. I'm seeing it going from about 0.040ms per append to ~8ms. It also seems somewhat exponential as you add more rows.
To me it has to be an issue with the native JavaScript DOM functions, but I'm not an expert in this area.
I am using MVC 3, EF Model First on my project.
In my View I have 4 tables that look likes these.
<div class="questionsForSubjectType">
<table>
<thead>
<tr>
<th>
Title
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>
users should be able to select and add to another table lets say the table is following:
<table id="CustomPickedQuestions>
/* <----- Questions that users chose from the other tables /*
</table>
What I am looking for is that when a users click on a row, the row shall get removed and added to the CustomPickedQuestions, When the row is added to that table, the user should also be able to remove it from CustomPickedQuestions Table and then that row shall go back to the Table it was before.
I now wonder how I can accomplish this with help of client-side jquery scripting.
You've got far too much irrelevant complexity in you code (for the specific question you ask). The title is good, but not the code. Rather than posting your complex project code, create the simplest possible reproduction of the problem using the least amount of code/methods/properties (with common names, that is ProductID, ProductName, etc). part 3 of my tutorial shows how to do this. See http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/adding-a-new-category-to-the-dropdownlist-using-jquery-ui
I am new to JavaScript and not long ago I ask the following question:
I have a normal HTML table where each row has its own id. What I want to achieve is that each time I click a link in a row the id for that row should be stored in a variable and later passed to a function. Let's say I click row#1 then id#1 should be passed and so on... How can I achieve this?
I got a very good answer. This example works in jsFiddle
http://jsfiddle.net/andrewwhitaker/9HEQk/
But if I copy the JavaScript and the table exactly like it is into a HTML file the whole thing just doesn't work and I can't find the answer. Could someone help me again please?
Thank you very much!
If all you need is the row id so why not using a simple code like this:
HTML:
<table id="table-one">
<tr id="row-one">
<td>one</td>
</tr>
<tr id="row-two">
<td>two</td>
</tr>
</table>
JS:
var lastRowId = -1;
function saveRow( id )
{
lastRowId = id;
}
Maybe I didn't fully understand what you asked?
Rotem