How do you pass data using "data" fields?

Question

I am trying to make some fields "editable" on my page and I am trying to "pass" data from an html element to a modal popup.

So far, I create an HTML link

<h1 class="head-title animated bounceInDown animation-delay-8">my header
                <a href="#" data-toggle="modal" data-target="#editField" data-field="header"><i class="fa fa-pencil-square-o"></i></a>
            </h1>

When I click on that, it shows the modal popup

<div tabindex="-1" class="modal fade" id="editField" role="dialog" aria-hidden="true" aria-labelledby="editFieldLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title" id="editFieldLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                NEED DATA HERE
            </div>
            <div class="modal-footer">
                ...
            </div>
        </div>
    </div>
</div>

What I'd like to do is somehow get the content, display to use user for edit. I know I can use javascript on the href to set some variable, but I was wondering if there was a better way.

No you cannot use `href` .... or may be you can. Care to show use how? Where's the data you want to use in the modal? You gave us the destination but not the source. What have you tried? — PeterKA, Aug 19 '14 at 01:03
@Dan - That sure does look like what I want doesn't it. It worked :) Not sure I can mark as answer unless you reply outside of comment, but thanks! — Dave, Aug 19 '14 at 01:08

score 0 · Accepted Answer · answered Aug 19 '14 at 01:18

DEMO

It's quite straight forward. If the element you click is the following:

<a data-some-value="some value" href="#" data-toggle="modal" data-target="#editField" data-field="header">........

Then you can use the following to read and use data-some-value, for example:

$(function() {
    $('a[data-target="#editField"]').on('click',function(e) {
        e.preventDefault();
        var selector = $(this).data('target'),
            somevalue = $(this).data('some-value');
        $( 'div.modal-body', selector ).html( somevalue );
    });
});

That actually does work quite well. Dan really gave me the answer I need, but thumbs up for the extra effort here. Thanks! — Dave, Aug 19 '14 at 03:43

How do you pass data using "data" fields?

1 Answers1