I have to fetch data using a REST Api, and my response is in json. After decoding the response is in an array I have to display it in a webpage such that each of the responses in the array get displayed in a specific display format (Just Like tweets in twitter are displayed in a specific box type format).How to loop through the array in php and display it ? The only solution I find is embedding the HTML in php using echo which I did but it is not working .And the debugger isn't helping much.
What am I missing ?
Please advise what to do.
Here is my code:
echo "<div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-profile- popup-actionable js-original-tweet my-tweet" data-tweet-id="515380319977893890"data-item-id="515380319977893890" data-name="" data-user-id="2665607941" data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer">
<div class="entities-media-container js-media-container" style="min-height:0px">
</div>
<div class="js-machine-translated-tweet-container"></div>
<div class="js-tweet-stats-container tweet-stats-container ">
</div>
<div class="client-and-actions">
<span class="metadata">
<span>11:00 PM - 25 Sep 2014</span>
· <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a>
</span>
</div>
</div>
" data-you-follow="false"data-you-block="false">" ;
echo "<div class="content">" ;
echo "<div class="stream-item-header">" ;
echo "<a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" data-user-id="2665607941">
<img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/506790785572814848/vdj_UAuZ_bigger.jpeg" alt="">
<strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part> </strong>
<span></span><span class="username js-action-profile-name" data-aria-label-part><s></s><b> </b></span>
</a>" ;
echo "<small class="time">
<a class="tweet-timestamp js-permalink js-nav js-tooltip" title="11:00 PM - 25 Sep 2014" ><span class="_timestamp js-short-timestamp "
data-aria-label-part="last" data-time="1411711218" data-time-ms="1411711218000" data-long-form="true">Sep 25</span></a>
</small>" ;
echo"</div>";
echo "<p class="js-tweet-text tweet-text" lang="en" data-aria-label-part="0"> </p>" ;
echo "<div class="stream-item-footer">";
echo "<ul class="tweet-actions js-actions">";
echo "<li class="more-tweet-actions">";
echo "<div class="action-more-container">";
echo "<div class="dropdown">";
echo "<button type="button" class="btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip">";
echo "<span class="Icon Icon--delete"></span>";
echo "<b>Delete</b>";
echo "</button>";
echo "<div class="dropdown-menu">";
echo "<div class="dropdown-caret">";
echo "<div class="caret-outer"></div>";
echo "<div class="caret-inner"></div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</li>";
echo "</ul>";
echo "</div>";
echo "</div>";
echo "</div>";
After Scott's answer I changed my code , but still it is not working and I am not getting it.
echo "<div class=\"tweet original-tweet js-stream-tweet js-actionable-tweet js-profile-popup-actionable js-original-tweet
my-tweet\" data-tweet-id="515380319977893890\"data-item-id=\"515380319977893890\" data-name=\"\" data-user-id=\"2665607941\"
data-expanded-footer=\"<div class="js-tweet-details-fixer tweet-details-fixer">
<div class="entities-media-container js-media-container" style="min-height:0px">
</div>
<div class="js-machine-translated-tweet-container"></div>
<div class="js-tweet-stats-container tweet-stats-container ">
</div>
<div class="client-and-actions">
<span class="metadata">
<span>11:00 PM - 25 Sep 2014</span>
· <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a>
</span>
</div>
</div>
"
data-you-follow=\"false\"data-you-block=\"false\">" ;
echo "" ;
echo "<div class=\"stream-item-header\">" ;
echo "<a class=\"account-group js-account-group js-action-profile js-user-profile-link js-nav\" data-user-id=\"2665607941\
">
<img class=\"avatar js-action-profile-avatar\" src=\"https://pbs.twimg.com/profile_images/506790785572814848/vdj_UAuZ_bigger.jpeg\" alt=\"\">
<strong class=\"fullname js-action-profile-name show-popup-with-id\" data-aria-label-part> </strong>
<span></span><span class=\"username js-action-profile-name\" data-aria-label-part><s></s><b> </b></span>
</a>" ;
echo "<small class=\"time\">
<a class=\"tweet-timestamp js-permalink js-nav js-tooltip\" title=\"11:00 PM - 25 Sep 2014\" ><span class=\"_timestamp js-short-timestamp \"
data-aria-label-part=\"last\" data-time=\"1411711218\" data-time-ms=\"1411711218000\" data-long-form=\"true\">Sep 25</span></a>
</small>" ;
echo"</div>";
echo "<p class=\"js-tweet-text tweet-text\" lang=\"en\" data-aria-label-part=\"0\"> </p>" ;
echo "<div class=\"stream-item-footer\">";
echo "<ul class=\"tweet-actions js-actions">";
echo "<li class=\"more-tweet-actions\">";
echo "<div class=\"action-more-container\">";
echo "<div class=\"dropdown\">";
echo "<button type=\"button" class=\"btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip\">";
echo "<span class=\"Icon Icon--delete\"></span>";
echo "<b>Delete</b>";
echo "</button>";
echo "<div class=\"dropdown-menu\">";
echo "<div class=\"dropdown-caret\">";
echo "<div class=\"caret-outer\"></div>";
echo "<div class=\"caret-inner\"></div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</li>";
echo "</ul>";
echo "</div>";
echo "</div>";
echo "</div>";
Check your single and double quotes. The strings are being returned are being truncated. This is invalid:
echo "<div class="stream-item-header">" ;
Change it to:
echo "<div class=\"stream-item-header\">" ;
Or:
echo "<div class='stream-item-header'>" ;
And repeat this fix for each of your echo lines.
For example, this:
echo "<div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-profile- popup-actionable js-original-tweet my-tweet" data-tweet-id="515380319977893890"data-item-id="515380319977893890" data-name="" data-user-id="2665607941" data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer">
<div class="entities-media-container js-media-container" style="min-height:0px">
</div>
<div class="js-machine-translated-tweet-container"></div>
<div class="js-tweet-stats-container tweet-stats-container ">
</div>
<div class="client-and-actions">
<span class="metadata">
<span>11:00 PM - 25 Sep 2014</span>
· <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a>
</span>
</div>
</div>
" data-you-follow="false"data-you-block="false">" ;
Becomes this:
echo "<div class=\"tweet original-tweet js-stream-tweet js-actionable-tweet js-profile- popup-actionable js-original-tweet my-tweet\" data-tweet-id=\"515380319977893890\" data-item-id=\"515380319977893890\" data-name=\"\" data-user-id=\"2665607941\" data-expanded-footer=\"<div class="js-tweet-details-fixer tweet-details-fixer">
<div class="entities-media-container js-media-container" style="min-height:0px">
</div>
<div class="js-machine-translated-tweet-container"></div>
<div class="js-tweet-stats-container tweet-stats-container ">
</div>
<div class="client-and-actions">
<span class="metadata">
<span>11:00 PM - 25 Sep 2014</span>
· <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a>
</span>
</div>
</div>
\" data-you-follow=\"false\" data-you-block=\"false\">" ;
For a more advanced trick, you can move your entire HTML to a separate file, an HTML template if you will. Then read in the file contents via PHP and find/replace the variables or dynamic parts as you need. This may be beyond the scope of your question however.
the quotes inside the echo need to be escaped:
echo "<div class=\"stream-item-footer\">";
Escape the quotes with \
echo "<div class=\"content\">" ;
Works for me:
echo '<div class="content">';
echo '<div class="stream-item-header">';
echo '<a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" data-user-id="2665607941">
<img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/506790785572814848/vdj_UAuZ_bigger.jpeg" alt="">
<strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part> </strong>
<span></span><span class="username js-action-profile-name" data-aria-label-part><s></s><b> </b></span>
</a>';
echo '<small class="time">
<a class="tweet-timestamp js-permalink js-nav js-tooltip" title="11:00 PM - 25 Sep 2014" ><span class="_timestamp js-short-timestamp "
data-aria-label-part="last" data-time="1411711218" data-time-ms="1411711218000" data-long-form="true">Sep 25</span></a>
</small>';
echo '</div>';
echo '<p class="js-tweet-text tweet-text" lang="en" data-aria-label-part="0"> </p>';
echo '<div class="stream-item-footer">';
echo '<ul class="tweet-actions js-actions">';
echo '<li class="more-tweet-actions">';
echo '<div class="action-more-container">';
echo '<div class="dropdown">';
echo '<button type="button" class="btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip">';
echo '<span class="Icon Icon--delete"></span>';
echo '<b>Delete</b>';
echo '</button>';
echo '<div class="dropdown-menu">';
echo '<div class="dropdown-caret">';
echo '<div class="caret-outer"></div>';
echo '<div class="caret-inner"></div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
echo '</div>';
I'l write here my response dude, and hope i'm helping you. But there's nothing new, as Scott say, you missed a lot of double quote and IMHO you're a crazy boy doing it manually (in good sense).
Take you're JSON array and use the function i've linked in the comment in a way like this(hoping you have a similar situation, in other case is the same but you have to complex the code, maybe):
....
for($i=0; $i<sizeof($jsonarray); $i++){
echo addslashes($jsonarray[$i]);
}
....
In this way all of your code it's escaped, and if the error persist it means that's the problem is elsewhere
Related
I tried to convert my static html site pages with an online HTML to PHP converter. I changed all my extensions to .php and also the links. You can see the result of the conversion below. I run it with wamp but some stuff (images, css, text) of the page is shown in the browser, but most of the stuff is not, and instead I see
'; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo '';
echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo
''; echo '
everywhere.
What am I doing wrong?
<? php
echo '<!DOCTYPE html>';
echo '<html lang="en">';
echo '<head>';
echo '<meta charset="utf-8">';
echo '<meta http-equiv="X-UA-Compatible" content="IE=edge">';
echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
echo '<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->';
echo '<title>Title</title>';
echo '<!-- Bootstrap -->';
echo '<link href="css/bootstrap.min.css" rel="stylesheet">';
echo '<link rel="stylesheet" type="text/css" href="css/style.css">';
echo '<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->';
echo '<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->';
echo '<!--[if lt IE 9]>';
echo '<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>';
echo '<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>';
echo '<![endif]-->';
echo '</head>';
echo '<body>';
echo '<nav class="navbar navbar-default">';
echo '<div class="container">';
echo '<!-- Brand and toggle get grouped for better mobile display -->';
echo '<div class="navbar-header">';
echo '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">';
echo '<span class="sr-only">Toggle navigation</span>';
echo '<span class="icon-bar"></span>';
echo '<span class="icon-bar"></span>';
echo '<span class="icon-bar"></span>';
echo '</button>';
echo '<a class="navbar-brand" href="index.php"><img src="images/logo.png" class="img-responsive" width="150px"></a>';
echo '</div>';
echo '<!-- Collect the nav links, forms, and other content for toggling -->';
echo '<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">';
echo '<ul class="nav navbar-nav navbar-right">';
echo '<li class="active">HOME <span class="sr-only">(current)</span></li>';
echo '<li class="dropdown">';
echo 'text <span class="caret"></span>';
echo '<ul class="dropdown-menu">';
echo '<li>some link</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li>something</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li>something else</li>';
echo '</ul>';
echo '</li>';
echo '<li class="dropdown">';
echo 'something<span class="caret"></span>';
echo '<ul class="dropdown-menu">';
echo '<li>something</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li>some link</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li></> something</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li></>something</li>';
echo '</ul>';
echo '</li>';
echo '<li class="dropdown">something<span class="caret"></span>';
echo '<ul class="dropdown-menu">';
echo '<li>something</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li>something</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li></>something</li>';
echo '<li role="separator" class="divider"></li>';
echo '<li></>something</li>';
echo '</ul>';
echo '</li>';
echo '</ul>';
echo '</div><!-- /.navbar-collapse -->';
echo '</div><!-- /.container-->';
echo '</nav>';
echo '<!-- Carousal -->';
echo '<section class="jk-slider">';
echo '<div id="carousel-example" class="carousel slide" data-ride="carousel">';
echo '<ol class="carousel-indicators">';
echo '<li data-target="#carousel-example" data-slide-to="0" class="active"></li>';
echo '<li data-target="#carousel-example" data-slide-to="1"></li>';
echo '<li data-target="#carousel-example" data-slide-to="2"></li>';
echo '</ol>';
echo '<div class="carousel-inner">';
echo '<div class="item active">';
echo '<div class="hero">';
echo '<hgroup>';
echo '<p>something</p>';
echo '</hgroup>';
echo '</div>';
echo '<div class="overlay"></div>';
echo '<img src="images/1.jpg" class="img-responsive" width="100%">';
echo '</div>';
echo '<div class="item">';
echo '<div class="hero">';
echo '<hgroup>';
echo '<p>something</p>';
echo '</hgroup>';
echo '</div>';
echo '<div class="overlay"></div>';
echo '<img src="images/2.jpg" class="img-responsive" width="100%">';
echo '</div>';
echo '<div class="item">';
echo '<div class="hero">';
echo '<hgroup>';
echo '<p>something</p>';
echo '</hgroup>';
echo '</div>';
echo '<div class="overlay"></div>';
echo '<img src="images/3.jpg" />';
echo '</div>';
echo '</div>';
echo '<a class="left carousel-control" href="#carousel-example" data-slide="prev">';
echo '<span class="glyphicon glyphicon-chevron-left"></span>';
echo '</a>';
echo '<a class="right carousel-control" href="#carousel-example" data-slide="next">';
echo '<span class="glyphicon glyphicon-chevron-right"></span>';
echo '</a>';
echo '</div>';
echo '</section>';
echo '<!-- End Of carousal -->';
echo '<section>';
echo '<div class="container">';
echo '<div class="row">';
echo '<div class="col-md-12">';
echo ' ';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</section>';
echo '<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>';
echo '<!-- Include all compiled plugins (below), or include individual files as needed -->';
echo '<script src="js/bootstrap.min.js"></script>';
echo '<script type="text/javascript">';
echo '<script type="text/javascript">';
echo '$('.count').each(function () {';
echo '$(this).prop('Counter',0).animate({';
echo 'Counter: $(this).text()';
echo '}, {';
echo 'duration: 5000,';
echo 'easing: 'swing',';
echo 'step: function (now) {';
echo '$(this).text(Math.ceil(now));';
echo '}';
echo '});';
echo '});';
echo '</script>';
echo '</script>';
echo '</body>';
echo '</html>';
?>
Do you really need to make everything in echo? You can just simply put in normal html tag. And put <?php ?> wherever you need PHP code.
Regarding your JS, you are calling <script type='text/javascript'></script> twice.
I am currently writing a php website where I encountered a problem where the html link will not wrap div element properly. I have not found an answer to my problem yet, so I appreciate if someone can help me.
This is the php code I had written:
ECHO '<a target="_blank" href="' . $row["link"] . '">';
ECHO '<div class="header-box">';
ECHO '<div class="detail">';
ECHO '<p class="title">' . $row["title"] . '</p>';
$user_data = get_user_data($row["owner_id"]);
ECHO '<p class="author">This article is shared by <a class="user" href="./member.php?action=profile&id='.$user_data["id"].'">' . $user_data["firstname"] . " " . $user_data["lastname"] . '</a> on '.date("d F Y", strtotime($row["posted"])).'.</p>';
ECHO '</div>';
ECHO '<div class="good">';
ECHO '<p id="number">'.$row["good"].'</p>';
ECHO '<p id="icon"><i class="fa fa-thumbs-o-up"></i>Useful</p>';
ECHO '</div>';
ECHO '<div class="bad">';
ECHO '<p id="number">'.$row["bad"].'</p>';
ECHO '<p id="icon"><i class="fa fa-thumbs-o-down"></i>Not Useful</p>';
ECHO '</div>';
ECHO '</div>';
ECHO '</a>';
However, the outcome of the php code in browser are as followed:
<div class="header-box">
<a target="_blank" href="http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/"></a>
<div class="detail">
<a target="_blank" href="http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/">
<p class="title">5 Easy Steps to Optimize Your Images in Photoshop</p>
</a>
<p class="author"><a target="_blank" href="http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/">This article is shared by </a><a class="user" href="./member.php?action=profile&id=2">demoname demo</a> on 01 January 1970.</p>
</div>
<div class="good"><p id="number">1</p><p id="icon"><i class="fa fa-thumbs-o-up"></i>Useful</p></div>
<div class="bad"><p id="number">2333</p><p id="icon"><i class="fa fa-thumbs-o-down"></i>Not Useful</p>
</div></div>
I am getting a little bit frustrated trying to fix the problem because I can't figure out what is going wrong? The other part of code written with html link wrapping the div are working fine. Can anyone help me out? Thanks.
So the question was solved by Rick Hitchcock for pointing out my nesting issue.
So the answer is not nesting an tag within another tag.
After seeing the refactored code, I realized you have a link inside another link. The browser doesn't know what to do with this, so it closes them both down as small as they can.
Try using html inside your .php file, and just using tags where you have to use php. For Example:
close the php with a ?>, then open it each time you need it by wrapping your code in
<?php //php code goes here ?>
Here's your code refactored:
<a target="_blank" href="<?php echo $row["link"] ?>">
<div class="header-box">
<div class="detail">
<p class="title"><?php echo $row["title"] ?></p>
<?php $user_data = get_user_data($row["owner_id"]); ?>
<p class="author">This article is shared by <a class="user" href="./member.php?action=profile&id=<?php echo $user_data["id"] ?>"><?php echo $user_data["firstname"] ?> <?php echo $user_data["lastname"] ?></a> on <?php echo date("d F Y", strtotime($row["posted"])) ?></p>
</div>
<div class="good">
<p id="number"><?php echo $row["good"] ?></p>
<p id="icon"><i class="fa fa-thumbs-o-up"></i>Useful</p>
</div>
<div class="bad">
<p id="number"><?php echo $row["bad"] ?></p>
<p id="icon"><i class="fa fa-thumbs-o-down"></i>Not Useful</p>
</div>
</div>
</a>
Why are you using pure PHP for this? Its not necessary?
I have a question that bothers me for a long time. Lets say i have a code with several nested div's and span's. All these compose a square with an image inside.
echo '<div> <div> <div> <div> <span> <img src='.$image.'> </span></div></div></div>';
Only that this code has about 15 rows.
From what i know when echo-ing the results from db in that form i put in the loop the whole html code. It looks clumsy this way.
It is there a better practice ?
foreach ($query->result() as $row)
{
$row->address_link=strtolower($row->network);
echo '<li class="col-md-3 isotope-item '.$row->network.'">';
echo '<div class="portfolio-item img-thumbnail">';
echo '<table border="0"><tr>';
echo '<a href="order/'.$row->address_link.'/'.$row->value.'" class="thumb-info">';
echo '<img alt="" class="img-responsive" src="img/'.$row->address_link.'.png">';
echo '<span class="thumb-info-title">';
echo '<span class="thumb-info-inner">'.$row->value.' Euro</span>';
echo '</span>';
echo '<span class="thumb-info-action">';
echo '<span title="Universal" href="order/'.$row->address_link.'/'.$row->value.'" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>';
echo '</span>';
echo '</a>';
echo '</div>';
echo '</tr><tr>';
echo '<span class="thumb-info-type">'.$row->value*$row->rate.' Eur</span>';
echo '</tr></table>';
echo '</li>';
}
If you are new to php you can define a function for this:
function wrapImage($src){
return '<div> <div> <div> <div> <span> <img src='.$src.'> </span></div></div></div>';
}
And just use echo wrapImage($src) where you need it with different params.
EDIT: consider following way of presenting the data:
<?php
$query = 'select * from Unicorns';
foreach ($query->result() as $row){
$row->address_link=strtolower($row->network);
?>
<!-- html -->
<li class="col-md-3 isotope-item <?php echo $row->network; ?>">
<div class="portfolio-item img-thumbnail">
<table border="0"><tr>
<a href="order/<?php echo $row->address_link.'/'.$row->value; ?>" class="thumb-info">
<img alt="" class="img-responsive" src="img/'.$row->address_link.'.png">
<span class="thumb-info-title">
<span class="thumb-info-inner"><?php echo $row->value; ?> Euro</span>
</span>
<span class="thumb-info-action">
<span title="Universal" href="order/<?php echo $row->address_link.'/'.$row->value ?>" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>
</span>
</a>
</div>
</tr><tr>
<span class="thumb-info-type"><?php echo ($row->value*$row->rate); ?> Eur</span>
</tr></table>
</li>
<!-- /html -->
<?php } ?>
It is called spaghetti code .. and it is NOT the best practice but is better then your example in case the HTML is more then the PHP data.
first of all, dont use echo in loops (optimalization), store your output in variable and print it only once.
Repeated code can be stored inside function
function square($image){
return '<div> <div> <div> <div> <span> <img src='.$image.'> </span></div></div></div>';
}
$output = '';
while ($loop){
$output .= square($image);
}
echo $output
I'm trying to get my code to display multiple divs. But seems to only display one div correctly.
<?php
// database connection
//$result = mysqli_query($con,"SELECT * FROM test WHERE field5='Cohen'");
echo " <div id='1'>";
while($row = mysqli_fetch_array($result))
{
echo "<div class='tutorName'>" . $row['field1'] . "</div>";
echo "<div class='tutorPrice'>" . $row['field2'] . "</div>";
echo "<div class='tutorInstitution'>" . $row['field3'] . "</div>";
echo "<div class='tutorLocale'>" . $row['field4'] . "</div>";
echo "<div class='tutorPhone'>" . $row['field5'] . "</div>";
}
echo "</div>";
mysqli_close($con);
?>
I want the following to loop and over using the fields above (field1, feild2, etc):
<div id='' name='' class="column threecol">
<div class="course-preview premium-course">
<div class="course-image">
<img src="img.png" />
<div class="course-price">
<div class="corner-wrap">
<div class="corner"></div>
<div class="corner-background"></div>
</div>
<div class="price-text"><span class="amount">PerHour</span></div>
</div>
</div>
<div class="course-meta">
<header class="course-header">
<h5 class="nomargin">TutorName </h5>
<div class='gender'>Gender: </div>
<div class='price-range'>Price Range: </div>
<div class='institute'> Institute: </div>
</header>
</div>
</div>
</div>
Is your $result line really commented out in the real code? Or did you just add that comment for the example? If it's commented-out in the code you're testing, then that's probably the issue.
you want this? , 1 div wrap all content like table tr
$i=1;
while($row = mysqli_fetch_array($result))
{
echo " <div id='{$i}'>";
echo "<div class='tutorName'>" . $row['field1'] . "</div>";
echo "<div class='tutorPrice'>" . $row['field2'] . "</div>";
echo "<div class='tutorInstitution'>" . $row['field3'] . "</div>";
echo "<div class='tutorLocale'>" . $row['field4'] . "</div>";
echo "<div class='tutorPhone'>" . $row['field5'] . "</div>";
echo "</div>";
$i++;
}
I have this code (see below) that I'm having trouble echoing the variables out. On the 5th line is an echo, within that echo is a load of html (which I've escaped the quotation marks) and a load of variables. I can't get the variables to echo out within the main echo.
Update:
Also within there is an onclick that needs to be taken into account.
<?php
if(
in_array("Branding", get_field('categories')) && $grid_title == "Branding"
){
echo "
<div class=\"grid-box\" onclick=\"location.href='<?php echo get_page_link($post->ID) ?>';\" style=\"cursor: pointer;\">
<div class=\"phase-1\">
<img class=\"grid-image\" src=\"<?php echo $fields->thumb_image; ?>\" alt=\"<?php echo $fields->company_name; ?>\" height=\"152\" width=\"210\" />
<div class=\"grid-heading\">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
<div class=\"phase-2\">
<div class=\"grid-info\">
<h4><?php echo $fields->project_name; ?></h4>
<p><?php echo $fields->description; ?></p>
</div>
<div class=\"grid-heading-hover\">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
</div>
";
}
?>
You can't use echo within an echo, you just need to concatenate your strings properly like so:
$Content = "
<div class=\"grid-box\" onclick=\"location.href='" . get_page_link($post->ID). "';\" style=\"cursor: pointer;\">
<div class=\"phase-1\">
<img class=\"grid-image\" src=\"" . $fields->thumb_image . "\" alt=\"" . $fields->company_name. "\" height=\"152\" width=\"210\" />
<div class=\"grid-heading\">
<h2> " . $fields->company_name . "</h2>
<h3>" . implode(', ',get_field('categories')) . "</h3>
</div>
</div>
<div class=\"phase-2\">
<div class=\"grid-info\">
<h4>" . $fields->project_name . "</h4>
<p>" . $fields->description . "</p>
</div>
<div class=\"grid-heading-hover\">
<h2>" . $fields->company_name . "</h2>
<h3>" . implode(', ',get_field('categories')). "</h3>
</div>
</div>
</div>";
echo $Content;
You seem to have a little misunderstanding here.
In PHP you can output HTML either by
writing simple HTML outside <?php...?>, and possibly inserting some PHP code inside
using something like echo / print to output a PHP string which includes HTML
But you cannot mix up the two.
So this is not good:
echo "... src=\"<?php echo $fields->thumb_image; ?>\" ...";
Because this is a string, and in a string you can not open a <?php section. You should do something like this instead:
echo "... src=\"{$fields->thumb_image}\" ...";
which is one of the cool ways to insert PHP variables inside a string.
Something like this
echo " ... <?php ... ?> ...";
will not work.
Instead you could "break in and out" of php, like:
...
?>
<div class="grid-box" onclick="location.href='<?php echo get_page_link($post->ID) ?>';" style="cursor: pointer;">
<div class="phase-1"> ... <?php
Or use s/printf
printf(
'<div class="grid-box" onclick="location.href='%s';" style="cursor: pointer;">',
get_page_link($post->ID)
);
Or use string concatenation:
echo "html ...", get_page_link($post->ID), "some more html...";
Or use some kind of templating code.
Just close the php tag after the if and open it before the closing semi-colon.
if(
in_array("Branding", get_field('categories')) && $grid_title == "Branding"
){
?>
<div class="grid-box" onclick="location.href='<?php echo get_page_link($post->ID) ?>';" style="cursor: pointer;">
<div class="phase-1">
<img class="grid-image" src="<?php echo $fields->thumb_image; ?>" alt="<?php echo $fields->company_name; ?>" height="152" width="210" />
<div class="grid-heading">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4><?php echo $fields->project_name; ?></h4>
<p><?php echo $fields->description; ?></p>
</div>
<div class="grid-heading-hover">
<h2><?php echo $fields->company_name; ?></h2>
<h3><?php echo implode(', ',get_field('categories'));?></h3>
</div>
</div>
</div>
<?php
}
?>