I have packages on my store. The names, prices, description, etc.. are defined by variables. $name $price $small_desc
I've made a modal, and I'm trying to use those "variables" in it. This way when a player click for more informations, it will show a different package name on each modal.
The issue is, right now it's only displaying '.$name.'
Here you can visualize it by clicking on a package.
https://royalkingdom.net/store/?cat=1
I've tried inserting the modal in a php section but it didn't work.
I've also tried moving the location of my modal in my code and it didn't work.
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
'.$name.'
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
Modal Footer
</div>
</div>
</div>
if(mysqli_num_rows($result) > 0) {
while($post=mysqli_fetch_assoc($result)) {
$image=$post['imageurl'];
$name=$post['name'];
$text=$post['description'];
$price=$post['price'];
$small_desc = implode(' ', array_slice(explode(' ', $text), 0, 15))."";
$it = exif_imagetype($image);
echo'
<div class="package">
<div class="package-image">
<img src="'.(isset($image) && $image!="" && ($it == 1 || $it == 3 || $it == IMG_JPEG) ? $image : "img/404.jpg").'" class="item-img">
<span class="tooltiptext">Click for Details</span>
</div>
<div class="info">
<div class="text">
<div class="name">'.$name.'</div>
<div class="price">'.$price." " .$currency_simbol."USD".'</div>
<div class="buy">
Buy
</div>
</div>
</div>
</div> ';
I'm looking to have my "variables" display when I open a modal. This way each packages modal will have a different title, description, price, etc...
Related
Good day. In my Laravel App, I have a foreach loop where I display all products. I also have a quickview modal where users can view the products without loading a new page. Furthermore, I am using owlcarousel.js to display the products. Unfortunately, owl.carousel breaks the bootstrap modal unless the modal is placed outside the owl.carousel. But, since the products are loaded on the page dynamically, I can't access the ids of the modals outside the owl carousel div which encompasses the loop.
The $modal_id variable is only returning the last Id in the loop. So, please what is the way out?
How can I access the individual ids within the loop from on click from outside
The code is shown below
<div class="product owl-carousel">
<?php $modal_id = 0; ?>
#foreach($new_arrivals as $new_arrival)
<div class="pro">
<div class="pro-img">
<?php $modal_id = $new_arrival->id?>
<span class="sticker-new">new</span>
<div class="quick-view-pro">
<a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"
href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>
</div>
</div>
</div>
#endforeach
</div>
<!-- Modal is shown below !-->
<div class="product-view">
<div class="container">
<div class="modal fade" id="{{$modal_id}}">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
</div>
</div>
Try this code:
<div class="product owl-carousel">
<?php $modal_id = 0; ?>
<?php $modal_ids = []; ?>
#foreach($new_arrivals as $new_arrival)
<div class="pro">
<div class="pro-img">
<?php $modal_id = $new_arrival->id?>
<?php $modal_ids[] = $new_arrival->id ?>
<span class="sticker-new">new</span>
<div class="quick-view-pro">
<a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"
href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>
</div>
</div>
</div>
#endforeach
</div>
<!-- Modal is shown below !-->
#foreach($modal_ids as $item)
<div class="product-view">
<div class="container">
<div class="modal fade" id="{{$item}}">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
</div>
</div>
#endforeach
Hope help you.
I am trying shows pdf summary to user before download. There is pdf detail page to shows user pdf cover image, name, description, price, summary and buy now button.
Here's user wants to read summary of report then click on summary button and open model to read embed pdf. After read summary he wants to buy then will click on buy now button.
So, i want show only 2 pdf page on summary button. There is summary and buy now pdf report is same.
I tryed show summary of report, but there is show full pdf.
Here's my code below:-
public function raReportDetail($id){
$reportdetail = '';
$result = $this->connect()->query("SELECT * FROM wm_report WHERE id='$id'");
if($result->num_rows>0){
$row=$result->fetch_assoc();
$reportdetail ='
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="large-5 column">
<div class="xzoom-container">
<img class="img-fluid" src="cover_images/'.$row['cover_img'].'">
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="content-report-detail">
<div class="large-12 column">
<h3>'.$row['name'].'</h3>
</div>
<hr>
<div class="price-wrap">
<h3>Price: <i class="fa fa-rupee"></i> '.$row['price'].'/- </h3>
</div>
<div class="large-7 product-detail">
<p style="text-align: justify;">'.$row['description'].'</p>
<div class="ro-options">
<div class="no-row">
<div class="cart-btn-price">
<ul>
<li>
Summary </li>
<li>
Buy Now
</li>
</ul>
</div>
</div>
<div class="sku-code">
<span class="posted_in">Categary: '.$row['category'].'</span>
|
<span class="posted_in">SKU Code : '.$row['sku'].'</span>
</div>
</div>
</div>
</div>
</div>
<div id="Summary" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 style="display: contents;">Summary of '.$row['name'].'</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<embed src="report/'.$row['report'].'" frameborder="0" width="100%" height="400px">
</div>
</div>
</div>
</div>
';
}else{
$reportdetail = 'Something Went Wrong';
}
return $reportdetail;
}
If you have the ImageMagick library installed in your PHP, you can convert a specific page to jpg.
$im = new Imagick();
$im->setResolution(300,300);
// the [0] below indicates the first page only.
$im->readImage('document.pdf[0]');
$im->setImageFormat('jpeg');
$im->writeImage('thumb.jpg');
$im->clear();
$im->destroy();
You'd probably want to do this for the two pages you wanted to use as a preview.
See also the ImageMagick::readImage documents. The documentation itself isn't great, but the user comments are pretty good. You should be able to $im->setImageFormat('pdf'); as well.
I stole this from Convert PDF to JPEG with PHP and ImageMagick
I would go with FPDI from setasign.
It is simple to use and easy to install. I currently use it in one of my application and it works very good.
https://www.setasign.com/products/fpdi/demos/simple-demo/
The value of the for loop is stuck at 1.
I am trying to run this loop to print the name of the event at the top of the modal box. But the same name appears each time.
I've given continue statement and tried too. Yet the value of $i is stuck at 1
It would be of great help if you could find a solution for this
Thanks in advance.
<?php $noofevents = DB::table('events')->count(); ?>
#for($i = 1; $i <= $noofevents; $i++)
<?php $current_event_name = DB::table('events')->where('id',$i)->value('Event_Name'); ?>
<div id="sponsor-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="display-4" style = "text-align : center; font-size : 30px;">Sponsors for {{$current_event_name}}</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-content">
<img src ="{{asset('images/Sponsors/paytm.jpg')}}" alt ="" width = "200px" class = "mx-auto d-block">
</div>
<div class="card-footer">
<p class = "text-center"></p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endfor
You need to differentiate modal box with different ids
Please Use this part in your controller and pass it to your blade view using compact.
<?php $noofevents = DB::table('events')->count(); ?>
Use this part in blade :
#for($i = 1; $i <= $noofevents; $i++)
<?php $current_event_name = DB::table('events')->where('id',$i)->value('Event_Name'); ?>
<div id="sponsor-modal{{ $i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="display-4" style = "text-align : center; font-size : 30px;">Sponsors for {{$current_event_name}}</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-content">
<img src ="{{asset('images/Sponsors/paytm.jpg')}}" alt ="" width = "200px" class = "mx-auto d-block">
</div>
<div class="card-footer">
<p class = "text-center"></p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endfor
So now you have different modal boxes for total noofevents. you need to call this modal boxes with ids appended by $i.
I have created multiple objects using data retrieved from a MySQL database. Each object contains a clickable image and 2 headers. I can click an image which is connected to a modal but it only gives back 1 modal with the information from the very last object no matter which image is clicked.
Please help.
The following part creates the objects and works.
<div class="row kprod">
<?php
$get_kits = "select * from kitchens ORDER BY k_brand";
$run_kits = mysqli_query($con, $get_kits);
while($row_slides=mysqli_fetch_array($run_kits)){
$kit_brand = $row_slides['k_brand'];
$kit_name = $row_slides['k_name'];
$kit_img = $row_slides['k_img'];
$kit_desc = $row_slides['k_description'];
$kit_id = $row_slides['k_id'];
echo"
<div class='col-12 col-xs-12 col-md-6 col-lg-4 kpindi'>
<div class='row'>
<div class='col imgcol'>
<img class='img-fluid' src='assets/img/$kit_img' href='#portfolio-modal-1' data-toggle='modal'>
</div>
</div>
<div class='row'>
<div class='col'>
<div>
<h5 class='kprodtext' style='font-family:Adamina, serif;'>$kit_brand</h5>
<h6 class='kprodtext' style='font-family:Adamina, serif;'><em>$kit_name</em></h6>
</div>
</div>
</div>
</div>";}
?>
</div>
The next part is the modal I want to pass the data too.
<div id="portfolio-modal-1" class="modal text-center" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span></button>
</div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="kprodtext" style="font-family:Adamina, serif;">
Brand</h2>
<hr class="star-dark mb-5">
<img src="assets/img/image.jpg" class="img-fluid mb-5">
<h6 class="kprodtext mb-5" style="font-family:Adamina, serif;">
<i>Name</i>
</h6>
<p class="kprodtext" style="font-family:Adamina, serif;">
Desc
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to assign different ids to your modals, otherwise only one will be opened.
I am facing issue while trying to switch between two modal windows. Requesting you guidance on the same
Objective
In my page, i have a link. When i click that link my modal 1 opens. This model 1 has a link which when i click opens 2.
Code
Sample page - Modal window 1 - Contents below are part of Modal 1
<div class="row">
<div class="col-md-12">
<?php
if($_SESSION['role'] == "Business")
{ ?>
<div class="form-group" id="buscomments">
View Business Comments
</div>
</div>
<div class="col-md-12">
<?php }else { ?>
<div class="form-group" id="othcomments">
View Other Comments
</div>
<?php } ?>
</div>
Now in the same HTML File - I have two other models
<div class="modal fade text-center" id="busscomments">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<div class="modal fade text-center" id="othcomments">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
Modal content of these modals are available in busscomments.php and
othcomments.php respectively
Output :
My Modal 1 opens correctly but when i click busscomments.php link which should ideally open modal 2, does not happen. i could see the fade effect but no modal is displayed
What i referred :
I refered the below links and try to modify my code but no luck
Stackoverflow link 1
Not sure What i am missing. I understand that traditional use of Jquery to do the same should be ideal. But any help in this regard would be helpful.
Please let me know if more information is required from my end.
Thanks
UPDATE :
Othcomments.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Other Comments</h4>
</div>
<div class="modal-body">
<div class ="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">Other Comments</th>
</tr>
</thead>
<?php
while(mysqli_stmt_fetch($statement))
{
$response = array("oth"=>$othcomments);
?>
<tbody>
<tr>
<td><?php echo $response['oth']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
</div>
MY BAD.. I absolutely messed up calling the modal ID's. I interchanged the Id's and there was no result from the database. I fixed the issue. Thank you