Hi programmers and web designers,
I am working on a small system for the company I work with and everything is almost done (thanks for this site and the help from other sites...) except for this function where I want the entire row of the table my php codes generated, for now I was only able to make my second column clickable. I already tried googling but I can't find a workable solution. FYI, I am a noob and just starting to learn php.... thanks in advance...
while($info = mysql_fetch_array( $data ))
{ echo "<tr> class='tablerows' align=center onclick=\"window.location=http://active_jobs.php?job_ticket='".$info['job_ticket']."'\">
<td>".$info['date']."</td>;
<td><a> href=somefile.php?job_ticket=".$info['job_ticket'].">".$info['job_ticket']."</td>
<td>".$info['invoice_no']."</td> <td>".$info['customer']."</td>
<td>".$info['job_type']."</td> <td>".$info['complete_date']."</td>
<td>".$info['complete_time']."</td>
<td>".$info['artist_operator_prepress']."</td>
<td>".$info['status_prepress']."</td>
<td>".$info['status_press']."</td>
<td>".$info['status_postpress']."</td> <td
width='300'>".$info['remarks']."</td>"; echo "</tr>";
} echo
"</table>";
Thanks in advance for your help.
Marco
You can’t make entire rows “clickable” using PHP. PHP is a server-side language; you generate HTML and spit it out.
If you wanted to make an entire table row clickable, you’d either have to wrap it in an <a> (invalid HTML), or use a client-side language such as JavaScript to apply an event listener, that listens for the <tr> being clicked and redirects to whatever URL you want.
You should check the generated html, you are closing the <tr> tag so the class and javascript are no longer part of it:
{ echo "<tr> class='tablerows' align=center onclick=\"window.location=http://active_jobs.php?job_ticket='".$info['job_ticket']."'\">
^ remove this and check the html again; it probably works now
You have the same mistake on the fourth line with the a tag.
For those kind of live edit in table values with php, you can go for client side scripting language javascript & jquery with ajax..
For Reference :
Live Edit table With Ajax
It's worthy...
i am answering this question by assuming that you are aware of JQUERY.Written a sample code copy it into a file '.html' and run. make sure that you are connected to internet to let jquery api to load.Thanks.
ex:-
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('table tr').click( function () {
alert('i am clicked');
} );
});
</script>
</head>
<body>
<table border="1">
<tr><td>1</td><td>apple</td><td>boy</td><td>jjjj</td><td>dddd</td><td></td><td>1010</td><td>1019</td><td>06-Mar-13 21:47:34</td></tr>
<tr><td>2</td><td>strawberry</td><td>girl</td><td>jjjj</td><td>dddd</td><td></td><td>1010</td><td>1019</td><td>06-Mar-13 21:47:34</td></tr>
<tr><td>2</td><td>strawberry</td><td>girl</td><td>jjjj</td><td>dddd</td><td></td><td>1010</td><td>1019</td><td>06-Mar-13 21:47:34</td></tr>
</table>
</body>
</html>
Well, you can make a table row clickable. It is very easy. You just make invisible buttons inside each table sell. Make them without borders and no colors. Then, just handle the entire row as a clickable button. You will need to do this for each TD in the row. Also, you have to have a unique id for each row so that the button can identify the row number. Something loosely like this:
<td><button type='submit' name='click_row' value='" . $info["id"] . "' style='width: 100%; background: none; border: none; box-shadow: none;'>DATA FOR THIS TD</button></td>
Then, you need to process the buttons for the row. ( Same button for each TD in the row. ) Something loosely like this:
if (isset($_POST["click_row"])) {
$clicked_row = $_POST["click_row"];
// Handle what you want done with this row...
}
Works well for me!
Related
On one of my pages in my website(coded in php), i'm trying to add 2 (even more) print buttons each one printing a portion of the webpage. For example, on a page there is a table with some values and 2 graphs underneath it. I would like to add 2 print buttons, one button printing the table and the other one printing both the graphs. I've found this Example but could not understand clearly. Any help or examples would help me.
Thanks in advance.
This is html/javascript code that will launch the browser's Print dialog when clicked.
<button onClick="window.print()">Print this page</button>
If your table is inside a div with id='printTable' use:
Click to print table
EDIT: Here is the function "printContent()"
<script type="text/javascript">
<!--
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//-->
</script>
A simple idea is to create some previous css printing rules ad hoc, e.g.
.printtable * { display : none; }
.printtable table { display : block; }
and
.printtableandgraph * { display : none; }
.printtableandgraph img { display : block; }
then the two buttons should add a .printtable and a .printtableandgraph class for the body element (or other element containing your table and graphs) just before window.print() statement
(if user click twice or more on the same print button check previously if the element has already set that class name)
Print Button
<button onClick="window.print()">Print this page</button>`
Use This code for print any webpage there is only one draw back its print all the button and menu bar.
To print a portion of the page, you can use a print.css and the print button for a quick and simple approach.
Set up print.css file and include:
body {visibility:hidden;}
.print {visibility:visible;}
Add the .print class to the appropriate portions of your page.
Add button:
<button onClick="window.print()">Print this page »</button>
Print results are neat and clean.
I have searched before posting but none of the posts are that relevant (saying that i am new to Jquery).
My problem is when i click the "add friend" button it wont fire upon a single click but it needs a double click.
These are the relevant sections of code:
Setting the div:
$fField = <div style="display:inline; border:#CCC 1px solid; padding:5px; background-color:#E4E4E4; color#999; font-size:11px;">
Add Friend
</div>;
Javascript:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
the message to display (the one which needs 2 clicks to be displayed)
<div class="friendSlide" id="addFriend">Are you sure?</div>
Any help would be much appreciated! Oh and I'm using the latest version of jQuery.
Hmm, well, it looks like you are showing and hiding your div at the same time:
HTML:
<div class="friendSlide" id="addFriend">Are you sure?</div>
JS:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
You call friendArea('addFriend'), which is supposed to slideDown your div, but at the end of the function you hide .friendSlide, of which your div is also a class. You basically hide it every time. This can't be what you want.
Comment out that line and it works: http://jsfiddle.net/Ggdhp/
Of course, you might have had a different reason for that, but I think you are getting some divs and classes mixed up.
Note:
I would also suggest that you don't use inline css or javascript. It always makes debug much more difficult, and you miss typos as you end up having to put everything on a single line and escape quotes. For instance, color#999; in your div style is missing a colon.
I'm not entirely sure that's the relevant part of the code, but if you want to learn how to bind functions to click/doubleclick/etc:
http://api.jquery.com/category/events/mouse-events/
I assume you have a button/link somewhere that has something to the extent of:
Add Friend
What you would want to do instead is give that button a class indicating that it's an add friend button, and use jQuery to add the double click function to it.
Add Friend
$('.addFriend-button').click( function(e) {
friendArea( $(this).data('friendName') );
} );
This will cause your function to fire when the button is double clicked, not single clicked. It also allows you to only have to write 1 function, and you can pass the relevant data in using the data-* attributes on the link element.
if you want to run any code on double click over an element use jquery like this,
$('#target').dblclick(function() {
alert('Handler for .click() called.');
});
and one more thing use jquery toggle to display and hide elements like below, On your function
if you are using class name of selector use the selector like below (use .) in case of id use # with id name like above code
$('.target').toggle();
if double clicks works for you to use below code, it converts the single click to double click by jquery. Hopes this will help you
$('#target').click(function() {
$('#target').dblclick();
});
I'm creating a web page that search users in the database. When I'm typing a username in the search box, it perfectly loads results using Ajax in a table (this table is in another PHP file). But I need to select those rows when I press arrow keys or with mouse over (like Google search engine), when we are pointing to that row, it highlights. I tried with onmouseover function but no luck, but in normal PHP web pages onmouseover works. Here's what I normally used to select rows in a table.
I'll give you a very basic example, that how I use this.
<html>
<head>
<script type="text/javascript">
function f1(x){
document.getElementById(x).style.backgroundColor="#FF0000";<br/>
}
function f2(x){
document.getElementById(x).style.backgroundColor="#FFFFFF";
}
</script>
</head
<body>
<?php
echo "<table border='1'>";
echo "<tr id='tr1' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'> <td>Elephant</td></tr>";
echo "<tr id='tr2' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Snake</td></tr>";
echo "<tr id='tr3' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Spider</td></tr>";
echo "</table>";
?>
</body>
</html>
My problem is, this does not work in an Ajax loaded table. Please help me...
The mouseover event doesn't work, because you register the event before inserting the HTML.
The way around it, is by attaching an event handler to the body tag, and then looking at the original source of the element, which is basically what the jquery live method does. That would look like this:
$(".hoverme").live("mouseover mouseout", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
I'll see if I find the time to edit this answer for the keyboard control stuff too.
echo "<td> + manuf + </td>";
Is this above ever going to work??
I'm pulling results from a mysql db to edit the contents but need the jQuery functionality to edit it, hence the embedded javascript variable...
EDIT:
Sorry for the lack of context, its related to another question i've asked on here Mysql edit users orders they have placed
this is the end goal. To edit the order i place, i need to pull the results into an environment similar to how the user placed the order. So my thinking was to include the jQuery functionality to add items to a cart etc, then they could press submit and in the same way i used .Ajax to post the data to an insert php script i would post the values to an update php script! Is this backwards thinking, any advice welcomed!
I suggest you take a look at the follwing.
json_encode
Ajax
JSONP
Now your simplest solution under you circumstances is to do go for the json_encode method. Let me show you an example:
$json_data = array(
'manuf' => $some_munaf_data
);
echo "<script type=\"text/javascript\">";
echo "var Data = " . json_encode(json_data);
echo "</script>";
This will produce an object called Data, and would look like so:
<script type="text/javascript">
var Data = {
munaf : "You value of $some_munaf_data"
}
</script>
Then when you need the data just use Data.munaf and it will hold the value from the PHP Side.
Try just emitting the MySQL content with PHP:
echo "<td id='manuf'>".$manuf."</td>"
Then get the contents with jQuery like this:
var manuf = $('#manuf').text();
Would you not echo out the jQuery within a Javascript code island? You need the client-based code (jQuery) to be able to execute after the server-side code (PHP).
echo '<td><script language = "JavaScript" type = "text/JavaScript">document.write("");</script></td>';
Is this above ever going to work??
Nope. You'd need to output valid JavaScript for the browser to interpret:
echo "<script>document.write('<td>'+manuf+'</td>')</script>";
But that is a dreadful construct, and I can't really see why you would need this, seeing as the td's contents are likely to be static at first.
Consume you have the table echoed with php:
<table id="sometab">
<tr>
<td>
</td>
<tr>
</table>
The jquery for printing resuls in any td is :nth-child(2) takes 2 table td object :
<script type="text/javascript">
$(function(){
$("#sometab tr td:nth-child(2)").html("bla");
})
</script>
Is "manuf" a JS variable or part of a PHP output e.g. part of generated ?
Basically this can easily be done by:
mysql thru PHP(*I can't put table tag..sorry.):
while($row = mysql_fetch_object($result)) {
echo 'tr';
echo 'td a href="#" class="myres"'.$row->manuf.'/a /td';
echo '/tr';
}
then on your JS just attach a "click" handler
$(function() {
$(".myres").click(function() {
//my update handler...
});
});
i think you cant embed the jquery variable in the php like this .
you just give the class name here from here when edit will be click you will get the variable as in submit click in other questions .
This is a little hard to explain, but I have an HTML table, full of SQL definitions, that cross-talk a great deal. For example, one is talking about "INSERT statements", and mentions a "unique key". Another one of the rows talks about unique keys.
I'd like to create little definition bubble (when you hover over "unique key" in the INSERT row) with the definition from the appropriate row. I was planning on using jQuery, but I'm open to alternatives. Any ideas?
UPDATE: My code is here
There are a few jQuery tooltip plug-ins (which is really what you're after). Personally I've been using jQuery Tooltip and am happy with it. I've used it to put some pretty complex content in a tooltip.
I don't fully understand the rest of your question. Do you want this to happen automatically? Is the table present on the page? Is server side code creating the definition bubbles?
Now jQuery Tooltip has a bodyHandler attribute where you can supply a callback (function) that'll define the content of the tooltip so that bit's fine. Do you want these links/tips automatically created though?
EDIT: Take a look at this highlight plug-in as well. Even if you don't use it you can copy the methods for finding text in your document and wrapping elements around them. Something like:
$(function() {
$("table.definitions th").each(function() {
var term = $(this).text();
var definition = $(this).nextSibling().text(); // assuming it's in a <td> in the same row
// find all occurrences of 'term' in relevant text block
// and wrap in <span class="term" title="definition">...</span>
});
});
Then optinoally use jQuery Tooltip to make a more modern tooltip out of that title.
jQuery should work just fine for this task. Store the value for the definition bubble somewhere out of sight and use jQuery to pop it up when you hover.
instead of parsing the HTML directly, maybe you can give each <tr/> an id that can be used to find the definition. conversely, if you'd like more control over which text triggers the bubble, wrap the words in a <span /> with an id.
jt
Rather than wrapping in span as #jason suggested, I'd suggest using the < acronym > or < abbr > tags to markup your chosen words.
In any case, you could then do something like this.
I'll leave setting up the tooltip to you.
Javascript
$(document).ready(function() {
$('acronym').hover(function(){
var text = $('#definition_'+$(this).attr('title')).text();
console.log(text);
$('#cbfsettinguptooltip').text(text)
});
});
HTML
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td >Insert</td>
<td id="definition_insert">The insert statement is better than the <acronym title="select">select</acronym> statement</td>
</tr>
<tr>
<td >Select</td>
<td id="definition_select">No No Select is best, much better than <acronym title="insert">insert</acronym></td>
</tr>
</table>
<div id="cbfsettinguptooltip">
</div>