CODEWITHSUNDEEP
jquerytwitter-bootstrap
wfsu media
wfsu media

Reputation: 69

jquery, data-attributes, bootstrap modal

So I'm really new at the data-attribute thing and my jquery skills are pretty newb. Hopefully I ask this right!

I want to use a data attribute to add content to a bootstrap modal. Depending on which picture the user clicks on, they get a modal with different content. Photos work (someone else wrote it), but I need to also add text. It starts here where I enter the content I want in the data-attributes. I added the data-myval part:

<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/loveinonlandis.jpg" data-myval="this is text">

Here is the "generic" modal code, that each of the photo elements uses:

 <div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <img src="" id="galleryImage" class="img-responsive" />
            <div id="galleryText"><!--I added this, this is where I want the data-myval to go (in this div)--></div>
            <p>
                <br/>
                <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button>
            </p>
        </div>
    </div>
    </div>
</div>

And the jquery that runs things:

$('#galleryModal').on('show.bs.modal', function (e) {
   $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
    $('#galleryText').data('myval'); //this is the wrong part, but i want to put my text from data-myval into the modal at id galleryText

});

How do I write this so that I can add my text from the content of data-myval?

Thanks for help!

Upvotes: 2

Views: 3239

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/jv8dpv5x/

$('#galleryModal').on('show.bs.modal', function (e) {
   $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
   $('#galleryText').text($(e.relatedTarget).data('myval')); 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/loveinonlandis.jpg" data-myval="this is text">Open Modal</a>

<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <img src="" id="galleryImage" class="img-responsive" />
            <div id="galleryText"><!--I added this, this is where I want the data-myval to go (in this div)--></div>
            <p>
                <br/>
                <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button>
            </p>
        </div>
    </div>
    </div>
</div>

Change of code $('#galleryText').text($(e.relatedTarget).data('myval'));

Upvotes: 2

Sunil Shrestha
Sunil Shrestha

Reputation: 313

You can retrieve data attribute value as same as the src attribute.

$(document).ready(function(){
  $('#galleryModal').on('show.bs.modal', function (e) {
    var text = $(e.relatedTarget).data('myval');
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
    $('#galleryText').text(text);
  });
});

Upvotes: 0

Related Questions