this is a stranger question
i have this for cicle
for($i=0;$i<count($certificazioni);$i++){
$etc=certificazioni[$i];
....
<img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvento">
}
when i click the image it open a bootstrap modal fade like popup
<div class="modal fade" id="addEvento" tableindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<?php echo $etc; ?>
how i can intercept the correct value ? i receive the last value of $etc
there is a method to get te correct value of the cicle for ?
you need to use javascript to get the value. I'm not sure what $etc data is, but basically you need to create a javascript function, and pass the value to the function onclick image.
Example:
PHP
for($i=0;$i<count($certificazioni);$i++){
$etc=certificazioni[$i];
....
?>
<img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvento" onclick="return viewImage(<?php echo $etc; ?>)">
<?php
}
HTML Modal
Add additional div to the modal code
<div id="outputHere"></div>
JavaScript
<script>
function viewImage(image) {
// do what you need with the data, which is in this case to append to the modal
document.getElementById('outputHere').innerHTML = image;
// this example is only to append the value. you can modified it to suit your needs (html code or anything)
}
</script>
I think what you're trying to do is to open a specific modal when an image in clicked and if so, then try this:
for($i=0;$i<count($certificazioni);$i++){
$etc=certificazioni[$i];
....
<img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvento<?= $i ?>">
<div class="modal fade" id="addEvento<?= $i ?>" tableindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<?php echo $etc; ?>
}
you should include the modal inside the for loop so that every image will have its own modal and when you click image 1 then modal 1 will open.. and you don't even need to use javascript for this.
Related
Please I'm new to coding and I have a project i am working on.
I have a php while loop code that diplay 5 posts
I also have a jQuery code to display modal for the while loop with post url
The problem I'm face here is that the displayed url is inside a div
<p id="url"></p> this show the url
I want to add it as url.
I have tried </p>'> Click to view
But the link will not show
I have tried echo it still not showing.
I have been on this for two days now
The modal that display the content is outside the while loop and working
I need help
My ajax code
<script>
function showModal(id)
{
$("#url").text($("#url_"+id).text());
}
</script>
Php loop code
`<?php
foreach ($posts as $key => $result) { ?>
<div href="#" data-toggle="modal" data-target="#myModal" onClick="showModal(<?php echo $id ; ?>)" class="side-icon share-btn">
<i class="fa fa-share share-icon"></i> View link
<?php } ?>
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<div class="modal-content">
<div class="modal-header">
<center><h4>Share with friends</h4></center>
<?php $t='<p id="name"></p>';
$t1?>
. Click to view
</div>
`
The id containers the url from MySQL table
The issue I'm facing is that, <p id="url"></p> is just showing www. example.com as plain test on user view but can't make it work as link to click
A hyperlink a is not necessary to invoke the modal dialog - most DOM elements can invoke whatever function you like. You assign an event listener either to all nodes of interest or a delegated listener bound to a common parent element. The snippet below might be of use?
// add delegated listener on the containing node that has the content that is to be clicked
// by the user to invoke the modal dialog.
document.querySelector('div.urls').addEventListener('click', function(e) {
// Only process nodes that are not the specified target itself. ie: it's children
if (e.target != e.currentTarget) {
let modal=document.getElementById('myModal');
// add the content from the clicked node to the modal somewhere
let link = modal.querySelector('a[data-id="modal-target"]');
link.setAttribute('href', e.target.textContent);
link.innerHTML = 'Click to view';
}
});
.url:hover {
color: red
}
.url {
cursor: pointer;
}
<div class='urls'>
<p class='url'>https://www.example.com</p>
<p class='url'>https://www.banana.com</p>
<p class='url'>https://www.bogus.org</p>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"></div>
<a data-id='modal-target'></a>
</div>
</div>
</div>
I am trying to pass song_id to a modal then pass the value gotten from the song_id in the modal to another page through href. The song_id value is stored in the span id, I then want to pass the span id value through href stored in a php variable and display it in the next page, but the span value does not go through to the next page using the href, Please i need guide on how to pass the span id value stored in the variable to the next page using href.
This is my code:
// This is where am getting song_id from
<?php
require '../db.php';
$sql = "select * from songs order by song_id desc Limit 20";
$sql_query = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($sql_query)) {
$song_id = $row['song_id'];
?>
// This is the code triggering the modal and passing the song_id to the modal
<li><a data-id="<?php echo $row['song_id']; ?>" onclick="$('$playlist_id').text($(this).data('id')); $('#myModal3').modal('show');"><span class='icon icon_playlst'></span>Add To Playlist</a></li>
// This is the modal which would receive song_id and pass it to my_playlist.php through href.
<!-- Select Playlist Start-->
<div id="myModal3" class="modal centered-modal" role="dialog">
<div class="modal-dialog login_dialog">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<i class="fa_icon form_close"></i>
</button>
<div class="modal-body">
<form action="create_playlist.php" method="post">
<div class="ms_register_form">
<h2>Add to Playlist</h2>
<div class="ms_weekly_box">
<div class="weekly_left">
<div class="w_top_song">
<div class="w_tp_song_name">
//This is where i store the song_id in a php variable and pass it in the href of my_playlist.php.
<h2><?php $playlist_id = '<span id="playlist_id"/>'; echo $playlist_id; ?></h2>
<h3>Hip-Hop</h3>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
To pass data through URL you have to use the "get" parameters :
in your HTML have this kind of link : www.mysite.com/mypage.html?data_name=data_value
in your PHP you can access this data with $_GET['data_name'] (here it has the value : 'data_value')
I saw this question earlier but it got closed.
Your title question can be solved using javascript. You can wrap your span tag and button in a form and access the id of the span tag on submission of the form. You can create as many forms as you wish.
<form onsubmit="playlistHandler(event)">
<h2><span id="playlist_id"/><?php echo $playlist_id ?></span></h2>
<button type="submit">Hip-Hop</button>
</form>
<script>
function playlistHandler(event)
{
event.preventDefault();
let link_id = encodeURI(event.target.children[0].children[0].getAttribute('id'));
window.location = "my_playlist.php?new_id=" + link_id;
}
</script>
Just a simple question to ask if there is someone available to assist me. Please take a look at this section on my index page:
<?php foreach($galleries as $item) { ?>
<div class="col-md-2">
<p>Eagle Fruit <?= $item['gallery_name'] ?></p>
<img src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" class="img-responsive">
View the Gallery
</div>
<?php } ?>
My Controller is setup with the following function
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Site extends MX_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('gallery/Gallery_m');
}
public function index($id = 'ID')
{
$data['title'] = 'Welcome to Eagle Fruit Alliance (Pty) Ltd';
$data['galleries'] = $this->Gallery_m->get_galleries();
$data['gallery'] = $this->Gallery_m->view($id);
$data['content'] = 'index_view';
$this->load->view('templates/site/template',$data);
}}
Now when I click on the link i would like the gallery to open in a modal how would i achieve this? I have added a modal with the following code where am I going wrong:
Modal
<!-- Modal -->
<div class="modal fade" id="gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?= $gallery['name'];?></h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ./Model -->
Because you are interacting with the user's click on an image, this isn't a PHP or HTML question. User interaction always involves javascript/jQuery.
AJAX is a two-part methodology. It is initiated in javascript, and sends data to a server-side PHP file that does something and returns a response, which is received/dealt with in javascript. See this SO post for more information on AJAX.
However, this question doesn't need to use AJAX either, because there is no additional data to fetch.
It's a bit difficult from your code to see exactly how to trigger the modal. Usually, we look for a commonality in the code, such as a class name, to use as the trigger. In your case, you could try:
$('p+img').click()
However, I recommend modifying your code like this:
<img class="mod_trig img-responsive" src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" >
Note: I moved the class to front of tag only to make it very visible in this answer. Keep it where it is in your code, if you wish.
Next, when a trigger is clicked, you use CSS selectors (jQuery uses CSS selectors, so learn them -- and Bootstrap uses jQuery, so learn jQuery) to get the href attribute of the <a> tag -- this is the direct link to the desired image, correct? You would only need to use AJAX if you didn't already have some information available to you on the page, but in this case you have all you need.
Use jQuery's .html() method to create an <img> tag inside the Bootstrap modal, replacing whatever was in that particular DIV. Here is a very simple example where we demonstrate exactly this procedure, but instead of putting it into the Bootstrap modal's framework we simply create the <img> tag inside a pre-existing DIV called #msg.
jsFiddle Demo
$('p+img').click(function(){
var i = $(this).next('a').attr('href');
//alert(i);
$('#msg').html('<img src="'+i+'" class="msg" width="200" height="200" />');
});
#msg{position:absolute;top:30%;left:40%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/98/100/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/100/95/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/95/95/animals" />
View the Image
</div>
<div id="msg"></div>
*It's not a perfect example, because the placeholder image website does not serve the same image when requesting identical parameters, so you can uncomment the alert() line to see that each time you click an image you get different parameters injected into the #msg div -- you get the correct parameters for the <img> on which you clicked.
Now, all you need to do is to inject (via html() method) the newly-created <img> tag into the appropriate Bootstrap div instead of into the #msg div:
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
And trigger the modal to display:
jsFiddle Next Demo
$('.mod-trigger').click(function(){
var i = $(this).next('a').attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Note how in this example I replaced the CSS selector with '.mod-trigger', and created a class on each image with that className
This new example shows you how to trigger the modal if a user clicks on the <a> tag:
jsFiddle Demo
Note that the <a> tag's default action is to navigate to another page. You don't want this, so the first thing you must do is suppress that default behavior:
$('.mod-atag').click(function(e){
e.preventDefault();
var i = $(this).attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Also note that I added a className to each <a> tag to make it easy to detect the click.
I'm trying to display a Bootstrap Modal on my webshop when the mouse hovers over a product. I searched online and found the following:
https://stackoverflow.com/a/12190456/3164891
I got it to work in the Fiddle by adding the following code:
$('#openBtn').hover(function () {
$('#modal-content').modal({
show: true
});
});
But when I want to apply it to my situation I can't get it to work
HTML
<li class="item">
<a href="#" data-toggle="modal" data-trigger="hover" data-target="#basicModal-<?php echo $_product->getId()?>" class="product-image" id="<?php echo $_product->getId() ?>">
<img id="product-collection-image-<?php echo $_product->getId(); ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>" />
</a>
</li>
<div class="modal fade" id="basicModal-<?php echo $_product->getID()?>" role="dialog" aria-hidden="true" data-trigger="hover">
<div class="modal-content">
Modal Content
</div>
</div>
Calling the modal
jQuery('.item').hover(function () {
jQuery('#basicModal').modal({
show: true
});
});
When I try it on my site the modal only shows when the a href is clicked and does nothing on hover. I've also tried the following code:
jQuery('#basicModal').modal({trigger: "hover"});
I'm using the following versions:
jQuery: 1.10.2.min
Bootstrap: 3.2.0
Your javascript code that is firing the modal on hover, it's not selecting the right element:
jQuery('#basicModal')
In the above line you are selecting an element with id === "basicModal", but in your html the id is equal to basicModal-<?php echo $_product->getID()?>. The two id strings must match, or you can use a jquery wildcard, like JQuery("[id^=basicModal]") that selects all elements with id sarting with basicModal.
Here is a working version of your code with the wildcard solution: http://jsfiddle.net/fcyafcgx/
I am trying to generate unique IDs for each modal, as I will be loading in an address specific map to each modal. My issue is that when I click the link:
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
it tries to take me to mypage.php/#myModal_8 (or whatever the given ID is, instead of pulling up that specific modal. The modals work great is I don't have the ID attached, but they won't load dynamic content that way.
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
</p>
<div class="modal hide" id="#myModal_<? echo $meeting['ID'] ?>">
<div class="modal-body">
<? echo $meeting['Address'] ?>
</div>
<div class="modal-footer">
Close
</div>
</div>
Any help on this would be much appreciated. Thank you!
It's all about the ID you are giving to the modal : id="#myModal_<? echo $meeting['ID'] ?>"
The # is only needed for the jQuery selector, not the ID. Which would give :
<div class="modal hide" id="myModal_<? echo $meeting['ID'] ?>">
Further more, you should open your php tags with <?php for the reasons described here : Are PHP short tags acceptable to use?