I want to fill a JavaScript array with results from my PHP query to database. I have initially filled it with variables but i wanna get those from database . I am putting the query result the 'liste' variable, I don't know if I can use foreach to fill it, any help would be appreciated thanks.
PHP code:
<?php
$sql="SELECT * FROM produits WHERE cat='Interieur'";
$req=$db->prepare($sql);
$req->execute();
$liste=$req->fetchAll(PDO::FETCH_OBJ);
?>
<?php foreach ($liste as $product): ?> ````
Javascript code:
var arrayTitle = ["Chaise Skandinave", "Chaise2", "Chaise3","Table1","Table2","Table3","Fauteuil1","Fauteuil2","Fauteuil3"];
var arrayImage = ["images/ChaiseSkandinave.jpg", "images/Chaise2.jpg", "images/Chaise3.jpg","images/Table1.jpg","images/Table2.jpg","images/Table3.jpg","images/Fauteuil1.jpg","images/Fauteuil2.jpg","images/Fauteuil3.jpg"];
var arrayDesc = ["a", "b", "c","d","e","f","g","h","i"];
var modal = document.getElementById('myModal');
function openModal(i)
{
modal.style.display = "block";
$(document).ready(function()
{
document.getElementsByClassName("modalimg")[0].src = arrayImage[i];
document.getElementsByClassName("modaltitle")[0].innerHTML = arrayTitle[i];
document.getElementsByClassName("modaldesc")[0].innerHTML = arrayDesc[i];
});
}
HTML CODE:
<div class="container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<span>Meubles Interieurs</span>
<h2>Produits</h2>
<p></p>
</div>
</div>
<div class="row" id="row1">
</div>
<?php
$sql="SELECT * FROM produits WHERE cat='Interieur'";
$req=$db->prepare($sql);
$req->execute();
$liste=$req->fetchAll(PDO::FETCH_OBJ);
?>
<?php foreach ($liste as $product): ?>
<div class="col-md-4 text-center animate-box">
<div class="product">
<div class="product-grid" style="background-image:url(images/<?php echo $product->num; ?>.jpg)">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3><?php echo $product->nom; ?> </h3>
<span class="price"><?php echo number_format($product->prix,2,',',''); ?> TND</span>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
Related
is it possible to work in pagination if there are no tables or do I have to change my output style entirely.
<div class="row">
<?php if ($company != null): ?>
<?php foreach ($company as $row): ?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="job-grid">
<div class="job-title-sec">
<div class="thumb"><?php echo $row['logo']; ?></div>
<div class="c-logo"> <img src="http://placehold.it/235x115" alt="" /> </div>
<div><h3><strong><?php echo $row['employerName']; ?></strong></h3></div>
<div><h3><strong>SECTOR: </strong><?php echo $row['sectorName']; ?></h3></div>
<div class="job-lctn"><i class="fa fa-map-marker"></i><?php echo $row['stateName']; ?></div>
</div>
<div class=""><i class="fa fa-external-link"></i>Website</div>
<div><i class="fa fa-external-link"></i>About</div>
</div><!-- JOB Grid -->
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if($this->session->flashdata('none') != null) {
echo '<div class="alert alert-danger">';
echo $this->session->flashdata('none');
echo '</div>';
} ?>
<?php endif; ?>
</div>
There are a large number of results for the foreach and I want to split it using pagination. Thanks
I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?
The Code Below is when you click a certain div. the hidden item will show up and change the css to display block. and i have multiple menu or option what im trying to do is when you click a certein div. and you click another one. the first one close automatically this is the indiciator <?php the_title(); ?> or id of the div.
Html
<a id="mylink" class="career-en blue" href="javascript:showhide('<?php the_title(); ?>')">
<div class="Career-entry" >
<div class="row" >
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'position' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'brandsubsidiary' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'work_location' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'date_posted' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'aplication_dead_line_' ); ?>
</div>
</div>
</div>
</a>
<div class="career-content" id="<?php the_title(); ?>" style="display:none;">
<div class="row">
<div class="col-md-6">
<h6> <i> Position Summary: </i></h6>
<?php the_field( 'position_summary' ); ?>
</div>
<div class="col-md-6">
<h6> <i> Requirments: </i></h6>
<?php if( have_rows('requirments') ):?>
<?php while ( have_rows('requirments') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h6> <i>Major Duties & Responsibilities: </i></h6>
<?php if( have_rows('major') ):?>
<?php while ( have_rows('major') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
<div class="col-md-6">
<h6> <i> Submit yoru resume: </i></h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 col-sm-12">
<?php echo do_shortcode( '[contact-form-7 id="112" title="Career"]' ); ?>
</div>
</div>
</div>
</div>
<hr class="career-hr">
<?php if ($x == 2) { echo '<div class="blog_box clear"></div>'; $x = -1; } $x++; ?>
<?php endwhile; ?>
</div>
Css
.red{
background-color: #e7f2ca;
display: block;
}
JS
<script>
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<script>
$('a#mylink').click(function() {
$(this).toggleClass('red blue');
});
</script>
Add class ex. 'autohide' to all divs you want to autohide. Then:
$('.autohide').click(function(){
$('.autohide').hide();
$(this).show();
})
Just tweak your code a bit, just use a variable to keep track of currently open section.
var current_open_section;
function showhide(id){
//hide open section first
if(current_open_section){
current_open_section.style.display = 'none';
}
//let the selected section be current open section
current_open_section = document.getElementById(id);
//show current open section
current_open_section.style.display = 'block';
}
This is my website
You will see list links on the left side. What I want to do with this is I want each of link display image and text I add with them. I am using Advanced Custom fields (ACF) plugin and now from there I will add images for each link.
now what I want to do this when I click on Focus 19> it will display focus 19 image on the same page. When I click on Austin 20> it will load image for austin on the same page.
here is my page template
<?php
/*
Template Name: Home Design
*/
$design_name = get_field ('design_name');
$design_name_2 = get_field ('design_name_2');
$design_name_3 = get_field ('design_name_3');
$design_name_4 = get_field ('design_name_4');
$design_name_5 = get_field ('design_name_5');
$design_name_6 = get_field ('design_name_6');
$design_name_7 = get_field ('design_name_7');
$design_name_8 = get_field ('design_name_8');
$design_name_9 = get_field ('design_name_9');
$design_name_10 = get_field ('design_name_10');
$design_name_11 = get_field ('design_name_11');
$design_name_12 = get_field ('design_name_12');
$design_name_13 = get_field ('design_name_13');
$design_name_14 = get_field ('design_name_14');
$design_name_15 = get_field ('design_name_15');
$design_name_16 = get_field ('design_name_16');
$design_name_17 = get_field ('design_name_17');
$design_name_18 = get_field ('design_name_18');
$design_name_19 = get_field ('design_name_19');
$design_name_20 = get_field ('design_name_20');
$design_name_21 = get_field ('design_name_21');
get_header(); ?>
<section id="homedesign">
<div class="container">
<h1>Home Designs</h1>
<hr style="background:#6d9aa0;">
<h2>Single Storey Home Design</h2>
<div class="row">
<div class="col-md-3 borderright">
<ul class="homedesign">
<?php echo "$design_name";?>
<?php echo "$design_name_2";?>
<?php echo "$design_name_3";?>
<?php echo "$design_name_4";?>
<?php echo "$design_name_5";?>
<?php echo "$design_name_6";?>
<?php echo "$design_name_7";?>
<?php echo "$design_name_8";?>
<?php echo "$design_name_9";?>
<?php echo "$design_name_10";?>
<?php echo "$design_name_11";?>
<?php echo "$design_name_12";?>
<?php echo "$design_name_13";?>
<?php echo "$design_name_14";?>
<?php echo "$design_name_15";?>
<?php echo "$design_name_16";?>
<?php echo "$design_name_17";?>
<?php echo "$design_name_18";?>
<?php echo "$design_name_19";?>
<?php echo "$design_name_20";?>
<?php echo "$design_name_21";?>
</ul>
<h2>Dobule Storey Home Design</h2>
<ul class="homedesign">
</ul>
</div>
<div class="col-sm-9">
<p class="homedesign-title">The Amazon 35</p>
<div class="col-md-12 white-bg">
<div class="col-md-3">
<ul id="houselist" class="homedesign2">
<li> Total Area <br> 355.16sqm</li>
<li> Overall Width <br> 12.83 </li>
<li> Optional Alfresco <br> 24.81 sqm </li>
</ul>
</div>
<div class="col-md-9" style="padding:0;">
<img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/carness.jpg" alt="Thumb">
</div>
</div>
<div class="col-md-3">
<img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
<div class="col-md-12 turq-bg">text goes here</div>
</div>
<div class="col-md-3">
<img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
<div class="col-md-12 turq-bg">text goes here</div>
</div>
<div class="col-md-3">
<img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
<div class="col-md-12 turq-bg">text goes here</div>
</div>
<div class="col-md-3">
<img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
<div class="col-md-12 turq-bg">text goes here</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
How can I access seemore button to all next seemore buttons? It only works for first one. How can I make it -show dynamic ids so it will work for all seemore buttons?
javascript:
<script type="text/javascript">
function changeClass() {
if (content.classList.contains("show")) {
btn.innerHTML = "Show Less";
} else {
btn.innerHTML = "Show More";
}
}
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
php:
<?php
$id1 = $_SESSION['id'];
$sql = "select fname from User_registration where U_id=$id1";
$result = mysql_query($sql ,$conn);
$row = mysql_fetch_array($result);
$sql1 = "select * from Job_post where u_id=$id1";
$result1 = mysql_query($sql1,$conn);
$row1 = mysql_fetch_array($result1);
$c = $row1[job_category];
?>
<div class="job" style="background-color:#E2F5D0;width:100%;">
<div class="container" id="jobcontainer">
<div class="row" id="jobrow">
<div class="col-sm-12" id="jobcol">
<h1 class="jobh"> Ciao <?php echo $row['fname'];?> </h1>
<h3 class="jobh3">This is job_posting page. with description and budget
as per categories and sub categories. profile details are show here.
This is job_posting page. with description and budget
as per categories and sub categories. profile details are show here. </h3>
</div>
</div>
<div class="row" id="jobrow1">
<div class="col-sm-8">
Description
</div>
<div class="col-sm-4">
Budget
</div>
</div>
<?php
$sql2 = "select * from Job_post where job_category='$c'";
$resultr = mysql_query($sql2,$conn);
$index = 0;
while($row4 = mysql_fetch_array($resultr)) { ?>
<div class="row" id="jobrow2">
<div class="col-sm-8">
<h3 class="jobh33"> <?php echo $row4[project_name]; ?> </h3>
<h3 class="jobh3">
<?php $row2 = $row4['project_description'];
echo substr($row2, 0, 250);?>
<br>
See more. </h3>
<div id="example" class="more">
<h3><?php echo substr($row2,250);?></h3>
<h3>See less.</h3>
</div>
<br>
<div class="col-sm-4">
<?php echo $row4['job_category'];?>:
<div class="jobh3">
<?php echo $row4['job_sub_category'];?>
</div>
</div>
<div class="col-sm-4">
Location:
<div class="jobh3">
<?php echo $row4['job_location'];?>
</div>
</div>
</div>
<div class="col-sm-4">
<h3 > <?php echo $row4['budget'];?> </h3>
<button type="button" class="btn btn-success"> Fai I'Offeria </button>
</div>
</div>
<?php }?>
</div>
</div>
You will want to use classes to do this. I am using jQuery because I don't know how to do this sort of thing with raw javascript:
<div class="group">
<span class="name">Joe</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about joe
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<div class="group">
<span class="name">Frank</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about frank
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<div class="group">
<span class="name">Jitendra</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about this OP
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
function ClickParent(ClickElem,ElemFind)
{
$("."+ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("."+ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
</script>
DEMO:
http://jsfiddle.net/qfqbmw2h/