How do I direct inline HTML to a variable? - php

This PHP code outputs HTML to the user.
<div class="whole">
<input type="hidden" class="hid" name="hid" value="<?php echo $datum['id']; ?>">
<div class="col1"> <div class="d1" id="naam<?php echo $datum['id']; ?>"><?php echo $datum['name']; ?></div>
</div>
<div class="col2"> <div class="d2" id="email<?php echo $datum['id']; ?>"><?php echo $datum['email']; ?></div>
</div>
<div class="col3"> <div class="d3" id="state<?php echo $datum['id']; ?>"><?php echo $datum['state']; ?></div>
</div>
<div class="col4"> <div class="d4" id="gender<?php echo $datum['id']; ?>"><?php echo $datum['gender']; ?></div>
</div>
<div class="col5"> <div class="d5" id="lang<?php echo $datum['id']; ?>"><?php echo $datum['lang']; ?></div>
</div>
<div class="col6">
<?php
echo "<a href='images/".$datum['image']."' data-lightbox='picbox' data-title='".$datum['image']."'> <img src='images/".$datum['image']."'></a>";
?>
</div>
</div>
Instead of sending this output to the user, I want it in the variable $output. How can I do this?

You can use Jquery to get HTML code inside your div:
$( document ).ready(function() {
data = $(".whole").html();
console.log(data);
});
Where data is:
<input type="hidden" class="hid" name="hid" value="<?php echo $datum['id']; ?>">
<div class="col1"> <div class="d1" id="naam<?php echo $datum['id']; ?>"><!--?php echo $datum['name']; ?--></div>
</div>
<div class="col2"> <div class="d2" id="email<?php echo $datum['id']; ?>"><!--?php echo $datum['email']; ?--></div>
</div>
<div class="col3"> <div class="d3" id="state<?php echo $datum['id']; ?>"><!--?php echo $datum['state']; ?--></div>
</div>
<div class="col4"> <div class="d4" id="gender<?php echo $datum['id']; ?>"><!--?php echo $datum['gender']; ?--></div>
</div>
<div class="col5"> <div class="d5" id="lang<?php echo $datum['id']; ?>"><!--?php echo $datum['lang']; ?--></div>
</div>
<div class="col6">
<!--?php
echo "<a href='images/".$datum['image']."' data-lightbox='picbox' data-title='".$datum['image']."'--> <img src="images/".$datum[" image']."'="">";
?>
After that you can send data to PHP via AJAX

<?php
ob_start();
?>
your html goes here
<?php
$html = ob_get_contents();
ob_end_clean();

Use heredoc syntax, like so:
$output = <<<ANY_IDENTIFIER_THAT_DOES_NOT_APPEAR_IN_THE_TEXT_HERE
<div class="whole">
<input type="hidden" class="hid" name="hid" value="{$datum['id']}">
<div class="col1"> <div class="d1" id="naam{$datum['id']}">{$datum['name']}</div>
</div>
<div class="col2"> <div class="d2" id="email{$datum['id']}">{$datum['email']}</div>
</div>
<div class="col3"> <div class="d3" id="state{$datum['id']}">{$datum['state']}</div>
</div>
<div class="col4"> <div class="d4" id="gender{$datum['id']}">{$datum['gender']}</div>
</div>
<div class="col5"> <div class="d5" id="lang{$datum['id']}">{$datum['lang']}</div>
</div>
<div class="col6">
<a href='images/{$datum['image']}' data-lightbox='picbox' data-title='{$datum['image']}'> <img src='images/{$datum['image']}'></a>
</div>
</div>
ANY_IDENTIFIER_THAT_DOES_NOT_APPEAR_IN_THE_TEXT_HERE;
This last part must be exactly the same identifier as at the beginning, unindented and followed by a semicolon.
Also, note that I took out all of the <?php ?> sections, and replaced them with {$datum['image']} accesses (unless I missed one). Heredocs in PHP work just like "double quoted strings", except spread across multiple lines and able to include " marks.
For more information, see the PHP documentation on string syntax.

Related

ACF Group type not working and the if inside PHP tag hide the section1 in the front end

<?php $section1 = get_field('section1'); ?>
<div class="section1" id="section1">
<div class="container">
<h2><?php echo $section1['title']; ?></h2>
<div class="quote-triangle">
<p>
<?php echo $section1['quote']; ?>
</p>
<div class="quote__moving-border"></div>
</div>
<div class="bottom">
<div data-aos="fade-down">
<div class="leftside">
<h3>
<?php echo $section1['title_image']; ?>
</h3>
<div class="caption"><?php echo $section1['caption_image']; ?></div>
<div class="desc">
<p>
<?php echo $section1['desc_image']; ?>
</p>
</div>
</div>
</div>
<div data-aos="fade-down">
<div class="rightside">
<img src="<?php echo esc_url( $secttion1['image']['url'] ); ?>" alt="" class="rightside__img">
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
I had followed literally the ACF documentation for the GROUP type but when I put the if in the PHP tag the whole section disappears and when I remove if the section back but The Group type still not worked.

PHP Loop executing on top of each other

