I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}
You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.
Related
I am new to JavaScript and I'm working on a project with openlayers and geoserver and I need to add features to a layer. I succeeded to draw a feature but for saving it I need to enter its attributes which I implemented in a bootstrap modal but when I finish drawing the modal doesn't show I get just a transparent page and it stays like that.
Here it is my html code :
<!-- Attribute Update Modal -->
<div class="modal " id="attributeUpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Attributes</h3>
<button class="btn-close btn-light" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="attribute-body">
<div id="attributeContainer"></div>
</div>
<div class="modal-footer">
<div class="col-md-12 text-center">
<button id="btnSave" type="button" class="btn btn-success">
Save
</button>
<button id="btnCancel" type="button" class="btn btn-warning">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
Here it is my JavaScript code :
drawInteraction.on("drawend", function (e) {
var feature = e.feature;
feature.set("geometry", feature.getGeometry());
modifiedFeatureList.push(feature);
var featureProperties = editGeoJSON
.getSource()
.getFeatures()[0]
.getProperties();
document.getElementById("attributeContainer").innerHTML = "";
for (var key in featureProperties) {
if (featureProperties.hasOwnProperty(key)) {
if (key != "geometry") {
if (key != "id") {
var div = document.createElement("div");
div.className = "mb-3";
var lbl = document.createElement("label");
lbl.className = "form-label";
lbl.innerHTML = key;
var inputBox = document.createElement("input");
inputBox.className = "form-control";
inputBox.id = key;
inputBox.value = "";
div.appendChild(lbl);
div.appendChild(inputBox);
document.getElementById("attributeContainer").appendChild(div);
}
}
}
}
$("#attributeUpdateModal").modal('show');
});
Does anyone have an idea about this issue?
I've been working with modal fade and it didn't work
what suppose happen is adding a new grade in partial view so i decided to work with modal fade and i didn't know anything about it.
so there is the code and please help me to fix the problem
<p>#* Button *#
New Grades
</p>
<div class="modal fade" id="mymodal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h3 class="modal-title">Add/Edit Grades</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">
<div style="text-align:center;display:none" id="loaderDiv">
<img src="~/Image/load2.gif" width="150" />
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
var AddEdit = function (id) {
var url = "/Grades/AddEditGrade/" + id;
$("#myModalBodyDiv1").load(url, function () {
$("mymodal1").modal("show");
})
}
</script>
any idea how can i fix it ??
you are missing ID selector symbol in this line:
wrong: $("mymodal1").modal("show");
modified: $("#mymodal1").modal("show");
i try to chenge the src ifame in js but i cant success.
the i frame always empty and without content of new window src.
if i put the src inside the iframe its work ( i cant do that becuse i need id to src and i got that on js function)
html:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe src="" id="iframePOP" style="zoom:0.60" width="99.6%" height="250" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default text-center" data-dismiss="modal">close</button>
</div>
</div>
</div>
js:
function ShowPopup(id) {
$('#myModal').on('show', function () {
document.getElementById("iframePOP").src="/Game.aspx?GameId=" + id;
});
$('#myModal').modal({ show: true })
}
i tried also this:
function ShowPopup(id) {
var frameSrc = "/Game.aspx?GameId=" + id;
$('#myModal').on('show', function () {
$('iframe').attr("src", frameSrc);
});
$('#myModal').modal({ show: true })
}
Have you tried assigning your whole domain name into your var frameSrc?
EDIT:
Try changing $('#myModal').on('show', function () { ... } into $('#myModal').is(':visible', function(){ ... }); and make sure the ID of the modal you are referencing is correct. If that didn't work, try this $('#myModal').on('show.bs.modal', function (e) { ... })
I have a modal that displays a product and a counter to select the # of items. There are up and down buttons to increase or decrease the quantity. Here is the modal:
<div id="productDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productDetailModal" aria-hidden="true">
<div id="productDetailDialog" class="modal-dialog">
<div class="modal-content">
<div id="counter" class="col-xs-6">
<label for="qty"><abbr title="Quantity">Qty</abbr></label>
<input id="qty" value="0" />
<button id="down" onclick="modify_qty(-1)">-1</button>
<button id="up" onclick="modify_qty(1)">+1</button>
</div>
And here is the script function:
function modify_qty(val) {
var qty = document.getElementById('qty').value;
var new_qty = parseInt(qty, 10) + val;
if (new_qty < 0) {
new_qty = 0;
}
console.log("Inside script.js function. new_qty= " + new_qty);
document.getElementById('qty').value = new_qty;
return new_qty;
}
The counter works fine if I take the #counter div and place it in the body of the html page. It's only in the modal, where it doesn't work. I output to console in the function, and it seems the function isn't getting called inside the modal. What am I doing wrong?
You're not showing how/where you include the javascript, but if you make sure it's in scope (check your console logs for errors), it should work.
Here's a working example:
jsfiddle.net
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#productDetailModal">Open Modal</button>
<div id="productDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productDetailModal" aria-hidden="true">
<script>
function modify_qty(val) {
var qty = document.getElementById('qty').value;
var new_qty = parseInt(qty, 10) + val;
if (new_qty < 0) {
new_qty = 0;
}
console.log("Inside script.js function. new_qty= " + new_qty);
document.getElementById('qty').value = new_qty;
return new_qty;
}
</script>
<div id="productDetailDialog" class="modal-dialog">
<div class="modal-content">
<div id="counter" class="col-xs-6">
<label for="qty"><abbr title="Quantity">Qty</abbr></label>
<input id="qty" value="0" />
<button id="down" onclick="modify_qty(-1)">-1</button>
<button id="up" onclick="modify_qty(1)">+1</button>
</div>
</div>
</div>
</div>
I want to place 3 thumbnails in each row and I'm using "col-md-4". But if there are 4+ thumbnails a new row will be created and 3 thumbnails will be in that new row. How would I do this?
FB.api('/me/albums?fields=picture', 'get', {
access_token: userToken
}, function(response) {
var data = response.data;
for (var i = 0, l = response.data.length; i < l; i++) {
var pictureUrl = data[i].picture.data.url;
$("#albumPicturesModalBody").append("<div class=\"col-md-4\"><a class=\"thumbnail albumPicture\"><img src=\"" + pictureUrl + "\" alt=\"...\" class=\"img-rounded\"></a></div>");
}
});
<div class="modal" id="albumPicturesModal" style="padding-top: 70px;" tabindex="-1" role="dialog">
<div class="modal-dialog">
<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">Select An Album</h4>
</div>
<div class="modal-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;">
<div class="row" id="albumPicturesModalBody">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is in response to your other question: "How to calculate number of bootstrap rows based on number of images"
function howManyRows(totalImages) {
var count = Math.round(totalImages / 3);
return count;
}
console.log(howManyRows(50)); // output: 17
You could use something like that to figure out how many rows to create for your other function request here.