I have a table that's being generated with PHP
<table id="mytable" class="tablesorter tablesorter-jui ui-widget ui-widget-content ui-corner-all hasStickyHeaders">
<thead style="">//code for headers </thead>
<tbody>
<?php
foreach ($active_participants as $participant)
{
//code for rows..
}
?>
</tbody>
</table>
I am applying the jquery tablesorter plugin to it, however it does not sort(no jquery errors). I need it to display on page load, because it's the first thing the user will see, however can I have it wait for the page to finish loading before applying
$("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
what is the proper way to do this?
You would want to do this in the documents ready function. So in the head section of your html just add:
<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
});
</script>
That will run once the document is fully loaded.
EDIT: Reyaner Beat me to the answer. :)
did you try this:
$(document).ready(function(){
$("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
});
Related
I have a table which I has links on each row. I am trying to use AJAX to retrieve an array of data from the database via PHP and return the data which will print in another DIV.
I am trying to get the attribute value (link ID) that I assign to each row and pass this value to the query. I am not able to get the link ID, it does not display when I test issuing an alert. I read several post and tried a few things but no good. The alert popup displays "undefined".
<tr id="mashed_row">
<td class="linked-title dark unpadded">
<?php echo $link['keywords']; ?>
</td></tr>
<script type="text/javascript">
$(document).ready(function(){
$('#mashed_row a').click(function () {
alert($(this).closest('tr').find('td').attr('link_id'));
});
});
</script>
You are trying to get td attr which is not there, try this, hope it helps :-
$(document).ready(function(){
$('#mashed_row a').click(function () {
alert($(this).attr('link_id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr id="mashed_row">
<td class="linked-title dark unpadded">
key words
</td>
</tr>
<table>
Simply use $(this).attr('link_id')
$(document).ready(function(){
$('#mashed_row a').click(function () {
alert($(this).attr('link_id'));
});
});
Your TD does not have a link_id attribute, your <a> has it. I've created an example showing both versions:
$(document).ready(function(){
$('#mashed_row a').click(function () {
console.log("TD:", $(this).closest('tr').find('td').attr('link_id'));
console.log("A:", $(this).closest('tr').find('a').attr('link_id'));
// or if you really want to get the attribute from the clicked item, it's even easier:
console.log("direct:", $(this).attr('link_id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr id="mashed_row">
<td class="linked-title dark unpadded" link_id="link_id_TD">
Hello
</td>
</tr>
</table>
When i'm using Jquery pluggin "PrintThis",
The html function: <div style='page-break-after:always'></div>
stops working. Well, "PrintThis", won't break page!
How can i solve this?
Should i put the "Break line", in JS? How?
Is it ok to use the same table id?
HTML
//Print Btn
<button id="print_btn">btn</button>
//Table 1
<table id="table" class="display">
<tr><td>Hi</td></tr>
</table>
//Break page here
<div style='page-break-after:always'></div>
//Table 2
<table id="table" class="display">
<tr><td>Hi</td></tr>
</table>
JS
$(document).ready(function () {
$('#print_btn').click(function () {
$('#table').printThis();
});
});
Well, once again the solution for this script was easy to solve. (Just had some sleep on it =)
HTML
//ADD class "display" and id.
<div class="display" id "break_page" style='page-break-after:always'></div>
JS
//Add id "break_page" to JS
$(document).ready(function () {
$('#print_btn').click(function () {
$('#table, #break_page').printThis();
});
});
break-after property is ignored on elements that don't generate box. You should use this style on your table instead of a div
See documentation
On mouse hover, the post edit and other related links are visible on the WordPress Posts List. I did a similar thing with the following js:
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js?ver=3.8.1-alpha'></script>
<script type="text/javascript">
$(document).ready(function () {
$(".edit_links").css('visibility', 'hidden');
$(".each_row").mouseenter(function () {
$(".edit_links").css('visibility', 'visible');
}).mouseleave(function () {
$(".edit_links").css('visibility', 'hidden');
});
});
</script>
If my HTML & PHP are as follows:
<table width="100%" border="all">
<tr id="row-1" class="each_row">
<td>1</td>
<td class="name">"Name"
<div class="edit_links">
Edit
</div>
</td>
</tr>
<tr id="row-2" class="each_row">
<td>2</td>
<td class="name">"Name New"
<div class="edit_links">
Edit
</div>
</td>
</tr>
</table>
And the CSS is:
<style>.edit_links{visibility: hidden;}</style>
It does almost the same thing: load the link div on mouseenter. But, the problem is: it shows the edit links of all the rows on any row's mouseenter. And this is logical with the code.
But I want to load the edit links only on the hovered row, like WordPress. (Ref.: Image) See the edit links are visible only on a single row, not on all.
How can I modify my javascripts to achieve so?
You can do this with some simple CSS:
In addition to the rule you have to hide the links, add the following.
tr.each_row:hover .edit_links { visibility: visible; }
You can them remove the related javascript you've got there trying to do this.
Here's a jsfiddle: http://jsfiddle.net/CKaPv/1/
Here is a fiddle with the solution
jsfiddle
It selects each row in the table, and finds the next .edit_links class. The way you were trying to do it will select all elements with the .edit_links class.
$(".edit_links").css('visibility', 'hidden');
$("table tr.each_row").each(function() {
$(this).mouseenter(function () {
$(this).find('.edit_links').css('visibility', 'visible');
}).mouseleave(function () {
$(this).find('.edit_links').css('visibility', 'hidden');
});
});
I am new to JavaScript and jQuery. I am trying to implement the fiddle functionality linked here for sorting table rows by drag and drop.
I used to copy - paste the entire code to make it work in NetBeans, but it is not working. Only displaying the table. Not able to drag and drop. Do I need to add any jQuery file. I am using Yii project. And I copied the html and JavaScript code in my PHP file. Are there any other requirements?
<h1>Sorting A Table With jQuery UI</h1>
<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
<thead>
<tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
<tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
<tr><td class="index">3</td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
<tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
<tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
</tbody>
</table>
<script>
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
</script>
You most likely need to register jquery and jquery.ui in your view:
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
i have created a table with a row and 4 columns.i declared attributes class,id for td element. when i click on the td i have to call the jQuery function to load pop up box. here instead load pop up i just want to display the alert box but it doesn't work. here is my code
jQuery
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert("jquery");
$('.tbox').click(function(e) {
tb_show("ThickBox","hi.html?height=120&width=400","true");
}
});
</script>
html code:
<table>
<tr align="center">
<td class="tbox" id="tbox"> <?=$id?> </td>
<td class="tbox" id="tbox"><?=$zoneName?></td>
</tr></table>
how to call the jQuery?
Your event handler has not been closed properly, causing a parse error. Try:
$(document).ready(function(e) {
alert("jquery");
$('.tbox').click(function(e) {
tb_show("ThickBox", "hi.html?height=120&width=400", "true");
});
});
$(document).ready(function (e) {
$('.tbox').click(function (e) {
alert("jquery");
});
});
is this what you were asking?
Its because you are using two divs with same id. Thats why I think its not working. Trying varying the name of the divs and they will work fine
$('document').ready(function(){
$('#tbox1').click(function(){
alert("I am from div1");
});
$('#tbox2').click(function(){
alert("I am from div2");
});
});