I made this JS function that open 2 pages
function edit(id){
window.open('<?php echo site_url();?>store_out/store_out_print/'+id);
window.open('<?php echo site_url();?>store_out/delivery_print/'+id);
document.getElementById('print').target = '_blank';
}
I have that table that display all possible records that user can select one row and click on print image so two pages are opened:
<?php
for($i=0;$i<sizeof($storeout);$i++){ ?>
<tr class="gradeZ" id="<?php echo $storeout[$i]->storeout_id;?>" onclick="edit(this.id); ">
<td><?php printf("%06d",$i+1);?></td>
<td><?php echo $storeout[$i]->storeout_id;?></td>
<td><?php echo $storeout[$i]->storeout_modified_time;?></td>
<td><?php echo $account[$i][0]->account_name;?></td>
<td><?php echo $storeout[$i]->rof_id != 0 ? "R.O.F" : "S.O";?></td>
</tr>
<?php } ?>
I want when I select specific row and click on the print image, execute two functions to open two different pages (delivery/store_out).
Any Ideas guys?
I'm going to assume that the td is in a tr which is programmatically generated in a loop (i.e. you will have more than 1 tr, td, and img). I will also assume jQuery is available.
The first problem will be if you have more than 1 row that is created in a loop, you will have a bunch of things with the same id="print". This is not the good js.
You should append the store_out (or whatever the id is you are trying to get to the controller) to the id attribute. Something like id="print_<?php echo $thing->id;?>". This will let you get the id you want to pass to the edit function. I would also add a class="print" which will make the below easier. So, the whole row would look something like:
<td width="5%"><a id="print_<?php echo $thing->id; ?>" class="print" href="#" ><img src="<?php echo site_url();?>/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>
Which would output something like:
<td width="5%"><a id="print_1234" class="print" href="#" ><img src="http://example.com/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>
Second is you are not passing the id to the method so far as I can tell. Considering you heeded the above, you can pull the id from the id attribute.
$('.print').click(function(){
var id = $(this).attr('id').split('_')[1];
edit(id);
})
Related
I'm trying to create a table, and in each row there will be a picture, and when the picture is clicked a js function gets executed, each entry of a row in the table will create a js script for the picture of that row. And for that reason I'm using <?php echo ?> on the id of the image and on the getElementById in the script. And I have no problem using the echo on the id of the image, but if I put it inside getElementById the js code doesn't get executed. And if I write instead directly the number of the id let's say
getElementById("3") instead of getElementById("<?php echo $contact['id']; ?>") it works perfectly, but if use echo it doesn't, even when the source code of the loaded page shows that getElementById("<?php echo $contact['id']; ?>") successfully got printed as getElementById("3")
Here's the full table's code:
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $contacts = getContacts();
if($contacts->num_rows) {
foreach($contacts as $contact) { ?>
<tr>
<td>
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage("");'>
<script type="text/javascript">
function removeImage() {
document.getElementById("<?php echo $contact['id']; ?>").style.display = "none";
}
</script>
</td>
<td><?php echo $contact['Name']; ?></td>
<td><?php echo $contact['Status']; ?></td>
</tr>
<?php }} ?>
</tbody>
</table>
When looping, you are recreating the same function over and over again, but with a different ID in each. However, you can't create the same function over and over again with the same name.
On your img change removeImage('') to removeImage(this)
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage(this);'>
Then outside of the loop just have a single function that refers to the element passed to it
function removeImage(el) {
el.style.display = "none";
}
I've been able to get my arrays working to echo text from a database in HTML. Fine. However, I now want to send this text to another page onClick (JQuery or JavaScript). So here is what I already have (I know it's not sending anything, but this is not the problem right now) :
PHP
$h = "SELECT * FROM table";
$h=$pdo->prepare($h);
$h->execute();
$i=1;
while ($row = $h->fetch()) {
$text[$i] = $row['content'];
$id[$i] = $row['id'];
$i++;
}
HTML
<h1 id="<?php echo $id[0]; ?>" onClick="edit(this)"><?php echo $text[0]; ?>
</h1>
<h2 id="<?php echo $id[1]; ?>" onClick="edit(this)"><?php echo $text[1]; ?></h2>
<p id="<?php echo $id[2]; ?>" onClick="edit(this)"><?php echo $text[2]; ?></p>
JavaScript
function edit(element) {
alert(element.id);
}
So, this gives me the "id" of the content in the database. However, I'd like to know if there is a way to get this information without having the "id" in the HTML tags, a way to click on the text and have the number that is inside the square brackets.
Example : you click on the text inside the "h1" tag and a pop up tells you what is the number in <?php echo $text[2]; ?>. In this case, I would like the number 2 to show up in the alert box, without using id="<?php echo $id[2]; ?>".
It's strange that I didn't find anything at Google but I hope you can help me. I have a Table with different accounts. When I click on one of those rows, another table for this specific account will slide in. This "specific table" for this account needs to show some account specified data and therefore I need to tell my ajax request for what account he needs those data. The problem: I don't know how I can tell this. I never used Ajax requests without a form.
My HTML Table (I need the var $orderid for my ajax request)
foreach($data as $row)
{
$orderid =$row['id'];
$username = $row['name'];
$done = $row['refsDone'];
$quantity = $row['quantity'];
$running =$row['refsRunning'];
$untouched = $quantity - ($done+$running);
echo "
<tr class='header mySlideToggler'>
<td class='align-center'>$username</td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td>$done / $quantity</td>
<td>$running</td>
<td>$untouched</td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'>
Content of the additional info is here
</div>
</td></tr>";
}
My Jquery part which handles only the slide effect of the div and its trigger function:
$('.mySlideToggler').click(function( event ){
event.preventDefault();
event.stopPropagation();
$(this).closest('tr').next().find('.slideMe').slideToggle();
});
So basically my question is: How can I access the php value $orderid from my Jquery function?
Put the order id in the html:
<tr class='header mySlideToggler' data-id="<?php echo $orderid; ?>">
And then:
$('.mySlideToggler').click(function( event ){
event.preventDefault();
event.stopPropagation();
var id = $(this).data('id');
$(this).next().find('.slideMe').slideToggle();
});
Store your id within some data-attribute that can be accessed by JS.
Create some hidden variable and assign value of $orderid to it.
then read same variable inside jQuery. And you are done :)
You can set the ordered attribute wherever you want in your HTML element, like this:
<?php
foreach($data as $row)
{
$orderid =$row['id'];
$username = $row['name'];
$done = $row['refsDone'];
$quantity = $row['quantity'];
$running =$row['refsRunning'];
$untouched = $quantity - ($done+$running);
?>
<tr class='header mySlideToggler' orderedid='<?php echo $orderedid ?>'>
<td class='align-center'><?php echo $username ?></td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td><?php echo $done / $quantity ?></td>
<td><?php echo $running ?></td>
<td><?php echo $untouched ?></td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'>
Content of the additional info is here
</div>
</td></tr>
<?php
}
?>
PHP will render the right id for you like a simple HTML attribute. After it, you can access the attribute of your element using jQuery selector inside your .click() function:
$(this).attr('orderedid');
As a good practice, do not "echo" your HTML. Instead of it, enclose plain HTML inside PHP tags. This will make your code more legible.
I have a html table that is populated using PHP:
<table class="flat-table flat-table-1" width="100%">
<tr style="background-color:#FFF;">
<td class="table-head">Name</td>
<td class="table-head">Review</td>
<td class="table-head">Rating</td>
</tr>
<?php
//run a query to find all the fields in the review table that belong to the specific hall, using the id in the url ($current_id)
if ($r = $db->prepare("SELECT * FROM reviews WHERE hall_id = :current_id")) {
//bind the parameters used in the above query using the 'current_id' variable
$r->bindParam(':current_id', $current_id);
//Execute the prepared query
$r->execute();
//search review table for all fields and save them in $review
$reviewtemp = $r->fetchAll();
foreach( $reviewtemp as $review) {
//loop and output the reviews
?>
<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; }}?></td>
</tr>
</table>
The - <td><? echo $review['review']; ?></td>' - contains longs pieces of text that need to be shorted using a show more/less button, if the piece of text is over 400 characters.
I have tried using pieces of code I have found on the internet but have had no luck. I am hoping that maybe somebody on here can point me in the right direction? I am happy to use any solution I can.
The following piece of code is the kind of thing I need to use, however I am unsure how to implement it into my code: http://jsfiddle.net/Wpn94/326/
(--I have previously asked a similar question before but had no responses. I have now changed the question and have posted it again--)
In the following code, I updated the HTML to contain more than one review and use tables.
http://jsfiddle.net/3VTb7/
The structure that is impotant for the javascript to work is this:
<table>
<tr><td>Name</td></tr>
<tr><td><div class="content hidecontent">insanely long review here</div><div class="show-more">Show More</div><td></tr>
</table>
Note: You must have the hidecontent class. The show more div should be directly after the content you want to hide and include the show-more class.
Without looking at the code you tried to mix together, I cannot determine what else can be wrong.
This might be an error: <td><? echo $review['overall']; }}?></td>
Since you're looping the table rows, } should go after </tr>
<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; ?></td>
</tr>
<?php }} ?>
To answer question, maybe something like:
First, if you have review_id use that otherwise add $id = 0; before if ($r = $db->prepare("...
Split review into two..
<td><?php
$review = $review['review'];
$short_length = 200;
$short = substr($review, 0, $short_length);
$long = substr($review, $short_length);
$id++;
echo $short . '<span class="content hidecontent" id="review'.$id.'">'.$long.'</span>
Show More';
?></td>
Then use jQuery to toggle
$("#hidecontent").click(function(){
var reviewid = "#review"+$(this).data("id");
$(reviewid).slideToggle(500, function(){
var moreless = $(reviewid).is(":visible") ? 'Less' : 'More';
$(this).html("Show "+moreless)
});
});
I am trying to create form by dynamically adding rows and deleting it when user clicks on delete button using php code,
below is my code to render first row while opening the form ,
<div class="selector-details" style="display:none">
<div class='newfield'>
<div id='container'>
<table id="tid">
<tr>
<td><?php echo CHtml::dropDownList('field_list','',$field_name); ?></td>
<td><?php echo CHtml::dropDownList('field_list','',$operator); ?></td>
<td><?php echo CHtml::textField('querybox'); ?></td>
<td> <?php echo CHtml::imageButton(Yii::app()->request->baseUrl.'/images/Trash.jpg',array('class'=>'trash-action')); ?></td>
<?php echo "<br>"; ?>
<td> <?php echo CHtml::dropDownList('condition_check','',$condition_check);?></td>
</tr>
</table>
</div>
</div>
<?php
echo CHtml::button('Add',array('class'=>'addfield-button','background-style'=>'none'));
how i should make call the above code to add rows and delete particular row when user clicks on the row delete button ? I am new to yii please provide any idea to go further.
$script = 'alert("hello")';
Yii::app()->getClientScript()->registerScript('#test', $script,CClientScript::POS_HEAD );
echo CHtml::button('Add',array('class'=>'addfield-button','background-style'=>'none','onclick'=>$script));
if you real want to use Yii style, you can open framework code and there is a good code that you want, search : CButtonColumn.php