CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railstwitter-bootstrap
Tasos Anesiadis
Tasos Anesiadis

Reputation: 1150

Rails, Bootstrap, trying to dynamically load modal does not work as expected

OK I have a link to modal in html, which works perfectly. As you can see the link in there also, but I don't need it in my app.

<div class="block">
    <a data-toggle="modal" class="btn btn-danger btn-block" role="button" href="#editor-modal">Run modal with WYSIWYG editor</a>

    <!-- Modal with WYSIWYG editor -->
    <div aria-hidden="true" style="display: none;" id="editor-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title"><i class="icon-quill2"></i> WYSIWYG editor inside modal</h4>
                </div>



                <div class="modal-footer">
                    <button class="btn btn-warning" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /modal with WYSIWYG editor -->

</div>

Instead of having a ton of modals in my app, I want to load them dynamically.

I tried to define a placeholder and load the modal there and then show it. I have done this a couple of times, but this time it does not work for some reason.

So in my index.html.erb I got

<div id="modal-placeholder" class="block"> </div>

I got my partial _addNewModal.html.erb:

<!-- Modal with WYSIWYG editor -->
<div aria-hidden="true" style="display: none;" id="editor-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><i class="icon-quill2"></i> WYSIWYG editor inside modal</h4>
            </div>



            <div class="modal-footer">
                <button class="btn btn-warning" data-dismiss="modal">Close</button>
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- /modal with WYSIWYG editor -->

And I load it with the following code.

$('#modal-placeholder').html("<%= j render 'news/modals/addNewModal'%>")
$('#editor-modal').modal('toggle');

I don't understand what is wrong here. I tried to replicate the html code from my template, but for some reason it does not work.

Any help appreciated.

Edit: As I checked, the modal-placeholder actually is filled with the data, but the modal does not show up.I tried both

$('#editor-modal').modal('toggle');

&

$('#editor-modal').modal('toggle');

Any ideas?

Upvotes: 0

Views: 772

Answers (1)

Sravan
Sravan

Reputation: 18647

The j render by default search for a js.erb file

When rendering partials inside Javascript code, you should use the escape_javascript method, like so

$('#modal-placeholder').html("<%= escape_javascript render(:partial => 'news/modals/addNewModal') %>");

If you explicitly declare the partial key then it will search for your html.erb file instead of js.erb

So try either the above command or this.

$('#modal-placeholder').html("<%= j render(:partial => 'news/modals/addNewModal') %>");

For the toggling, remove inline display: none; from the form and add a style for it,

#editor-modal
 {
   display: none;
 }

Then the toggle will work.

$('#editor-modal').toggle();

Upvotes: 1

Related Questions