Zurb Foundation 4 Reveal modal - loading modal title, content, etc. dynamically

Question

I've been using Zurb's Foundation for a while and recently came across an instance where I needed to:

1) load content for the modal via AJAX (np there, easy enough)

2) Add an element to the modal to contain a dynamic title

What happens, when I code a reveal to have, say, an H3 for a title.. the AJAX call overwrites everything except the reveal-close link within the modal HTML.

What I am aiming to do is set the url, title and other options for the modal within the links data attributes, like this:

<a href="javascript:void(0);"
    data-target-url="/users/view.php?member_id={$conn->id}"
    data-modal-title="Contact Information"
    data-modal-class="large"
    data-button-id="modalButton1"
    data-button-txt="CLICK ME"                      
    class="bb-modal">

    <img src="/users/avatar.php?member_id={$conn->id}" alt="" />
</a>

Here is the modal HTML code:

    <div id="bb-modal" class="reveal-modal" data-reveal>
        <h3 class="modal-title">Information</h3>
        <div class="modal-body"></div>
        <div class="modal-footer"> 
            <button class="btn btn-primary modalsave" id="">Save</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>

And here is the JS I am using, to set VARS to the data attributes and then to load the content manually into the .modal-body div:

        $('body').on('click','.bb-modal',function(e) {
        e.preventDefault();

        var targeturl = $(this).data('target-url'),
            modaltitle = $(this).data('modal-title'),
            modalclass = $(this).data('modal-class'),
            buttonid = $(this).data('button-id'),
            buttontxt = $(this).data('button-txt');

            //set the text of the modal title
            $('#bb-modal .modal-title').html(modaltitle);

            //add class to modal, if needed, to override modal size/placement
            $('#bb-modal').addClass(modalclass);

            // set the text of the save button
            $('#bb-modal .modalsave').html(buttontxt);

            // set the button.modalsave id so we can target the click function of it.
            $('#bb-modal .modalsave').attr("id",buttonid);  

            $('#bb-modal .modal-body').load(targeturl,function(response, status, xhr) {
                    if (status === 'error') {
                        $(target+ '.modal-body').html('<h2>Oh No!</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                    }

            }).foundation('reveal', 'open');    // end load

    }); // end on click

There has GOT TO BE a cleaner, more efficient way to make this work.. so I can set the title, button text/ID, etc via the links data attributes and then load the modal without Foundations Reveal JS overwriting ALL the content in the modal...

Any help is GREATLY appreciated!.... as of now, my desk has a large dent, and my head is killing me :D

revive revive · Accepted Answer · 2013-12-28T00:59:00

I decided to stop using the Foundation Reveals native functions and utilize jQuery's ajax to load the content where I needed it.. so, here is what I ended up with:

LINK TO FIRE MODAL:

<a href="javascript:void(0);"
    data-target-url="http://fiddle.jshell.net/revive/mkfty/show/"
    data-modal-title="Contact Information"
    data-modal-class="large"
    data-button-id=""
    data-button-txt="TEST"                      
    class="button bb-modal">Click Me
</a>

MODAL CODE RIGHT BEFORE CLOSING BODY TAG:

    <div id="bb-modal" class="reveal-modal" data-reveal>
        <h3 class="modal-title">Information</h3>
        <div class="modal-body"></div>
        <div class="modal-footer"> 
            <button class="btn btn-primary modalsave" id="">Save</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>

JS CODE FOR MODAL, WITH OPTIONS TO SHOW/HIDE MODAL FOOTER (and there buttons) WITHIN DOCREADY AND AFTER THE FOUNDATION() CALL (also includes js for close modal link in footer since they did away with data-dismiss="modal"):

        $('body').on('click','.bb-modal',function(e) {
        e.preventDefault();

        var modal = $('#bb-modal'),
            targeturl = $(this).data('target-url'),
            modaltitle = $(this).data('modal-title'),
            modalclass = $(this).data('modal-class'),
            buttonid = $(this).data('button-id'),
            buttontxt = $(this).data('button-txt');

            //set the text of the modal title
            modal.find('.modal-title').html(modaltitle);

            //add class to modal, if needed, to override modal size/placement
            modal.addClass(modalclass);

            // set the text of the save button
            modal.find('.modalsave').html(buttontxt);

            // set the button.modalsave id so we can target the click function of it.
            modal.find('.modalsave').attr("id",buttonid);  

            if(buttonid != '' || buttontxt != ''){
                modal.addClass('show-footer');
            }

            modal.foundation('reveal', {
                open: function () {    
                    $.ajax({
                        url: targeturl,
                        dataType: "html"
                    })
                    .done(function( html ) {
                        modal.find('.modal-body').html(html);
                    })
                    .fail(function( jqXHR, textStatus ) {
                        modal.find('.modal-body').html( "Request failed: " + textStatus );
                    });
                },
                close: function () {

                }
            }).foundation('reveal','open');

            modal.on('closed', function(){ 
                modal.removeClass(modalclass);                  
                modal.find('.modal-body').empty();
                modal.find('.modal-footer').hide();
                modal.find('.modal-title').html('');
                modal.find('.modalsave').html('Save').removeAttr("id");
            }); // end on close

        }); // end on click

        $('[data-dismiss="modal"]').on('click',function(){
            $(this).closest('.reveal-modal').find('.close-reveal-modal').trigger('click');
        });

Zurb Foundation 4 Reveal modal - loading modal title, content, etc. dynamically

1 Answers