Dynamically changing content of modal on list element click - javascript

I have a html page that is simulating the newsfeed of a social network website. here, posts from different users are generated as li on an un-ordered list. I want to show a pop up modal on the click even of any of these list elements that would dynamically show the content of that particular list element. the mark up is like below:
<body>
<div class="container" >
<ul id="newsfeed">
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jhon</p>
<p class="text">good moprning every body</p>
<p>posted at 12:30pm</p>
<hr>
</li>
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jimmy</p>
<p class="text">hello every body</p>
<p>posted at 12:30pm</p>
<hr>
</li>
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">joe</p>
<p class="text">felling bored at home</p>
<p>posted at 12:30pm</p>
<hr>
</li>
</ul>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="popup">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
The JQuery i have tried:
<script>
$('#myModal').on('show.bs.modal', function (event) {
var element = $(event.relatedTarget); // the li that triggered the modal to show
var dynamic_text = element.find('.text').val(); // Extract the value of the .text div inside that li
var modal = $(this);
$("#popup").html('the users post says: ' + dynamic_text);
});
</script>

.popup is the class, not the id. Need to Change
modal.find('.popup').text('the users post says: ' + dynamic_text);
to
$("#popup").html('the users post says: ' + dynamic_text);
and change val to text this:
var dynamic_text = element.find('.text').text();
fiddle http://jsfiddle.net/6oh9aacL/1/

Related

Not finding image source properly despite giving the correct path in html

I'm stuck with a problem. I Have Worked on images before in html but there never seemed to be a problem. I'm partially working on a project and I am giving the right path to the folder but the image is just not showing up. All the images had the same problem. Here is my code Snippet:
<div class="grid-col grid-col-12">
<div class="item-instructor bg-color-1">
<a href="page-profile.html" class="instructor-avatar">
<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">
</a>
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- 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" style="color: black;">M Saifur Rahman</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-instructor bg-color-3">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" alt="">
</a>
<div class="info-box">
<h3>Bijon Islam</h3>
<span class="instructor-profession">CEO</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal1">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal1" 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" style="color: black;">Bijon Islam</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-col grid-col-12">
<div class="item-instructor bg-color-2">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt>
</a>
<div class="info-box">
<h3>Ivdad Ahmed Khan Mojlish</h3>
<span class="instructor-profession">Managing director</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal2">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal2" 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" style="color: black;">Ivdad Ahmed Khan Mojlish</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-instructor bg-color-6">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt>
</a>
<div class="info-box">
<h3>Zahedul Amin</h3>
<span class="instructor-profession">Directory,Finance & Strategy</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal3">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal3" 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" style="color: black;">Zahedul Amin</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-image">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My htdocs path is like this:
F:\xampp\htdocs\Main Files\UniLearn\UniLearn (with Options Panel)\img
Brother, i think the problem is in the paths, you have here 3 choices base on your HTML page location:-
if the .html file is in the same folder with the image your code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="saif.jpg" alt="">
</a>
(.html page beside saif.jpg)
if the .html file is in a folder contains the folder of the image your code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="UniLearn/UniLearn (with Options Panel)/img/saif1.jpg" alt="">
</a>
(.html page beside the folder UniLearn)
if the .html is in a different folder you need to jump up levels till you reach the nearest common folder and point to the image code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="../../UniLearn/UniLearn (with Options Panel)/img/saif2.jpg" alt="">
</a>
(.html is in a path two levels far from UniLearn)
-->(../..) Means go up two levels in the folder structure.
hope this helps
i think the problem is in your directory name spaces.
try to take picture from other directory then you will see what is the problem.
the problem is with the spacing. if you want to keep the naming (not recommended) and still use the image try this:
<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">
It is hard to tell with only this information.
Here's how to troubleshoot this:
First replace all spaces with %20 this is the way to url encode those characters.
If it still is a problem (normally browsers auto url encode), compare the URL you are using to access the website, the href in the base tag if there is one, and the url of the image. The browser will use those 3 together to figure out the final URL...
You can right click on the picture, and open in a new tab. It will allow you to rapidly see the URL that is used to point to the picture and allow you to make changes.
Also, since you are on a unix machine, the case is important. Make sure that all capitals should be present.

Bootstrap Modal don't open in photo grid

