Question

53

Dynamically build Twitter Bootstrap modal

rated 0 times [ 56] [ 3] / answers: 1 / hits: 73177 / 10 Years ago, tue, march 11, 2014, 12:00:00

I am building a Rails application, and I want to place the content from a Rails partial into the modal via AJAX.

In a Twitter Bootstrap 2.3.2 modal, I read via the documentation that you can load content via ajax using the remote key.

http://getbootstrap.com/2.3.2/javascript.html#modals

However, this only allows content to be injected into the .modal-body, rather than building the whole modal dynamically.

Is there a way to build the entire modal, including .modal-header, .modal-footer, dynamically with JS?

It seems very clunky to do this with a string, like follows:

partial = render_to_string(:partial => 'some-partial').gsub(%{}, %{'}).gsub(/'/,\\').gsub(n, )

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kerryoliviaa

Add To Favorites

Follow

Total Points: 221

Total Questions: 102

Total Answers: 117

Location: Sint Maarten

Member since Tue, Mar 29, 2022

2 Years ago

kerryoliviaa questions

1 Using useContext and useReducer in NextJS and reading null as context

Sun, May 15, 22, 00:00, 2 Years ago

1 Material UI Input not detecting when enter key is pressed

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Nodejs async/await mysql queries

Fri, Mar 6, 20, 00:00, 4 Years ago

1 How to trigger keydown event only for alphanumeric and special characters in Angular7?

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to create singleton classes in Javascript?

Tue, Jan 7, 20, 00:00, 5 Years ago

View All

answered 10 Years ago jeffn · Accepted Answer

Update:

Since posting this, I've found an elegant bootstrap 3 modal wrapper function here, which doesn't require adding a div to the html code.

Here's a code sample that demonstrates this. To use, just add a div in your <body> (inside bootstrap's <div class="container">, for example:

<div id="idMyModal"></div>

and then you can use it via:

var header = "This is my dynamic header";

var content = "This is my dynamic content";

var strSubmitFunc = "applyButtonFunc()";

var btnText = "Just do it!";

doModal('idMyModal', header, content, strSubmitFunc, btnText);

To close the modal, issue a call to hideModal, also defined below:

function doModal(placementId, heading, formContent, strSubmitFunc, btnText)

{

    var html =  '<div id="modalWindow" class="modal hide fade in" style="display:none;">';

    html += '<div class="modal-header">';

    html += '<a class="close" data-dismiss="modal">×</a>';

    html += '<h4>'+heading+'</h4>'

    html += '</div>';

    html += '<div class="modal-body">';

    html += '<p>';

    html += formContent;

    html += '</div>';

    html += '<div class="modal-footer">';

    if (btnText!='') {

        html += '<span class="btn btn-success"';

        html += ' onClick="'+strSubmitFunc+'">'+btnText;

        html += '</span>';

    }

    html += '<span class="btn" data-dismiss="modal">';

    html += 'Close';

    html += '</span>'; // close button

    html += '</div>';  // footer

    html += '</div>';  // modalWindow

    $("#"+placementId).html(html);

    $("#modalWindow").modal();

}





function hideModal()

{

    // Using a very general selector - this is because $('#modalDiv').hide

    // will remove the modal window but not the mask

    $('.modal.in').modal('hide');

}