How I create a Read More button inside a table? - javascript

<?php $counter = 0 ?>
<table>
<?php foreach($attributes as $a): ?>
<tr>
<td><?php $a['name']?></td>
<td><?php $a['Price']?></td>
</tr>
<?php $counter++;
if ($counter > 3) ?> <!-- What to do here? -->
<?php endforeach; ?>
</table>
In a PHP Block like this, I would like to got a Read More button after three tr elements, and when I click the button show all the rest of elements...
Something to do with PHP?

No, it has nothing to do with php. You need JavaScript to implement this if you don't want to reload the whole page.
In PHP you could print the short and the long version into separate divs and then use the following JS-Code on the View-More-Button:
document.getElementById("shortId").style.display = "none";
document.getElementById("longId").style.display = "block";

Related

Writing the code correctly - Javascript [duplicate]

I came across a problem which I can't solve on my own!
I have a Table which is populated using PHP/MySQL something like
foreach($users as $user){
?> <tr id="<?php echo $user['fName'].
"-".$user['lName'];?>">
<td> <?php
echo $user['fName']." ".$user['lName'];
?> </td>
<?php
for ($i = 0; $i<$count+3; $i++){
?> <td><input class="accessCheck" id="<?php
echo $user['lName']."-".$pagesArray[$i];
?>" type="checkbox"></td>
<?php } ?>
</tr> <?php
}
As you can see table would look something like
fName lName | checkbox | checkbox | checkbox | mainCheckbox
What I need to do is to check/uncheck all checkboxes with mainCheckbox, is there a way to select all rows just from checking this mainCheckbox?
EDIT: How to find class when you select something like input, is there a way of finding a class for this? For example
$("input").click(function(){
});
Is there a way to find a class for this input?
Tyr this:
$('#all').on('click', function(){
$(':checkbox').prop("checked",$(this).is(':checked'));
});
http://jsfiddle.net/Dfzdh/
I think you would need to use jQuery
Look at the sibblings method.
Here is a question close to yours.
OnClick change all sibling table rows jQuery
I havent heard about any "onChange"-equivalent function in PHP yet

Javascript event not working

I have this php code below
<?php foreach($items in $item) : ?>
<a class="btn">$item</a>
<?php endforeach; ?>
and this javascript below
$('.btn').click(function() {
console.log('hello');
});
it should work when I click the <a> tag but it's not working.
So, help me please. (Sorry for bad English)
foreach($items in $item) this is wrong. php foreach uses as not in
http://php.net/manual/en/control-structures.foreach.php
Use either
<?php foreach($items as $item) :
echo "<a class='btn'>".$item."</a>"
endforeach; ?>
or
<?php foreach($items as $item):?>
<a class='btn'><?php echo $item>?></a>"
<?php endforeach; ?>
$item must be within <?php ... ?> or it's meaningless to php
Did you add jQuery library link into it? because you used "$".
Just declare jquery library before your script. It should works
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
p/s: also fix php syntax as Ramanlfc mentioned above

function is not working if I put this into js folder

