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
Related
Working with two php files, index.php and search.php. index sends some parameters to search, which performs a few queries into a database, and then returns the information on a table, stored into $output.
I now want to add a bootstrap button to the output, that calls a simple show/hide jQuery function.
The button is created, but it doesn't work when I test it on index.php
<div class="col-sm-8">
<table class="table table-hover" id="output">
</table>
<div id="edit" >
<div class="page-header" id="editar" style="display: none;">
<h2 id="producto">Placeholder<button id="exit" type="button" class="btn pull-right"><span class="glyphicon glyphicon-remove"></button><!--Clicking this button hides the edit div and shows the output table--></h2>
</div>
</div>
</div>
The exit/editbtn button calls the following:
<script>
$(document).ready(function(){
$("#exit").click(function(){
$(document.getElementById("edit")).hide();
$(document.getElementById("output")).show();
});
});
$(document).ready(function(){
$("#editbtn").click(function(){
$(document.getElementById("edit")).show();
$(document.getElementById("output")).hide();
});
});
</script>
And the definition of the "editbtn" is made on the separate php file:
if($query->num_rows){
$rows = $query->fetch_all(MYSQLI_ASSOC);
forEach($rows as $row){
$output .= '<tr><td><button id="editbtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></td><!--Clicking this button hides the output table and shows the edit div--></tr>';
}
$output .= '</tbody>';
So in the end, I have the table with the button created, but it does nothing when I click on it.
Why dont you try the same in order?
Like:
<script>
$(document).ready(function(){
$("#exit").click(function(){
$("#edit").hide();
$("#output").show();
});
$("#editbtn").click(function(){
$("#edit")).show();
$("#output")).hide();
});
});
</script>
This should work, always that you dont insert the edit button with ajax AND by definition, if you are using IDs, you are supposed to have only one element, if you have it between a foreach, it could cause you a problem.
It seems to be the jQuery selectors, they should be like this:
$("#edit").show();
Or in JavaScript:
document.getElementById('edit').styles.display = "none"; //or use addClass
PD: don't use two ready functions, put the listeners on the same one ;)
Edit:
Add a console.log in the function, and check out the console on the developer tools of your browser. Also try to comment the PHP query, except the output.
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 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]] });
});
I'm building a website where the admin can make settings for the website. I would like the admin settings page to have a similar "feel" as the rest of the website, which has some nice looking jQuery features.
On the admin site there's a hidden div, which is shown when one of six links has been clicked. I'd like the content of the hidden div to change content before showing itself. I'm not sure how to do this. I could have a div box for every link on the page. But this becomes pretty cumbersome since I'd need to repeat my css and jquery for every link. I imagine that this, somehow, can be done with some javascript/jquery code that determines which link that was click and then decides which php function to call inside the hidden div. Then the php could "echo" out the content of the div, which then could be shown.
How could one do this?
My HTML/jQuery code is as follows:
--- The html links ---
<table id="settings">
<tr>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
----- The Hidden div -----
<div id="dashboard_box">
<div class="dashboard_inside">
<form action="#" method="post">
<p style="font-size:20px; font-weight: bold;">Change color</p>
</br>
<fieldset>
<? load_content1();?>
</fieldset>
</form>
</div>
</div>
---- jquery code (working)----
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
You probably want to use ajax to load the content from the server. Take a look at jquery's .load() method: http://api.jquery.com/load/
You could include a data attribute per link:
<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>
js would look something like this:
$(".action").on('click', function() {
$("#dashboard_box fieldset").load($(this).data('content'), function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
}
return false;
});
Then, in your content.php file you could check the method parameter in the url to determine what content to return.
My php is a little rusty, but something like this:
<?
call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
You can just add data attribute in each of your link's
<a href="#" data-url="content1.php" ..
Then on click of any of the a you can get the php to be called.
$('a').on('click',function(){
var phpFunctionToCall = $(this).data('url');
});
You probably need to make ajax call to load content into your fieldset As this <? load_content1();?> run's on server and javascript have no control over it.
Thanks for all the help. this is what I ended up doing.
--- HTML ---
<a class="action" data-content="content.php?method=load_content2"></a>
---Jquery---
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var phpFunctionToCall = $(this).data('content');
$('#indhold').load(phpFunctionToCall);
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
--- PHP (shortened)---
function load_settings_panel($settingOnRequest) {
return $settingOnRequest;
}
$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
I am trying to add a new div to the page when you click on NEW DIV?
How could I do this? Can someone point me in the right direction?
More example code is always helpful, but I'll try to give you some basics.
<div id="Content">
<button id="Add" />
</div>
$(function () {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
There are a bunch of different ways, it depends on what you want to do. A simple way is like this:
$('#id').html('<div>Hello</div>')
Which replaces the inner html of item with id 'id' with "Hello". So this:
<div id='id'>Old Html </div>
Would become:
<div id='id'><div>Hello</div></div>
And this:
$('#id').after('<div>Hello</div>')
Would transform the "Old Html" into this:
<div id='id'>Old Html</div>
<div Hello </div>
Check out www.visualjquery.com and select the Manipulation button. It gives you more than you could need to know in an easy to explore fashion.
Make sure to use the $(document).ready function in jQuery. You need this to "run" the script once your page is loaded and enable the action that is being called on this dummy button to append a new div to an existing div.
You can also use this to append anything you'd like to other elements on the page by using jQuery selectors such as .class or #id.
<div id="Content">
<button id="Add" />
</div>
$(document).ready(function() {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
Another useful option is to replace the contents of a tag with jQuery. You can do this using the .html() function.
<div id="Content">
<p id="changed">Hello World!</p>
<button id="change_content" />
</div>
$(document).ready(function() {
$('#change_content').click(function () {
$('#changed').html('Goodbye World');
});
});
Hope this helps!