Topic: carousel-multi-item problem
When using PHP echo command to place some HTML codes, which includes the button or the a elements, into the carousel-multi-item component, the button or the a elements won't work anymore. Can you help me to solve this problem? Thanks!
Start your code here (profile.php)<?php include("loggedInStatus.php"); if (!$loggedInStatus) { header("location: index.php"); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>神方電腦城</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- custom styles --> <link href="css/style.css" rel="stylesheet"> </head> <body> <!-- NEW PRODUCTS SECTION --> <section id="new-products" style="margin-top: 100px"> <!--Carousel Wrapper--> <div id="multi-item-example" class="container carousel slide carousel-multi-item" data-ride="carousel"> <h3 class="indigo-text font-weight-bold">新產品</h3> <!--Indicators--> <!-- <ol class="carousel-indicators"> <li data-target="#multi-item-example" data-slide-to="0" class="active"></li> <li data-target="#multi-item-example" data-slide-to="1"></li> <li data-target="#multi-item-example" data-slide-to="2"></li> </ol> --> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox" id="get_newProduct"> </div> <!--/.Slides--> <!--Controls--> <div class="controls-top"> <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> </section> <!-- NEW PRODUCTS SECTION --> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <!-- main JavaScript --> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html> (getNewTopProductAction.php)
function productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title) {
$price = number_format($pro_price);
if ($pro_discount != 0) {
$discountPrice = number_format($pro_price * (100 - $pro_discount) * 0.01);
echo "
<div class='col-md-4'>
<div class='card mb-2'>
<img class='card-img-top' src='./img/$pro_image'>
<div class='card-img-overlay'>
<p class='card-text text-center pull-right discount'><span>-$pro_discount%</span></p>
</div>
<div class='card-body text-center'>
<p class='card-text'>$cat_title</p>
<h5 class='card-title'><a class='btn red-text btn-lg font-weight-bold' href='#'>$pro_title</a></h5>
<h5 class='card-title'>$$discountPrice <del class='small blue-text'>$$price</del></h5>
<div class='product-rating'>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
</div>
<button class='btn btn-primary'><i class='fa fa-shopping-cart'></i> 放入購物車</button>
</div>
</div>
</div>
";
} else {
echo "
<div class='col-md-4'>
<div class='card mb-2'>
<img class='card-img-top' src='./img/$pro_image'>
<div class='card-body text-center'>
<p class='card-text'>$cat_title</p>
<h5 class='card-title'><a class='btn red-text btn-lg font-weight-bold' href='#'>$pro_title</a></h5>
<h5 class='card-title'>$$price</h5>
<div class='product-rating'>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
</div>
<button class='btn btn-primary'><i class='fa fa-shopping-cart'></i> 放入購物車</button>
</div>
</div>
</div>
";
}
}
// fetch the products records
if(isset($_POST["newProduct"])){
$where = array("product_newest"=>1);
$result = $dataOperation->select_record("products", $where);
if($result->num_rows > 0) {
$num = 1;
while($row_result = $result->fetch_assoc()) {
$pro_id = $row_result["product_id"];
$pro_cat = $row_result["product_cat"];
$pro_brand = $row_result["product_brand"];
$pro_title = $row_result["product_title"];
$pro_price = $row_result["product_price"];
$pro_image = $row_result["product_image"];
$pro_discount = $row_result["product_discount"];
$where1 = array("cat_id"=>$pro_cat);
$result1 = $dataOperation->select_record("categories", $where1);
$row_result1 = $result1->fetch_assoc();
$cat_title = $row_result1["cat_title"];
if ($num > 3) {
switch ($num % 3) {
case '1':
echo "
<div class='carousel-item'>
";
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
break;
case '2':
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
break;
case '0':
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
echo "
</div>
";
break;
default:
break;
}
} else {
switch ($num % 3) {
case '1':
echo "
<div class='carousel-item active'>
";
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
break;
case '2':
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
break;
case '0':
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
echo "
</div>
";
break;
default:
break;
}
}
$num += 1;
}
}
}
wtj123 pro commented 6 years ago
I found if the is not been added in the card component, the button and the a elements can work perfectly. I don't know why?wtj123 pro commented 6 years ago
card-img-overlayBartłomiej Malanowski staff commented 6 years ago
could you please show us live demo of this issue?FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Bartłomiej Malanowski staff commented 6 years ago
Yes, we can. Could you please share your code with us?