I have a add.ctp file, where I can add a multiple rows, and if I put addNumber function to app/webroot/js, then its not working, why?
My view file (add.ctp)
<table id="mytable">
<tr id="number0" style="display:none;">
<td><?php echo $this->Form->button(' - ',array('type'=>'button','title'=>'Click Here to remove this number')); ?></td>
<td><?php echo $this->Form->input('lisanumbrid', array ('name'=>'data[Kontaktid][lisanumbrid][0]')) ?></td>
</tr>
<tr id="trAdd"><td> <?php echo $this->Form->button('+',array('type'=>'button','title'=>'Click Here to add another number','onclick'=>'addNumber()')); ?> </td><td></td><td></td><td></td><td></td></tr>
</table>
<?php
echo $this->Form->end('Lisa');
?>
Adding multiple rows function(addNumber.js) is here app/webroot/js:
var lastRow=0;
function addNumber() {
$("#mytable tbody>tr#number0").clone(true).attr('id','lisanumbrid'+lastRow).removeAttr('style').insertBefore("#mytable tbody>tr#trAdd");
$("#lisanumbrid"+lastRow+" button").attr('onclick','removeNumber('+lastRow+')');
$("#lisanumbrid"+lastRow+" input:first").attr('numbrid','data[Lisanumbrid]['+lastRow+'][lisanumbrid]').attr({'id':'numbridlisaNumber'+lastRow,'name': 'data[Kontaktid][lisanumbrid]['+ lastRow +']'});
lastRow++;
}
function removeNumber(x) {
$("#lisanumbrid"+x).remove();
}
Jquery file is in the same folder like a function, and its echoed in C:\wamp\www\cakephp-2.5.6\app\View\Layouts\default.ctp
echo $this->Html->script('jquery-2.1.1.min.js');
If I put this addNumber function into add.ctp file and put into add.ctp
<?php echo $this->Html->script(array('jquery-2.1.1.min.js'));?>
then its working nice, put I dont want these into add.ctp file.
Thanks for helping !
Solution
Added <?php echo $this->Html->script('addNumber'); ?> in to add.ctp file, after </table>
Are you calling addNumber.js in your add.ctp?
You could call this js file in app\View\Layouts\default.ctp and then
echo $this->Html->script(addNumber.js);
or you can create a script tag inside add.ctp calling it:
$.getScript('/epedidos/app/webroot/js/addNumber.js');
By the way, check in your console on firebug (pressing F12 on your keyboard) if the error calling this function is not defined.
You have to add all javascript's files used in your view in the working order using script method of Html object in your header section or at the end of your ctp file.
For example:
I will suppose that you have not added jquery and your addnumber before, so at the end of your ctp file:
<?php echo $this->Html->script(array('jquery','addNumber')); ?>
Regard the order, i.e jquery must be before addNumber and both of them must be in webroot/js/

How to implement horizontal navigation through multiple wordpress posts with dynamic content (slideshow-like)?

My client wants a page where one can navigate through all the available Wordpress auctions (I'm using the Auction Plugin by Sitemile). You can see how the page in question looks like here.
I'm using a table inside a div where each table column refers to a single post/auction. Every column must be 1366px wide, and the navigation through columns/posts should be made clicking the left and right yellow arrows. Is it possible? If so, how?
Or is there a better way to do this, not using a table but divs only?
Here's how I'm generating the content:
<div class="box_content">
<table>
<tr>
<?php $i = 0; if ($pageposts): ?>
<?php global $post; ?>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>
<?php echo "<td style='min-width: 1366px; padding-right: 60px;'>
(... auction content ...)
"?></td>
<?php endforeach; ?>
<?php endif; ?>
</tr>
</table>

Add XHR to a Javascript Function

When I execute the following code, a GET message appears in the Firebug Console however the variable is undefined, and I think that is due to the scope of the variable being limited to the function only.
My goal is to be able to click the table row, and upon clicking the table row, fetch some data from the server related to the record in the table, and then populate part (not all) of a web form, which I will then add more data to, and then submit the form (see image).
Here is the Javascript function which defines a variable called $id as the given rows' data-attribute ('recordID') which itself was been passed into the <tr> tag when the table was generated.
Javascript:
$(document).on('click', 'tr', function() {
//Get the ID from the row clicked
var $id = $(this).data('recordId');
//short-hand
$('#section2').load('data_entry_form.php?id='+id);
});
PHP snippet that includes the data-attribute:
<table = "all_aifs">
<tr>
<th><b>Document ID</b></th>
<th><b>Pubco Name</b></th>
<th><b>Filing Date</b></th>
<th><b>PDF</b></th>
</tr>
<?php foreach($result as $index => $row) : ?>
<tr data-recordId="<?=$row[fee_source_id];?>"
class="<?=$row["match"] ? "match" : "";?>">
<td><?php echo $row[fee_source_id]; ?></td>
<td><?php echo $row[company_name_per_sedar]; ?></td>
<td><?php echo $row[document_filing_date]; ?></td>
<td></td>
</tr>
<? endforeach;?>
</table>
Question: How can I have my web form contain some data related to the row I clicked? I think I need to use AJAX. Also, why is the variable "undefined" in the Console? I think I need it to be defined as the $id variable (which is the recordId).
The variable id is undefined because you never have defined it.
You only defined $id not id.

Categories