I want show post with for-each. My condition is 1st show 5 post and hide other post with a show more button if loop has more than 5 post, then when I click show more then will show other post and hide show more button and show less more button. If post has less then 5 then no showing show more button. How can I do that by jQuery?
<?php
foreach ($hotel_data as $key => $hoteldata)
{
//Show 3 lowest price of hotel link
if(isset($hoteldata[0]->rooms)){
/*$ii = 0;*/
foreach ($hoteldata[0]->rooms as $key => $bookinginfo) {
?>
<tr>
<td class="">
<div class="hotel_name">
<?php echo $bookinginfo->desc; ?>
</div>
</td>
<td class="booking-img">
<img src="http://pics.avs.io/hl_gates/100/30/<?php echo $bookinginfo->agencyId; ?>.png"/>
</td>
<td>
<div class="hotel-price">
Price : $ <?php echo $bookinginfo->price; ?>
</div>
</td>
<td class="booking-url">
BOOK NOW
</td>
</tr>
<?php
/*$ii++;
if($ii > 2){
break;
}*/
}
}
}
?>
You need to re-think your strategy. What you want can be best achieved with AJAX calls. Therefore you need to write your loop with with JS /jQuery. PHP would only handle the retrieval of posts.
For example, you can create an AJAX call that sends a POST request to a PHP script, sending the number of posts you would want. When PHP receives the request, it fetches the posts needed from the DB and sends the results back in JSON format, JS will then parse the results into your HTML.
The AJAX call can be called once at page load (loads first 5), then it can be called again when the "load more" button is clicked.
Take count of array if more than 5 show "show more" button. Please see example below:
<?php
// Get count
$count = count($hotel_data);
foreach ($hotel_data as $key => $hoteldata) {
//Show 3 lowest price of hotel link
if(isset($hoteldata[0]->rooms)) {
/*$ii = 0;*/
foreach ($hoteldata[0]->rooms as $key => $bookinginfo) {
?>
<tr>
<td class="">
<div class="hotel_name">
<?php echo $bookinginfo->desc; ?>
</div>
</td>
<td class="booking-img">
<img src="http://pics.avs.io/hl_gates/100/30/<?php echo $bookinginfo->agencyId; ?>.png"/>
</td>
<td>
<div class="hotel-price">
Price : $ <?php echo $bookinginfo->price; ?>
</div>
</td>
<td class="booking-url">
BOOK NOW
</td>
</tr>
<?php
}
}
if ($count>5) {
// Code for "show more" button
}
}
?>
Then you have to hide other post by some css class's style property display: none;.
For jQuery code, you have to make script on show more button and change property of other posts you have hide. Also change button text to "show less".
Related
So I have this code:
Javascript:
<script>
function hidenow(id) {
var divelement = document.getElementById(id);
var button = document.getElementById("hidebutton");
if(divelement.style.display == 'none')
divelement.style.display ='block',
button.style.display = "block";
else
divelement.style.display = 'none',
button.style.display = "none";
}
</script>
And two buttons:
<p>Programma's waarop u kunt abonneren:</p>
<form action="#" enctype="multipart/form-data" method="post">
<?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
<table>
<?php foreach ( $retrieve_data as $retrieved_data ) { ?>
<tr>
<th>Programma:</th>
<td id="hideit" style="vertical-align: middle;">
<?php
echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
?>
</td>
<th>
<button id="hidebutton" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>
</th>
</tr>
<?php } ?>
</table>
</form>
<!-- Dit stuk code laat de programma's zien waar de radiostation al op geabonneerd is. -->
<br>
<p>De programma's waarop u geabonneerd bent:</p>
<form action="#" enctype="multipart/form-data" method="post">
<?php wp_nonce_field( 'set_programmatest_action', 'set_programmatest' ); ?>
<table>
<?php foreach ( $retrieve_data as $retrieved_data ) { ?>
<tr>
<th>Programma:</th>
<td style="vertical-align: middle;"><?php echo esc_html( $retrieved_data->meta_value ); ?></td>
<th>
<button name="programmatest" type="submit" id="button" value="<?php echo esc_attr( $retrieved_data->meta_value ); ?>">Abonnement opzeggen</button>
</th>
</tr>
<?php }
?>
</table>
</form>
At the moment, when I click a button; it dissapears. But it comes back as soon as the data is submitted to the database and the page is refreshed. I want the button (along with the program that comes with it) to dissapear. I already tried making a isset. But this results in BOTH buttons dissapearing and not just one.
Example:
This is the first button, it is written in the second piece of code. When I click one button, it needs to dissapear along with the program. I tried doing this using isset but it resulted in the button dissapearing all together (both).
I also have this button:
I have done nothing to this button, since I do not want it.
I have tried looking on Stack Overflow and several articles and youtube videos. I have been busy making this for a week but I do not know how to make it work.
How can I make sure that the first button is not shown even after the data is submitted in the db or after the page is refreshed?
Have you tried https://developer.mozilla.org/pt-BR/docs/Web/API/Event/preventDefault ?
This stops the page from refreshing.
document.getElementById("form").addEventListener("click", function(event){
event.preventDefault()
});
You have to add some condition which checks whether to display button or not.
After submitting form you can set localStorage data and in your logic first check for this localStorage, if it is set do not display button otherwise display them.
This way if someone also refreshes page the localStorage will not loose and your button will not display.You can reset localStorage through your code to display them again.
Otherwise you can do on page load check for data / value in database, if it exist do not display the button otherwise display them.
Good day! I'm using datatable that shows a list for students and active and deactive as a hyperlink.
It works on page 1 but on page 2 or when I search the data my function which is the active and deactive doesn't work..
This my codes to deaactive an active acccount:
<td class="text-center">
<?php if($row->Status=='Active') echo 'Active'; ?>
<?php if($row->Status=='Inactive') echo 'Inactive'; ?>
</td>
Hi I have been trying to follow this tutorial about inline editing http://www.vandelaydesign.com/inline-edit-with-ajax/ . I want to apply it in my data table. When the user clicks the edit button the corresponding columns within its line becomes an input, but I do not know how to turn it that way. In the tutorial it uses .prev in jquery to get the value of the of the span but I do not know how to do that in my case. This is what my table looks like:
Category name and desc should become inputs when edit button is clicked. How do I do that?
<tbody>
<?php foreach ($categories as $category) { ?>
<tr>
<td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?> </span> </td>
<td>
<?= $category->category_desc ?>
</td>
<td>
<?= $category->created_on ?>
</td>
<td>
<?= $category->updated_on ?>
</td>
<td>
<?= $category->status ?>
</td>
<td>
<button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat">
<!-- data-id="<?= $category->category_id ?>" -->
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>
</td>
</tr>
<?php } ?>
</tbody>
Javascript:
$(document).on('click', '.edit_cat', function() {
console.log('edit category');
// console.log( $(this).data('id') );
var dataset = $(this).prev(".datainfo");
console.log(dataset);
var theid = dataset.attr("id");
console.log(theid);
var newid = theid+"-form";
var currval = dataset.text();
dataset.empty();
$('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);
});
I also need help in future proofing after solving this problem, How would I go about saving it, maybe getting the span id and start from there?
Datatables have a build in implementation of inline editing.
It gets installed as an own extension
Inline editing in Editor is activated through the use of the inline() API method. Simply call the method and pass in the cell you want to edit as the first parameter.
Take a closer look here - https://editor.datatables.net/examples/inline-editing/simple
I am working on a simple Chat right now, its already working, but its not very efficient.
Whenever I run my script it refreshes the whole Chat and loads the content over and over again.
Im trying to find a way that the script only loads new content from my chat database, the old messages shouldnt load over and over again.
This is the part from my index.php:
<div id="chat" class="full rund">
<table border="1" class="full chattable">
<?php
$abfrage = "SELECT * FROM chat";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis)) {?>
<tr class="chattr">
<td style="width:200px;"><h3 class="text">ƬψƬ ☢ <?php echo $row->name;?>:</h3></td>
<td style="width:440px;"><p><h3 class="text"><?php echo $row->text;?></h3></p></td>
<td style="width:160px;"><h3 class="text"><?php echo $row->timestamp;?></h3></td>
</tr>
<?php
}
?>
</table>
</div>
This is my chat.js:
setInterval( "updateShouts()", 1000 );
function fx(form,target){
var _target=target;
var url=form.action;
var data=$(form)[(form.method.match(/^post$/i))?'serializeArray':'serialize']();
$(_target).load(url,data,function(){setTimeout(function(){
$(_target).empty();
},0);});
return false;}
function updateShouts(){
$('#chat').load('php/latestMsg.php');
}
My latestMsg.php (same as index):
<div id="chat" class="full rund">
<table border="1" class="full chattable">
<?php
$abfrage = "SELECT * FROM chat";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis)) {?>
<tr class="chattr">
<td style="width:200px;"><h3 class="text">ƬψƬ ☢ <?php echo $row->name;?>:</h3></td>
<td style="width:440px;"><p><h3 class="text"><?php echo $row->text;?></h3></p></td>
<td style="width:160px;"><h3 class="text"><?php echo $row->timestamp;?></h3></td>
</tr>
<?php
}
?>
</table>
</div>
I hope anyone can help me, ive been searching for a long time now and I couldnt find anything that solves my problem!
Thanks :)
2 Solutions.
You will need a way to mark your messages as read, per user of course.
You can ignore that and only read back the last X messages.
in your chat table, you must add 'unread' field or something, to identify the message status (read/unread) , same like #geggleto solution
add filter to your query to something like this :
$abfrage = "SELECT * FROM chat WHERE timestamp between '$from' AND '$to' ";
to make sure you have a role to limit message by time
I think this is simple one but i am not able to get the desired output.i have two radio buttons with different name.what i want is when one radio button is checked the other radio button should automatically get checked and also the vice versa.
here is the simplified code snnipett.
<tr>
<?php
for($mb=0;$mb<count($emaildetails);$mb++)
{ ?>
<td align="left" style="padding-right:30px;">
<input type="radio" id="contactkanaalid" name="contactkanaalid"
value="<?php echo $emaildetails[$mb]['id']; ?>"
<?php if($mb == 0)echo 'checked="checked"'; ?> onclick="selectText(this)" />
</td>
<?php
} ?>
</tr>
and the other one
<tr>
<?php
for($mb=0;$mb<count($emaildetails);$mb++)
{ ?>
<td align="left" style="padding-right:30px;">
<input type="radio" id="kcontactkanaalid" name="kcontactkanaalid"
value="<?php echo $emaildetails[$mb]['id']; ?>"
<?php if($mb == 0)echo 'checked="checked"'; ?> onclick="selectText(this)" />
</td>
<?php
} ?>
</tr>
and i am trying the following to achieve the output but no luck:
if(document.getElementById('contactkanaalid').checked){
document.getElementById('kcontactkanaalid').checked="checked";}
and the javacsript code
function selectText(t)
{
selbu=t.value;
<?php
for($i=0;$i<count($emaildetails);$i++)
{
$buid=$emaildetails[$i]['id'];
echo "if(selbu=='$buid'){";
//the logic for radio buttons
}
?>
}
thanks in advance
There is no way to get two radio buttons checked at the same time. With name you´re grouping radio options.
The use that you´re thinking for your radios is incorrect, and will cause UX issues, you must use checkboxes. But if you still want to achieve the result that you want, simply change the name attribute in one of your radios.
Regards.