i have this code:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
I don't know what the element with an ID of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.
Edit
As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.
<button class="button" data-clicked="0">
As you can see we've added the new data-clicked attribute.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.
It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv
I also like to animate changes so people can more easily follow a change.
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>
Related
I have a CSS which looks like in my
style.css
~~~~~~~
.spanish{
display : initial;
}
.english{
display : initial;
}
and I have a HTML like:
<HTML>
<head>
<link rel=StyleSheet type="text/css" href="style.css" />
</head>
<body>
<input type="button" onclick="codecss.php" value = spanish>
<input type="button" onclick="codecss.php" value = english>
<input type="button" onclick="codecss.php" value = both>
<table>
<tr class= "spanish"><td> This is spanish text </td></tr>
<tr class = "english"><td> This is english text </td></tr>
<table>
</body>
<HTML>
Now I need help with PHP. I want a way when I click on Spanish then my HTML should display only Spanish and if clicked English then only English should be displayed. and both if pressed "both" button.
How can I edit my css from php according to the button pressed in my html???
Please help/
I just write a basic code snippet, i hope it'll help you out. Thanks
$('asd.languageChange').click(function() {
var language = '.' + $(this).attr('id');
$('.language').hide();
$(language).show();
})
.spanish {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="english" class="languageChange">English</button>
<button id="spanish" class="languageChange">Spanish</button>
<table>
<tr class="spanish language"><td> This is spanish text </td></tr>
<tr class="english language"><td> This is english text </td></tr>
<table>
Another option. You can also do it using Javascript.
document.addEventListener("click", e => {
if (e.target.matches(".languageChange")) {
var hideAllLanguages = document.getElementsByClassName("language");
for(var i = 0; i < hideAllLanguages.length; i++){
hideAllLanguages[i].style.display = "none";
}
var showRequiredLanguage = document.getElementsByClassName(e.target.id);
for(var i = 0; i < showRequiredLanguage.length; i++){
showRequiredLanguage[i].style.display = "block";
}
}
});
.spanish {
display: none;
}
<button id="english" class="languageChange">English</button>
<button id="spanish" class="languageChange">Spanish</button>
<table>
<tr class="spanish language"><td> This is spanish text </td></tr>
<tr class="english language"><td> This is english text </td></tr>
<table>
I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA
<html>
<head>
<style>
#table1{/*table aspects and design */
border:1px solid #FFFFFF;
background:#FFFFFF;
display:none;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th{/*align table headers*/
text-align:center;
}
td,th{
border:1px solid #FFFFFF;
text-align:center;
}
</style>
</head>
<table id="table1" cellpadding="5" cellspacing="1" width="50%">
<? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
{
/* select all information from the table and take it into the page */
$query->execute();
while ($result = $query->fetch(PDO::FETCH_ASSOC)){
$head = $result['headline'];/*puts result of headline from table into variable*/
$content = $result['content'];
/*puts result of content from table into variable*/
echo /* echo the table to display announcements*/'
<tr>
<th>
<h1>
'.$head.'
</h1>
</th>
</tr>
<tr>
<td>
<font size="4">
'.$content.'
</font>
</td>
</tr>';
}
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/
$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}
)};
</script>
You need to use a timer in your Javascript to show each row separately.
$(document).ready(function() {
var cur_row = 0;
setInterval(function() {
$("#table1 tr").fadeOut(2000).eq(cur_row).fadeIn(2000);
cur_row = (cur_row + 1) % $("table1 tr").length;
}, 5000);
});
Am just trying to show all the list in the pagination. am using datatable plugin's pagination on my file, pagination is working fine, in the list i have an image that have a function delete on click. in my pagination 1'st five records is shown . and the other five records shown on click next, delete function working properly on 1'st five record when i click on next than delete function stop it's working .
my code:-
<script>
var conf = jQuery.noConflict();
conf(document).ready(function(){
conf(".delete").on( "click", function() {
alert('adfasdfasd');
//alert(conf(this).attr("id"));
custid = conf(this).attr("id");
var r=confirm("Are you sure");
if (r==true)
{
var url = "<?php echo Mage::getBaseUrl();?>turnkey/index/deleteuser/";
conf.ajax({
type:"POST",
url:url,
data: { 'custid':custid},
success: function(msz){
alert(msz);
if(msz=="deleted") {
conf("#hidepro"+custid).hide("slow");
}
else {
//conf("#hidepro"+proid).hide();
alert("product cant be deleted");
}
//console.log("chal hun");
}
});
}
else
{
return false ;
}
});
});
</script>
and the pagination code is :-
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
<div id="container">
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Factory</th>
<th></th>
<th>Contact</th>
<th>URL</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<?php
foreach( $custemail as $custemail1 ) {
$customer = Mage::getModel("customer/customer");
$customer->setWebsiteId(Mage::app()->getWebsite()->getId());
$customer->loadByEmail($custemail1); //load customer by email id ?>
<tr class="odd gradeX" style=" border-bottom: 1px solid #FF0000;" id = "hidepro<?php echo $customer['entity_id'] ?>">
<td class="bodyText style4" ><a style=" color: #CC3300;float: left;margin-top: 42px !important;text-decoration: underline;" href="<?php echo Mage::getBaseUrl();?>turnkey/index/listuser?id=<?php echo $customer->getEntity_id();?>"><?php echo $customer->getFactory();?></a> </td>
<td class="bodyText style4">
<a href="<?php echo Mage::getBaseUrl();?>turnkey/index/listuser?id=<?php echo $customer->getEntity_id();?>">
<img style=" width:100px;height:100px;margin-bottom:5px ;" src = "http://lab.ghrix.com/turn-key-mart/media/<?php echo $customer->getUserImage();?>"></a>
</td>
<td class="bodyText style4" style="padding-top: 10px;">
<?php echo $customer->getFirstname();?><?php //echo $customer->getUser_address();?><br><?php echo $customer->getmobile();?><br><?php echo $customer->getEmail();?></td>
<td class="bodyText style4" style="float: left;margin-top: 42px !important;" >
<a target="_blank" style="color:#005580;" href="<?php echo $customer->getWebsite();?>"><?php echo $customer->getWebsite();?></a></td>
<td class="bodyText style4"><div style= "cursor:pointer;" class = "delete" id = "<?php echo $customer['entity_id'] ?>"><img width="60px" src="<?php echo $this->getSkinUrl('images/trash.jpg'); ?>"</div></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
please suggest where mistake is happen.
Without a live example, I can't be sure, but try this:
replace
conf(".delete").on("click", function() ...
with:
conf(document).on("click", ".delete", function() ...
The reason is that conf(".delete") only attaches to elements available at the time the function is run. It might be that your dataTable plugin runs first, removes the extra elements, then the delete binder is run and only works on the first 5. The second method binds to the document, and checks each click to see if it matches the .delete selector. This used to be known as jQuery.live()
I am making a table in which PHP is used in <td> tags. This contains a list of products and their prices. On the top of the table, I have inserted two buttons, one for arranging data in ascending order of price, and the other one is for descending order.
By default, the data is in ascending order. When I click on the descending order button, it works but with of the table data changes which is not required.
Here is my CSS code:
a {text-decoration:none; color:#0000FF;}
#hold .log {
color:#0000FF;
text-align:center;
font-size:20px;
}
h2 {color:#0000FF;}
#left { width:200px;border:1px;border-style:solid;margin:0 auto;margin-top:20px;text-align:center;border- color:#0000FF;float:left;}
#left div {border:1px;border-style:solid;border-color:#0000FF;}
#left div a {}
.style table {border:1px;border-style:solid;border-color:#0000FF;}
.style table tr td {border:1px;border-style:solid;border-color:#0000FF;color:#333;width:250px;}
.style table tr td input,select,textarea {width:250px;height:30px;}
Here is the code for the table:
<button onclick="as()">Ascending Order</button>
<button onclick="ds()">Descding Order</button>
<div class="style">
<table>
<tr>
<td>Title</td>
<td>Price</td>
</tr>
<th><h2 style="text-align:left;">Cameras</h2></th>
<tr>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price ASC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr id='cam_as'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</tr>
<tr>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price DESC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr id='cam_ds' style='display:none;'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</tr>
</table>
</div><!-- style ends-->
Finally, here is the script which is doing this all required work:
<script type="text/javascript">
function as()
{
$('#cam_as,#com_as,#cell_as').css('display','block');
$('#cam_ds,#com_ds,#cell_ds').css('display','none');
}
function ds()
{
$('#cam_ds,#com_ds,#cell_ds').css('display','block');
$('#cam_as,#com_as,#cell_as').css('display','none');
}
</script>
I have tried but I am unable to find where I am going wrong.
Yoo have enough problems with your code. I removed extra < tr >'s. I added classes and changed javascript functions accordingly. Your problem is mainly in nested < tr >'s
http://jsfiddle.net/Sanya_Zol/kC9Tk/
<button onclick="as()">Ascending Order</button>
<button onclick="ds()">Descding Order</button>
<div class="style">
<table>
<tr>
<td>Title</td>
<td>Price</td>
</tr>
<th><h2 style="text-align:left;">Cameras</h2></th>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price ASC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr class='cam_as'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price DESC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr class='cam_ds' style='display:none;'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</table>
</div>
<script type="text/javascript">
function as(){
$('.cam_as,#com_as,#cell_as').show();
$('.cam_ds,#com_ds,#cell_ds').hide();
}
function ds(){
$('.cam_ds,#com_ds,#cell_ds').show();
$('.cam_as,#com_as,#cell_as').hide();
}
$(as); // run as() when document ready
</script>
There are <tr>Tag outside and inside the loop, you only need them one time.
The loop would also create multiple <tr> Tags with the same ID, thats not correct. Try to use jQuery-Toggle to show/hide the elements.
The last part of the question is not clear for me, sorry.
i have this code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background-image: url(../images/paper_03.png);
}
form {
background-image: url(../images/paper_02.png);
}
</style>
</head>
<?php
require("../function.php");
// echo sizeof($_SESSION['liste']);
?>
<body >
<form name="log" method="post" style="position: absolute; top:50px; left: 320px; width: 600px; height: 100%;" >
<table BORDER=2 style="position: relative; top:15px; left: 3px;" >
<TR>
<TH style="width:100px"><font color="blue">Date</font></TH>
<TH style="width:400px"><font color="blue">Location</font></TH>
<TH style="width:400px"><font color="blue">Job Title</font></TH>
<TH style="width:300px"><font color="blue">Company</font></TH>
</TR>
<?php
session_start();
for($i=0;$i<sizeof($_SESSION['liste']);$i++){
?>
<TR>
<td ><center><label><?php echo $_SESSION['liste'][$i]['date']; ?></label></center></td>
<td ><label><?php echo $_SESSION['liste'][$i]['region'].','.$_SESSION['liste'][$i]['city'].','.$_SESSION['liste'][$i]['state']; ?></label></td>
<td ><center><label><?php echo $_SESSION['liste'][$i]['title']; ?></label></center></td>
<td ><center><label><?php echo $_SESSION['liste'][$i]['comapany_name']; ?></label></center></td>
</TR>
<?php
}
?>
</table>
</form>
</body>
</html>
i have a form i want that every 10 results be displayed togother ie add the pagination to my form with two icons ( next, previous ).
can i do this only with php?
do i need ajax in this work?
Pass a $liststart value in as a parameter to your code (get it with $liststart = $_REQUEST['liststart']).
Then adjust your loop to loop from $liststart to $liststart+10.
Make a button that onClick, goes to your code above with the new $liststart value. for example for the 'next' button on the first page, use echo "' onClick='location.href=\"yourcodeabove.php?liststart=".$liststart+10."\";'>";
or if you prefer, you could do it without javascript by making the next and prev buttons their own forms. like this:
<FORM METHOD="LINK" ACTION="yourcodeabove.php?liststart="<?php $liststart+10 ?>">
<INPUT TYPE="submit" VALUE="next->">
</FORM>
close out your other form first (which doesn't look like it needs to be a form actually... could be a div just as well). forms usually have 'actions' and are submitted with buttons but since you'll have 2 buttons (next and prev) each could be their own form with either the javascript onClick or the form method.
If you use mysql this should work:
$page = $_GET['page'];
$query = mysql_query("SELECT * FROM some_table LIMIT $page, 10");
And do some work with $query variable, your links should be something like this:
Next