I have a photo shuffle grid, with this grid I can select a few theme's and it shows only the pictures of that theme.
Now I want to do the following, when I click on a image I want a modal to open. The problem I have is the following:
The first image (with a modal in the back) opens without problems, but the other pictures (with modals) do not open probably, I see them (half) but I can't click on them.
This is my code:
HTML
<ul class="portfolio-sorting list-inline text-center">
<li>All</li>
<li>Heren</li>
<li>Dames</li>
<li>jongens</li>
<li>meisjes</li>
<li>gemengd</li>
</ul>
<!--end portfolio sorting -->
<ul class="portfolio-items list-unstyled" id="grid">
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 1</h2>
</button>
<div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title black_tekst">Heren 1</h4>
</div>
<div class="modal-body">
<!--Tekst -->
<h2 class="black_tekst">Test </h2>
<p class="black_tekst">
<br>
<br> Team informatie
<br>
<br>
</p>
<h3 class="black_tekst">Test</h3>
<!--Einde tekst -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------->
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 2</h2>
</button>
<div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------------->
<!-- sizer -->
<li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li>
</ul>
<!--end portfolio grid -->
CSS and JS you can find on https://jsfiddle.net/hrpj3j9t/2/
1) Bad code provided on jsfiddle - unclear, modernizr in js code section
2)From my point of view the best way is to generate code you need with jquery. In imageSrc I mean the real path to image.
This the small example of concept:
Place modal at the top:
<body>
<div class="modal" id="modal">
<img id="modalImage" src = "" alt="image">
...
</div>
...
<div class="elementOfGrid" data-image="imageSrc">
</body>
in js:
$('elementOfGrid').click(function(){
$('#modal #modalImage').attr({"src":$(this).data("image")});
$('#modal').modal("show");
}
another variant instead of setting attribute you can generate the whole html and use it like this:
$('#modal').html('');
var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>';
$('#modal').html(htmlRow);

Is my bootstrap modal window loading my image even if I don't open it?

I have a thumbnail gallery that displays thumbnail images and displays a modal window pop up when I click on the thumbnail. I'm not sure if this model window code is in the right place. My question is - is the modal ALWAYS loading the image when the page renders or just when I open the modal? Question 2 - should I have modal code for each thumbnail (like below) or should I place the modal code in one place and set the image with jquery? Please advise! Thanks.
Here is my html code that displays the thumbnail list
<div id="row">
<div id="sortable">
#foreach (var image in Model.Images)
{
#*<li>this is an image</li>*#
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
#{
var base64 = Convert.ToBase64String(image.ImageThumbnail);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}
<a href="" data-toggle="modal" data-target="#myModal">
<img src="#imgSrc" alt="image not found" width="203" height="136" />
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
#{
var base64Modal = Convert.ToBase64String(image.Image);
var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
}
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<a href="" data-toggle="modal" data-target="#myModal">
<img src="#imgSrcModal" alt="image not found" width="255" height="255" />
</a>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>

Replace Image based on ui-icon-folder-open and Modal

I would like to replace an image when user clicks on an ui-icon-folder-open. I modified the code from Droppable UI http://jqueryui.com/droppable/#photo-manager and added a modal window. If I use a button with data-toggle="modal" and set data-target="#myModal" then that works. However, if I try something like $(#myModal).toggleClass("active"), that doesn't show anything. Thank you very much.
Javascript
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" ></script>
<script>
$( "ul.gallery > li" ).click(function( event ) {
var $target = $( event.target );
if ( $target.is( "a.ui-icon-folder-open" ) ) {
//open modal
}
return false;
});
</script>
HTML
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<img id="bg" src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
Change image
Delete image
</li>
</ul>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Input Form</h4>
</div>
<div class="modal-body">
Text Box 1 <input type="textbox" id="textbox1"> </input><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="saveTextBoxes()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Alright #joelgrannas, we got the codes. Thank much for your guidance.
Javascript
var $img_target = "";
$("ul.gallery > li").click(function(event) {
var $item = $(this),
$target = $(event.target);
$img_target = $target.parent().find('img');
if ($target.is("a.ui-icon-folder-open")) {
$('#myModal').modal('show');
}
return false;
});
$('#myModal').on('hidden.bs.modal',function(){
$img_target.attr('src',$("#textbox1").val());
});
HTML
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<img id="bg1" src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
Change image
Delete image
</li>
<li class="ui-widget-content ui-corner-tr">
<img id="bg2" src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
Change image
Delete image
</li>
</ul>

Fade the li when modal is opened and added to other div

When I clicked on the product, it opened the Modal and added to the My product list but I want that particular product to get faded if it is added to the My Product list and the button also when the modal is reopened so that it could not be added again to list.
<script type="text/javascript"> <!--This is the code what i'm able to do so far-->
$(document).ready(function() {
$('button[id^="allttm"]').click(function(e) {
e.preventDefault();
var $this = $(this);
var data_id = $this.attr('data-id');
$("#mylist").append('<li class="has-item">' + data_id + '</li>');
});
});
</script>
<ul class="unstyled" id="products">
<li class="dummycontent" id="itemdetail" data-id="6425809">
<a class="dummyclass" href="javascript:void(0)" id="" data-toggle="modal" data-target="#basicModal">
<span class="itemname">product 1</span>
</a>
</li>
</ul>
<h3 id="myproductlistheader">My productlist</h3>
<ol id="mylist" class="productlist">
</ol>
This the modal area:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="procuctifo">
<div>
<h3 class="productheading">product 1</h3>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal" id="allttm_1" data-id="product 1">Add to list</button>
</div>
</div>
</div>
</div>
you can add another class to your product item once it has been added to the list and based on whether the product items has the class or not you can add it to the list.your code may look something like this:
$('.products').click(function(){
if($(this).hasClass('added')){
//product in the list , no need to add
}else{
// add class and add product to list
$(this).addClass('added');
//add product to list
}
});
Hope it helps

Categories