Fancybox content duplicated if hyperlinked clicked more than once

Question

I am working on building a fancybox popup for a SilverStripe site, and while things are almost working, there is still one issue to resolve. If the user clicks the hyperlink more than once, then the content within the fancybox popup id duplicated. I'm not referring to simply clicking too many times before the popup loads--I am referring to when the popup is loaded, closed, then opened again.

Here is what I have setup for the fancybox popup:

var $= jQuery.noConflict();

(function($) {
    $(document).ready(function(){
        $("a#Wait-Times-Click").fancybox({
            'href'   : '#Wait-Times-Modal',
            'titleShow'  : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
            'beforeShow' : function(){
                $.ajax({
                    url: '/home/services/support-services/immediate-care/getWaitTimes',
                    context: this,
                    dataType: "json"
                }).done(function(data) {
                    $( "#Wait_Times" ).append("<strong>" + data[0].Name + ": </strong>" + data[0].WaitTime + "<br>");
                    $( "#Wait_Times" ).append("<strong>" + data[1].Name + ": </strong>" + data[1].WaitTime + "<br>");
                    $( "#Wait_Times" ).append("<strong>" + data[2].Name + ": </strong>" + data[2].WaitTime + "<br>");

                    $( "#Wait_Times_Alt" ).append("<strong>" + data[3].Name + " ER: </strong>" + data[3].WaitTime + "<br>");
                });
            },
            afterClose: function () {
                alert("you have closed fancybox");
            }
        });
    });
}(jQuery));

This is the html content for the popup:

<div style="display:none;">
    <div id="Wait-Times-Modal">
        <h3>Wait Times</h3>
        <p>Primary area wait times:</p>
        <p id="Wait_Times"></p>

        <p>Wait times for other areas:</p>
        <p id="Wait_Times_Alt"></p>
    </div>
</div>

The hyperlink to open the popup is in the Rich Text Editor on one of the site pages (that is what was requested).

I am guessing that in afterClose, I need to somehow clear the content of the popup so it doesn't duplicate when the hyperlink is clicked more than once. But since it's not a form, I don't think I can just call reset(). Is there some other way I can clear/reset the content in the popup when closing it?

KDot KDot · Accepted Answer · 2015-11-09T15:56:32

In your afterClose function (assuming that function is firing when you want it to), you should be able to do:

$("#Wait_Times").html("");

This just sets the html of the element to an empty string. You can do the same for #Wait_Times_Alt

Fancybox content duplicated if hyperlinked clicked more than once

1 Answers