Displaying a data-* attribute as text within a modal window

Question

I am having bother trying to get information from a data-* tag and displaying it as text within a modal window.

Here's the code I've got so far

The button to open the modal:

<a class="getRef btn smallbtn" data-title="A General Reference" data-ext-ref="AGENE-100063" href="#modal-container-getExtRef" data-toggle="modal">-Reference-</a>

The modal itself:

<div class="modal fade" id="modal-container-getExtRef" 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="title">String to be replaced</h4>
            </div>
                <div class="modal-body">
                    <div class="form-group">
                         <input type="text" name="extRefId" id="extRefId" value=""/>
                    </div>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
        </div>
    </div>
</div>

And here's the javascript function:

$(document).on("click", ".getRef", function () {
    var myExtRefId = $(this).data('ext-ref');
    $(".modal-body #extRefId").val('[['+myExtRefId+']]');
    var myTitle = $(this).data('title');
    $(".modal-header #title").text(myTitle);
});

This has helped me to understand how to set the value attribute of an input element but the problem I am having is getting the modal-title to be the text stored in data-title and to appear as a title/header in the modal. Am I using the .text() method in the wrong way?

Apologies in advance as I only have a little bit of experience in HTML and even less in javascript.

ID must be unique in the document, so you only need `$("#title").text()`... do you have duplicate ids that might be causing an issue? The code you have included [seems to be working fine](http://jsfiddle.net/qt974jes/) — musefan, Sep 04 '14 at 16:10
I've just tried `$("#title").text(myTitle)` and it works fine. I don't know why including `.modal-header` was causing it not to work. Anyway, thanks very much! — TheCurlyProgrammer, Sep 04 '14 at 16:18

score 0 · Accepted Answer · answered Sep 05 '14 at 08:05

As per my comment, it seems it was actually the solution for you...

Due to the fact that id attributes are unique to a page (or at least the are meant to be) you don't need to complicate selectors with anything other than the id.

That means that for example:

$(".modal-header #title").text(myTitle);

should be changed to:

$("#title").text(myTitle);

This would also be applicable to your:

$(".modal-body #extRefId").val('[['+myExtRefId+']]');

which would become:

$("#extRefId").val('[['+myExtRefId+']]');

I am not sure exactly why this is solving your issue, it's hard to tell without seeing all of your code, but if it works, then it works!

Displaying a data-* attribute as text within a modal window

1 Answers1