It should be like this:
<div> code here </div>
<div> code here </div>
<div> code here </div>
Each div looping right after the other. Instead, it is executing like this:
<div> code here </div>
<div> code here </div>
<div> code here </div>
Page I am working on: http://www.equitasmg.com/who-we-are-2/
The images are not aligned (should be in a row).
Here's the PHP:
<center><h2>Our Leadership</h2></center>
<?php
$people= get_field('people');
$a=0;
foreach ($people as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:250px;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
<?php } ?>
Here is the problem one div should between closing php tag
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<?php } ?>
</div>
<?php } ?>
You don't need to float every div in loop just add a div before loop and float that div to left.
remove floating Style within loop.. here is your clean code.
JS BIN
<div style="float:left;width:30%;padding:30px;">
<?php
$people= get_field('people');
$a=0;
foreach ($people as $r) {
$a++;
?>
<div style="">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:250px;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
<?php } ?>
<div style="clear:both;"></div>
</div>

Image height not working on php loop

Here's the div that manages the look of each item in the loop:
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
If I set the height to a fixed number (eg: 450x), the images are aligned in a row. But that will make the page non mobile responsive. If I set the height to auto or to a percentage like 30%, the images become mobile responsive but they don't align. I get 2 images that separate into different rows.
Also, I got 2 sections of image. One is called Our Leadership and the other is called Our Team. The section at the bottom is aligned correctly and is contained in a div. The div above it refuses to be contained in a div. If I wrap it in a div, Only the first item wraps itself in the div. I've no idea why.
eg:
<center>
<div>
<div>first item here</div>
</div>
<div>second item here</div>
<div>third item here</div>
<div>fourth item here</div>
Here's the complete code for both sections:
<center><h2>Our Leadership</h2></center>
<center><div>
<?php
$people = get_field('people');
$a = 0;
foreach ($people as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
<center><h2>Our Team</h2></center>
<center><div>
<?php
$people2 = get_field('people_bottomsection');
$a = 0;
foreach ($people2 as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
Check out the source code at: http://www.equitasmg.com/who-we-are-2/
it's because the items in the loop are having different height. So, try adding a constant height to each item in the loop.
Eg:
<div style="float:left;width:30%;padding:30px;min-height:550px;"></div>

Alternate layout for every loop

In every loop I want to alternate the layout of my blocks, so it would be like this:
Loop 1: Left column image, right column text
Loop 2: Left column text, right column image
But so far all i'm managing so far is each block is on the same side or the first block is duplicated, here is my code so far:
Any help or a point in the right direction would be greatly appreciated
<?php $i = 0;
foreach ($homepageblocks as $block):
$i++; ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
</div>
</div>
<?php if($i%2 == 0): ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
Add else branch to your if:
foreach ($homepageblocks as $block):
$i++;?>
<div class="row">
<div class="container container-fluid">
<?php
// one layout type
if($i%2 == 0):?>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<?php
// another layout type
else:?>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
<?php
endif;?>
</div>
</div>
<?php
endforeach; ?>

Pagination with jQuery / AJAX

What plugin should I use to paginate the output of the below PHP foreach (around 400 <articles>):
<div id="hotel-list" class="hotel-list listing-style3 hotel">
<?php foreach ($hotelName as $index => $name):?>
<article class="box" data-board="<?php echo $board[$index];?>" data-stars="<?php echo $StarRating[$index];?>" name="<?php echo $hotelName[$index];?>" data-price="<?php $pret1 =$hotelPrices[$index];echo round($pret1 + ($pret1 * 0.20));?>">
<figure class="col-sm-5 col-md-4">
<a title=""><img width="270" height="160" alt="" src="<?php echo $img[$index][0];?>"></a>
</figure>
<div class="details col-sm-7 col-md-8">
<div>
<div>
<h3 class="box-title"><?php echo $name;?><small><i class="soap-icon-departure yellow-color"></i> <?php echo $hotelAddress[$index];?>, <?php echo $hotelDestination[$index];?></small></h3>
</div>
<div>
<div class="stars-<?php echo $StarRating[$index];?>-container">
<span class="stars-<?php echo $StarRating[$index];?>" style="width: 80%;"></span>
</div>
</div>
</div>
<div>
<div>
<p class="article-text"><label>Perioada: </label> <?php echo $In;?> - <?php echo $Out;?> <?php echo $adults;?> adulti / <?php echo $kids;?> copii; </p>
<p class="article-text"><label>Tip Masa: </label><?php echo $boardType[$index];?></p>
<p class="article-text"><label>Camera(e): </label><?php echo $availHotelss[$index]->rooms[0]->roomCategory;?> <?php echo $availHotelss[$index]->rooms[1]->roomCategory;?> <?php echo $availHotelss[$index]->rooms[2]->roomCategory;?> <?php echo $availHotelss[$index]->rooms[3]->roomCategory;?></p>
</div>
<div>
<span class="price"><small>De la</small>€<?php $pret1 =$hotelPrices[$index];echo round($pret1 + ($pret1 * 0.2)); ?></span>
<a class="button btn-small full-width text-center" title="" href="Hotel-Detalii.php?hotel=<?php echo $hotelCodes[$index];?>">DETALII</a>
</div>
</div>
</div>
</article>
<?php endforeach?>
</div>
I found only pagination plugin for MYSQL records.

Categories