Loading another page/content (aka "remote" content) into a Bootstrap Modal has been the bane of many developer, and great solutions like this one work:
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-content').load($(this).attr('href'));
});
Using the above allows you to make one script call, and have it apply for any pages that have modals that load content, be it local or remote. It should be noted that for "local" modals, you cannot have an href
attribute (even one with a hash for the value) for this to work for both (local and remote). This could be included in a footer file or any other globally-included file in your application so it only resides in one place, and works for every modal in your application.
However, with jQuery 3, the load()
method has been depreciated, so how would one go about loading remote modal content in light of this?
I know you can use ajax()
, but is there a way to construct it to be more 'dynamic' like my example above so there isn't a need to have a unique script for every modal?
Load was removed as the shortcut event handler binding, not for loading external resources.
--binding, removed
http://api.jquery.com/load-event/
--method to load ajax data, still valid
http://api.jquery.com/load/
As such, since your logic is using the second version, it is still valid in 3x.