How to reuse javascript code to display popups

Question

I have a table which contains a reference to one person on each column. I want to display a popup showing each person's short bio when user clicks each link. The popup should be displayed right next to the where the user clicked.

I found some samples using jquery with qtip, the problem I have is that for each person popup I have to duplicate all the javascript code and I'm thinking there must be a way to reuse it since it's almost the same, the only thing that changes is the content, title and the div id:

This is the jsFiddle.

Here the html code:

    <table border="1">
    <tr>
        <td>
            <div id="johndoe" style="background-color: #f0f0f0; width: 50%; margin: 2em">John Doe</div>
        </td>
                <td>
            <div id="janedee" style="background-color: #f0f0f0; width: 50%; margin: 2em">Jane Dee</div>
        </td>
    </tr>
</table>

And Javascript:

    $(document).ready(function () {
    $("#johndoe").qtip({
        content: {
            text: "Here goes John Doe's short bio blah blah",
            title: {
                text: "Title",
                button: true
            }
        },
        position: {
            target: 'mouse',
            viewport: $(window),
            adjust: {
                method: 'flip shift',
                mouse: false
            }
        },
        style: {
            tip: false,
            widget: false
        },
        show: {
            event: 'click',
            solo: true
        },
        hide: {
            fixed: true,
            event: 'unfocus'
        }
    });
});
$(document).ready(function () {
    $("#janedee").qtip({
        content: {
            text: "Here goes Jane Dee's short bio blah blah",
            title: {
                text: "Title",
                button: true
            }
        },
        position: {
            target: 'mouse',
            viewport: $(window),
            adjust: {
                method: 'flip shift',
                mouse: false
            }
        },
        style: {
            tip: false,
            widget: false
        },
        show: {
            event: 'click',
            solo: true
        },
        hide: {
            fixed: true,
            event: 'unfocus'
        }
    });
});

I don't have a lot of experience with jquery, so I'm asking the experts, how would you approach this with the least amount of javascript code possible? Like reusing functions, just passing the content, title and div id for each person.

Thanks in advance!

beautifulcoder · Accepted Answer · 2014-03-16 12:38:59Z

4

Try the data API and multi-selectors:

<div id="johndoe" data-title="text">John Doe</div>
<div id="janedee" data-title="text">Jane Dee</div>

$("#johndoe, #janedee").qtip({
    content: {
        text: $(this).data('title'),
        title: {
            text: "Title",
            button: true
        }
    },
    ...
});

That should do it.

answered Mar 16, 2014 at 12:38

beautifulcoder

11.4k3 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adolfo Perez Over a year ago

This is great guys! Nice one @NicoO, with data-short-bio I don't even need to pass the div ids.

Collectives™ on Stack Overflow

How to reuse javascript code to display popups

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related