I am using the following script to load images from a folder and append them to a div:
$(function() {
var folder = "img/moreprojects/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("#gallery").append( "<div class=\"col-12 col-sm-3\" align='center'><img class='img-fluid img-thumbnail img-rounded mx-auto d-block' style=\"max-width: 240px; max-height: 240px; margin: 12px;\" src='"+ folder + val +"'></div>" );
}
});
}
});
});
However, when I call my next script, which opens a model for the image (which works on images already on the page), the images do not open:
$(function() {
$('img').on('click', function() {
$('.enlargeImageModalSource').attr('src', $(this).attr('src'));
$('#enlargeImageModal').modal('show');
});
});
How can I have this function, which already works for images in HTML already, work for my dynamically loaded images?
Note: I am using Bootstrap 4 and jQuery.
EDIT
HTML structure (I am using Bootstrap 4):
<section class="py-5">
<div class="container">
<div class="row" id="gallery">
<p class="lead">Welcome to our gallery! Here we showcase all the images from our projects and other work. Use the toggles below, to switch between a list view and a swiping gallery view!</p>
<br /><br />
</div>
</div>
</section>
<div class="modal fade" id="enlargeImageModal" tabindex="-1" role="dialog" aria-labelledby="enlargeImageModal" aria-hidden="true">
<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>
</div>
<div class="modal-body">
<img src="" class="enlargeImageModalSource" style="width: 100%;">
</div>
</div>
</div>
</div>
Changing the .on('click', ...) call from:
$('img').on('click', function() {...});
to
$(document).on('click', 'img', function() {...});
fixed the issue for calling a click event on the dynamically loaded images.
Related
I'm displaying a MVC Partial View inside a Bootstrap Modal by clicking a button. My setup is like this:
Modal
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body" id="Preview">
#*PartialView*#
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
$.ajax({
type: "Get",
url: '#Url.Action("PartialViewTitle", "Controller")',
data: {},
success: function (data) {
$('#Preview').html(data);
$('#myModal').modal('show');
}
});
}
</script>
In my Controller I have defined a method PartialViewTitle() which returns the Partial View. I have a button, where onclick= links to the Open() function.
The problem is that the content of my partial View is displayed on the left side of the modal and on the right is blank space. I would like to have the size of my modal adapted to its content and the content to be centered. What is the best way to do this?
Thank you in advance!
To get the content centered you just have to add align-self-center as follow:
<div class="modal-body align-self-center" id="Preview">
To adapt size, you can use css display: inline-block; please take a look to the following article:
Bootstrap Modal Dynamic Width
In your .cshtml view use
<div id='myModal' class='modal hide fade in' data-url='#Url.Action("PartialViewTitle","Controller")'>
<div id='ModalContainer'>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
var url = $('#myModal').data('url');
$.get(url, function(data) {
$('#ModalContainer').html(data);
$('#myModal').modal('show');
});
}
</script>
If it doesn't work then need to add styles.
Try using $('#Preview').append(data); instead of $('#Preview').html(data);
I'm gettig value of img from views.py now, I want that when user click on the image, it should open in a modal.
index.html image sections:
<!-- Card body -->
<div class="card-body">
{% for val in data.list %}
<img src="{{val.Img}}" class="img-thumbnail pop_img"> -------here i'm getting the image properly and the path is showing correctly
{% endfor %}
</div>
index.html modal section
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
main.js
$(function() {
$('.pop_img').on('click', function() {
var img = $(this).find('img').attr('src')
console.log(img) -----------------but on console it prints : undefined
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
and while inspecting on elements, it shows <img src(unknown)> inside modal.
How can I get the value of src attr value and place it on modal?
The .find() function on this line returns all the img elements in the class, var img = $(this).find('img').attr('src'). This problem can be fixed by using .first() instead. So var img = $(this).first('img').attr('src')
I have a modal which is loaded by jQuery. I load the data from database. All data loaded fine but the image--it shows no image. But in the console, it's written normally. Here is the modal trigger:
<a data-toggle="modal" title="Quick View" href="#" onclick="detailsmodal(<?= $row->id; ?>)"><i class=" ti-zoom-in"></i><span>Quick Shop</span></a>
This is the script:
function detailsmodal(id) {
var data = {"id" : id};
// send data to store_items/detailsmodal
jQuery.ajax({
url : '<?= base_url()?>store_items/detailsmodal',
method : "post",
data : data,
success : function(data){
jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error : function(){
alert("Something went wrong!");
}
});
}
this is the detailsmodal function:
function detailsmodal() {
$item_id = $this->input->post('id', TRUE);
$query = $this->get_where($item_id);
foreach ($query->result() as $item
$big_pic = $item->big_pic;
$data['big_pic_path'] = base_url()."big_pics/".$big_pic;
}
$this->load->view('detailsmodal', $data);
}
And this is the modal:
<div class="modal fade" id="details-modal" tabindex="-1" role="dialog">
<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
class="ti-close" aria-hidden="true"></span></button>
</div>
<div class="modal-body">
<div class="row no-gutters">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="quickview-slider-active owl-carousel">
<img src="<?= $big_pic_path ?>" alt="">
<img src="<?= $big_pic_path ?>" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I cut the code. I have no clue what I should do. The image doesn't show in the modal even if I change the image path with the static path--not taken from database.
You code seems problem with no ajax request success, you have code something like:
jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
The problem is when you remove an element from DOM or change element in DOM in loaded page. It can't refered directly with selector. Because every selector is recorded when DOM is loaded and no selector is recorded on dynamic change/placement.
SO In this situation, you need to refer parent element which is not changed, then find the desired element in it.
So your code should be like:
jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('body').find('#details-modal').modal('toggle');
Also if you wish to show model after every ajax request change toggle to show.
jQuery('body').find('#details-modal').modal('show');
It should work!
I have a small script that stops YouTube videos from playing after their modals are closed. The issue is it doesn't work if the HTML has been loaded via AJAX.
Script:
$('#panelModal-1').on('hidden.bs.modal', function () {
callPlayer('yt-player-1', 'stopVideo');
});
$('#panelModal-2').on('hidden.bs.modal', function () {
callPlayer('yt-player-2', 'stopVideo');
});
HTML (curly braces denote data pulled from CMS):
<li>
<a href="#" title="Watch Video" data-toggle="modal" data-target="#panelModal-{count}">
<div class="video-background" style="background-image:url(http://img.youtube.com/vi/{video_youtube_id}/hqdefault.jpg)"></div>
<div class="video-details">
<h4>{title}</h4>
<p>{video_subtitle}</p>
</div>
</a>
<!-- Modal -->
<div class="modal fade" id="panelModal-{count}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-{count}">
<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-{count}">{title}</h4>
</div>
<div class="modal-body">
<div id="yt-player-{count}" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{video_youtube_id}?enablejsapi=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</li>
The AJAX part is this:
$(document).ready(function()
{
$('.sub-nav').delegate('.load-case-studies', 'click', function(e)
{
// Don't follow the link
e.preventDefault();
$('.sub-nav a').removeClass('active');
$(this).addClass('active');
// Fetch the next page
$.get($(this).attr('href'), function(data)
{
// Only grab the part of the page we want
content = $(data).find('.ajax-wrapper').hide();
// Add it to the DOM
$(content).replaceAll('#entry-container');
// Fade-in our new content
$(content).fadeIn('fast');
});
});
});
How can I get the videos to stop playing after the modal is closed, if the data has been loaded via AJAX?
you can use following jQuery command.
$('#playerID').get(0).stopVideo();
If your using Player API :
var player = new YT.Player('player');
player.stopVideo();
How could I show a loading indicator while an iframe is loading a PDF file?
In my partially working solution I do the following: When the modal dialog, where the iframe is in it, is opened then an loading indicator appears. If the content of the iframe is completely loaded the indicator disappears and the PDF file is shown.
Here is my code:
<div data-gid="<?php echo $gid; ?>" class="modal fade" id="sammelPDF" tabindex="-1" role="dialog" aria-labelledby="sammelPDF" aria-hidden="true">
<div class="modal-dialog" style="width: 1000px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wettkampfplan gesamt</h4>
</div>
<div class="planGesamtModalBody modal-body">
<div class="rwk-progress" style="display: table; margin: 0 auto;">
<div style="text-align: center;">
<img src="/planung/images/spinner.gif" />
</div>
<p style="margin-top: 10px; text-align: center;">Bitte haben Sie etwas Geduld...</p>
</div>
<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" id="planGesamtPDFFrame" src=""></iframe>
</div>
</div>
</div>
</div>
$('.sammelPDFWettkampfplan').click(function() {
$('.planGesamtPDFFrame').hide();
$('.rwk-progress').show();
});
$('#sammelPDF').on('show.bs.modal', function() {
var group = getActiveTab();
var url = '/pdf?gid=' + $(this).data('gid') + '&classes=1,2,3,4&group=' + group.attr('id') + '&nocache=' + new Date().getTime();
$('#planGesamtPDFFrame').attr('src', url);
});
$('#planGesamtPDFFrame').load(function() {
$('.rwk-progress').hide();
$(this).show();
});
This solution works well in Safari, FF, Chrome and Opera but not in IE.
How could I achieve that the loading indicator hides and the PDF is shown in IE?
In Google I found some interesting posts about onreadystatechange and readyState but this also doesn't working.
var iframe = document.createElement("iframe");
iframe.src = "simpleinner.htm";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
}
http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/