Bootstrap modal / using intercooler with content after page load

Charles McLaughlin

unread,

Feb 15, 2019, 5:30:13 PM2/15/19

to intercooler-js

I'm trying to use Intercooler with Bootstrap 4 modals. I'd like to pass some data to the modal to indicate what page to load (ideally using intercooler) and do form validation/submission inside the modal using Intercooler.

I started with this Bootstrap tutorial:

https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

So I have this button and modal:

<button type="button" class="btn btn-secondary btn-sm float-right"

data-toggle="modal" data-target="#edit-modal"

data-xxx="XXX">Edit</button>

</button>

</div>

<div id="edit-form">This is dynamically replaced...</div>

</div>

Cancel</button>

</div>

Basically, when the modal pops up I want to load a URL with the button value appended. I haven't been able to figure out how to do that with ic-src... so currently I have this javascript that loads the form into the modal:

$(document).on('show.bs.modal', '#edit-modal', function(event) {

var button = $(event.relatedTarget) // Button that triggered the modal

var xxx = encodeURIComponent(button.data('xxx')) // Extract info from data-xxx value

$('#edit-form').load('/edit/' + xxx) // Load the edit form

});

So my first question is there a better way to do this? Perhaps something more intercooler-ish? As mentioned above I'd like to use ic-src instead of jquery directly.

But I have a larger problem I'm stuck on now...

Inside the /edit/xxx form, I'm trying to use ic-post-to on a form field... something like this:

<input class="form-control" name="name"

ic-post-to="/edit/xxx"

ic-target="closest div"

ic-replace-target="true">

But ic-post-to is not triggered. I guess it has something to do with the manual jquery .load() call and the form input field not being present while the page loads. I'm reading about Intercooler events and the Javascript API now thinking perhaps I need to trigger some sort of refresh... But this is all pretty new to me so I'd really appreciate any help.

Thanks

Charles McLaughlin

unread,

Feb 15, 2019, 6:52:16 PM2/15/19

to intercooler-js

I found Intercooler.processNodes()... This helped!

https://github.com/intercoolerjs/intercooler-js/issues/112

Carson Gross

unread,

Feb 21, 2019, 12:34:09 PM2/21/19

to intercooler-js, Charles McLaughlin

:)

For the bootstrap pop up, I think that a custom event might be the best option.

As far as the form goes, if you are loading HTML "out of band" (that is, HTML is being added to the DOM outside the normal request cycle or via intercooler) you are going to need to call processNodes().

Cheers,

Carson

--
You received this message because you are subscribed to the Google Groups "intercooler-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to intercooler-j...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Justin Sampson

unread,

Feb 21, 2019, 4:41:11 PM2/21/19

to Carson Gross, intercooler-js, Charles McLaughlin

Here's a thought -- I'm not sure if this will work, but can the button trigger both Intercooler and Bootstrap to do something at the same time? That is, use data-toggle and data-target to open the modal dialog, and also use ic-get-from and ic-target to replace the contents at the same time, like this:

<button type="button" class="btn btn-secondary btn-sm float-right"

data-toggle="modal" data-target="#edit-modal"

ic-get-from="/edit/XXX" ic-target="#edit-form">Edit</button>

That way, Intercooler is taking care of loading the form into the DOM, so you don't need processNodes() -- or any custom JavaScript at all. :)