i have a view which displays data from database and my modal should pop up when clicked and would display a bigger picture of what is shown in the view, nothing happens when i click my the image any ideas how i could make this work?
controller:
public function view_products() {
$id = $this->uri->segment(3);
$data['products'] = $this->user->viewprod($id);
$this->load->view('product_viewpage', $data);
}
my model:
public function viewprod($id) {
$query = $this->db->query("SELECT * from product_table WHERE product_category = '$id'");
$r = $query->result();
return $r;
}
my view:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<!-- Bootstrap -->
<link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<?php echo link_tag('css/Bootstrap.min.css')?>
<?php echo link_tag('css/bootstrap-theme.min.css')?>
<?php echo link_tag('css/STYLE01.css')?>
<?php echo link_tag('css/NAVIGATION.css')?>
<?php echo link_tag('assets/ICON.png')?>
<style type="text/css">
::-webkit-scrollbar-thumb:vertical {
background-color: #EF426F; /*color of main scrollbar*/
height: 10px; /*height of scrollbar*/
}
::-webkit-scrollbar {
height: 0px;
width: 4px; /*width of the slider*/
background-color: #FFFFFF; /*color of the slider*/
}
</style>
</head>
<body>
<center>
<image src="<?php echo base_url() . 'assets/LOGO-(WHITE).png' ?> " width="890" height="220">
</center>
<div class="container_products">
<div class="row">
<center><br><br><br>
<?php
foreach ($products as $alls) {
$id = $alls->product_id;
$name = $alls->product_name; $description = $alls->product_description;
$price = $alls->product_price;
$picture = $alls->img_name. $alls->ext;
?>
<div class="col-md-4"><a data-toggle="modal" data-target="#myModal">
<img class = "bread_img" id = "bread_img_<?php echo $id;?>" src="<?php echo base_url() . 'assets/' . $picture; ?>" onMouseOut="this.src = '<?php echo base_url() . 'assets/' . $picture; ?>'" width="230" height="192"></a>
<input type ="hidden" id = "hidden_name_<?php echo $id;?>" value = "<?php echo $name;?>" >
<input type ="hidden" id = "hidden_desc_<?php echo $id;?>" value = "<?php echo $description;?>" >
<br><br> <h5 class="names" id="pname" src="<?php echo $name; ?>"><?php echo $name; ?></h5>₱ <?php echo $price; ?>
<br><br><br><br><br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-l">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> <?php echo $name; ?></h4>
</div>
<div class="modal-body">
<img src="<?php echo base_url() . 'assets/' . $picture; ?>" width="500" height="417" id = "modal_img">
<br><br><h6 class="modal-title" id="myModalLabels"> <?php echo $description; ?></h6><br><br>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).on('mouseover','.bread_img',function(){
window.src_img = $(this).attr('src');
id = $(this).attr('id').replace('bread_img_','');
window.name = $('#hidden_name_'+id).val();
window.text = $('#hidden_desc_'+id).val();
$('#myModalLabel').text(name);
$('#myModalLabels').text(text);
$(this).attr('src','assets/VIEW.png');
});
$(document.body).on('click','.bread_img', '.names',function(){
$('#modal_img').attr('src',src_img);
});
</script>
please try this code
you forgot to load model in your controller function
public function view_products() {
$this->load->model('user');
$id = $this->uri->segment(3);
$data['products'] = $this->user->viewprod($id);
$this->load->view('product_viewpage', $data);
}
Related
Can anyone help with passing json string to modal in bootstrap 5. Trying to pass each row to the modal. This is to edit forum post so the data can be pretty long
On line 43, if i replace $json for $row['id'] it works perfect but for some reason I cant pass the json string.
At the minute I just get error string 19 and it just shows the first bracket
Any help would be very appreciated, the plan is to pass string then in modal decode and use
<?php
define("DB_HOST", "localhost");
define("DB_USER", "dbusername");
define("DB_PASS", "dbpassword");
define("DB_NAME", "dbname");
define('DB_CHAR', 'utf8mb4');
$opt = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
);
$dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=' . DB_CHAR;
try {
$pdo = new PDO($dsn, DB_USER, DB_PASS, $opt);
} catch (\Exception $e) {
die(response('The Database Details Are Incorrect'));
}
$stmt = $pdo->prepare("SELECT * FROM shoutbox");
$stmt->execute();
$results = $stmt->fetchAll(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- new item (data-id=0) -->
<button data-id=0 onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">add new </button>
<!-- loop through data -->
<?php foreach ($results as $row) : ?>
<!-- make json -->
<?php $json = json_encode($row); ?>
<!-- replacing $json with $row['id'] works -->
<button data-id="<?php echo $json ?>" onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click row </button>
<br>
<?php endforeach; ?>
<!-- the modal -->
<div class="modal fade" id="showmodal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" style="max-width:700px;">
<div class="modal-content">
<?php
$dataid = '<span id="dataid"/>';
echo $dataid;
?>
</div>
</div>
</div>
</body>
</html>
I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.
My output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?
Is there something wrong with my script? Do I need to add something to modal-body?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$.ajax({ type: "GET",
url: 'search.php',
success: function(data){ debugger $('#mymodal').modal('show');
$('#mymodal:visible .modal-content .modal-body').html(e); } });
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
search.php
<?php
include_once('db.php'); //Connect to database
if(isset($_REQUEST['q'])){
$q = $_REQUEST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%".$q."%' OR `yupikWord` LIKE '%".$q."%') or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
use these code of search.php
<?php
include_once('db.php'); //Connect to database
if(isset($_REQUEST['q']))
{
$q = $_REQUEST['q'];
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%".$q."%' OR `yupikWord` LIKE '%".$q."%'") or die(mysqli_error($conn));
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
I want to move document.getElementById("b") checked in a loop.Is it possible? How can I make it happen?
<img class="img-responsive pic" id="picture" src="images/step1.png">
<?php
//get rows query
$query = $db->query("SELECT * FROM `template_design` WHERE `panel` = 'front'");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$im_id = $row['id'];
$images = "images/" .$row['image']. "";
?>
<div class="col-md-4 col-sm-4 wel-grid wow fadeInDown">
<div class="wel11">
<input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="front" onClick="changeSrc(<?php echo $im_id; ?>)">
<label for="<?php echo 'radio_'.$im_id; ?>" style="font-size:12px; cursor: pointer;">
<img id="<?php echo 'picture_'.$im_id; ?>" style="border: 1px solid #ccc;" class="img-responsive" src="<?php echo $images; ?>"></label>
</div>
</div>
<?php } } ?>
<script type="text/javascript">
function changeSrc(id) {
if (document.getElementById("radio_"+id).checked) {
document.getElementById("picture_"+id).src = "images/Ppicture3.png";
}
}
</script>
I want to repeat it in a loop ,as fradio0 i.e $front will increment, JavaScript also repeat in a loop to match each.
You can pass parameters with your id for example:
<input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="<?php echo $fname; ?>" onClick="changeSrc(<?php echo $im_id; ?>)">
and use it on script like
<script type="text/javascript">
function changeSrc(id) {
if (document.getElementById("radio_"+id).checked) {
}
}
</script>
Please try this. Pass radio id as attr id & save each images by respective id's, followed by respective id.png. Also remove onclick function from your html code.
<script type="text/javascript">
$("input:radio[name=front]").click(function() {
var id= $(this).attr('id');
document.getElementById("picture").src = "panel/front/" + id + ".png";
});
</script>
Although I am quickly learning JS I have a problem i can't figure out. I have a modal which is in a <div> and a <div> that contains an image and product name, when I hover over this <div> I get a hover icon which is an <a>. When I click on the <div> with the image in it a modal pops up - this works brilliantly. But When I click the <a> the modal pops up and then you are taken to the link. I don't want the modal to appear when you click the overlaying <a>.
Here's my HTML for the Modal:
<div class="modal myModal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<?php echo $this->stripTags($_product->getName(), null, true) ?>
<div class="popup-image-container">
<img id="popup-image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?>" srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?> 1x, <?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize * 2); ?> 2x"
width="75%" height="75%"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
/></div>
<div class="popup-buttons ">
<button type="button" title="<?php echo $this->__('View Detail') ?>" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" onclick="setLocation('<?php echo $_product->getProductUrl() ?>')"><span><span><?php echo $this->__('More Detail') ?></span></span></button>
<button type="button" title="<?php echo $this->__('Visit Store') ?>" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check"onclick="window.open('<?php echo $_helper->productAttribute($_product, $_product->getAdvertiserBuyLink(), 'advertiser_buy_link') ?>', '_blank');"<span><span><?php echo $this->__('Goto Store') ?></span></span></button></p>
</div>
</div>
</div>
and for the Product
<div class="prolabel-wrapper">
<?php echo Mage::helper('prolabels')->getLabel($_product, 'category'); ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?>"
srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?> 1x, <?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize * 2); ?> 2x"
width="<?php echo $_gridImageSize ?>" height="<?php echo $_gridImageSize ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
/>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li class="li-wishlist"><a rel="nofollow" id="wishlist" href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>" onclick="return false;"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li class="li-compare"><a rel="nofollow" href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><i class="fa fa-plus" aria-hidden="true"></i></a></li>
<?php endif; ?>
</ul>
</div>
Here is the JS that I created:
var modals = document.getElementsByClassName("modal");
// Get the button that opens the modal
var btns = document.getElementsByClassName("prolabel-wrapper");
var spans=document.getElementsByClassName("close");
var wishlist=document.getElementsByClassName("link-wishlist");
var showPopup = true;
// Get the modal
window.onload = function(){
for(let i=0;i<wishlist.length;i++) {
wishlist[i].onclick = function() {
var showPopup = false;
alert("Here - showPopup is " + showPopup);
modals[i].style.display = "none";
return false;
}
}
alert("Here2 - showPopup is " + showPopup);
if (showPopup){
alert ("Still getting called" + showPopup);
for(let i=0;i<btns.length && showPopup;i++) {
btns[i].onclick = function() {
modals[i].style.display = "block";
}
}
for(let i=0;i<spans.length && showPopup;i++){
spans[i].onclick = function() {
modals[i].style.display = "none";
}
}
}}
I can get the alert("Here - showPopup is " + showPopup); to popup and then the return false cancels out the link, but the modal still show, please can anyone point me in the right direction?
Thanks
Chris
Inside the first for loop you are trying to set the global variable showPopup to false but, instead, you are declaring a new one.
Try replacing:
var showPopup = false;
by:
showPopup = false;
I have the below code for User Rating & Comment system which is working fine, but user can post and rate again and again.
I want that if a user posted comment already he/she should not see the comment box but a message that " You have already posted comment on this page".
I tried by using the query in the Add-Comment.php but did not worked.
Need help to solve this issue. Thanks
URL: index.php?id=1
Add-Comment.php
<?php
session_start();
$ipaddress = $_SERVER["REMOTE_ADDR"];
$users = session_id();
if(!empty($_POST)){
extract($_POST);
if($_POST['act'] == 'add-com'):
$comment = htmlentities($comment);
$rating = htmlentities($rating);
// Connect to the database
require_once '../../inc/db.php';
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/" . "?d=" . $default . "&s=" . $size;
$sql = "INSERT INTO rest_rating (rate, comment, sr_id, ip, user)
VALUES ('$rating', '$comment', '$id_post', '$ipaddress', '$users')";
$sqls = "select user from rest_rating
where sr_id = '$id_post' and user ='$users' )";
$tt = $db->query($sqls);
if ( $tt['user'] == $users ) {
echo '<font size="3" color="red">You Have Already Rated For This Restaurant</font>';
}elseif ( $db->query($sql)==true) {
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" alt="" />
<div class="thecom">
<!--<h5><?php echo $name; ?></h5>-->
<b>Rating : </b><?php echo $rating; ?>
<span class="com-dt"><?php echo date('d-m-Y H:i'); ?></span>
<br/>
<p><?php echo $comment; ?></p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<?php endif; ?>
<?php } ?>
index.php
<?php
require_once '../../inc/db.php';
$id=$_GET['id'];
?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/example.css">
<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
<script src="js/star-rating.js" type="text/javascript"></script>
<div class="container">
<h3>Comments</h3>
<?php
$id_post = $id;
?>
<div class="cmt-container" >
<?php
session_start();
$users = session_id();
$results = $db->query("SELECT * FROM rest_rating WHERE sr_id = $id_post");
foreach ($results as $affcom) {
$comment = $affcom['comment'];
$rating = $affcom['rate'];
$date = $affcom['date'];
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/" . "?d=" . $default . "&s=" . $size;
?>
<div class="cmt-cnt">
<div class="thecom">
<input id="input-5a" class="rating" value="<?php echo $rating; ?>" data-size="xs" data-show-clear="false" data-show-caption="false" data-readonly="true">
<span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<div class="new-com-bt">
<span>Write a comment ...</span>
</div>
<div class="new-com-cnt">
<input name="starrating" id="starrating" value="1" type="number" class="rating" min=0 max=5 step=1 data-size="xs2" >
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Post comment</div>
<div class="bt-cancel-com">Cancel</div>
</div>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<?php
$sqls = "select user from rest_rating
where sr_id = '$id_post' and user ='$users' )";
$tt=$db->query($sqls);
$userT=$tt['user'];
?>
<script type="text/javascript">
$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){
$(this).hide();
$('.new-com-cnt').show();
$('#name-com').focus();
});
/* when start writing the comment activate the "add" button */
$('.the-new-com').bind('input propertychange', function() {
$(".bt-add-com").css({opacity:0.6});
var checklength = $(this).val().length;
if(checklength){ $(".bt-add-com").css({opacity:1}); }
});
/* on clic on the cancel button */
$('.bt-cancel-com').click(function(){
$('.the-new-com').val('');
$('.new-com-cnt').fadeOut('fast', function(){
$('.new-com-bt').fadeIn('fast');
});
});
// on post comment click
$('.bt-add-com').click(function(){
var theCom = $('.the-new-com');
var starrating = $('#starrating');
if( !theCom.val()){
alert('You need to write a comment!');
}else{
$.ajax({
type: "POST",
url: "add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&rating='+starrating.val()+'&comment='+theCom.val(),
success: function(html){
theCom.val('');
starrating.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
});
</script>
</div>
You can construct a query to check whether the user has already posted a comment on that particular page or not, and display the rating and comment box accordingly. Here's the code snippet,
// your code
$results = $db->query("SELECT * FROM rest_rating WHERE sr_id = '". $id_post . "' AND user ='". $users . "'");
if($results->num_rows){
// user has already posted a comment
echo '<p>You have already posted comment on this page</p>';
}else{
// user hasn't posted any comment on this page yet
// display rating and comment box
?>
<div class="new-com-bt">
<span>Write a comment ...</span>
</div>
<div class="new-com-cnt">
<input name="starrating" id="starrating" value="1" type="number" class="rating" min=0 max=5 step=1 data-size="xs2" >
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Post comment</div>
<div class="bt-cancel-com">Cancel</div>
</div>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<?php
}
// your code