How does the 'Shown.bs.modal' event work?

Asked

Viewed 2,910 times

2

The doubt is simple :

How the event works¹ shown.bs.modal in Boostrap CSS?

How could I create something like this event ?

¹ - Not how it works to use this event, but how the plugin has a special event to identify that the modal has been fully loaded, and which javascript features are used for this.

javascript jquery bootstrap-3

  • It uses tools that jQuery provides through on and trigger. This would already answer the question or be included in the scope as jQuery defines custom events as well?

  • @Andersoncarloswoss I wanted to know how to create one of these, I already know how to use the on and Trigger but I can’t apply to this concept of identifying an action with a fictional event like this: 'onRequireByAjax', which would identify that an ajax request was made, kind of make 'on' identify my custom event

  • The methods themselves create this event: you can do element.on("qualquerCoisa", ...) to monitor the event and fire it when desired with element.trigger("qualquerCoisa"). In case, I believe that when you make the AJAX request, you would trigger the event.

  • @Andersoncarloswoss but do I always have to pull the event when I make the ajax request? The event will always be the same, it is a unique security validation for everything, there is no way to do something to identify all the requests in a single master event ? I say this because I have an event fired in 'Shown.bs.modal' that triggers a check for all modals in a single call without needing to indicate everywhere they call modals.

1 answer

3


The event shown.bs.modal is a custom Bootstrap event related to modals. Internally, Bootstrap uses functions that jQuery implements to work with such events: the functions are on and trigger. To trigger an event, regardless of which one, the function is used trigger:

element.trigger("meuEventoCustomizado");

And to monitor the occurrence of the event, the function is used on:

element.on("meuEventoCustomizado", event => alert("Meu Evento Customizado"));

In this case, internally Bootstrap triggers the event shown.bs.modal with the function trigger. From the documentation, this event is triggered whenever a modal is finished being rendered and looking at the source code of this library, we can see:

const transitionComplete = () => {
  if (this._config.focus) {
    this._element.focus()
  }
  this._isTransitioning = false
  $(this._element).trigger(shownEvent)
}

Code snippet from the official repository, lines 263-269.

Notice there’s a call from $(this._element).trigger(shownEvent), where shownEvent is defined as:

const shownEvent = $.Event(Event.SHOWN, {
  relatedTarget
})

Code snippet from the official repository, lines 259-261.

Where Event is defined by:

const Event = {
  HIDE              : `hide${EVENT_KEY}`,
  HIDDEN            : `hidden${EVENT_KEY}`,
  SHOW              : `show${EVENT_KEY}`,
  SHOWN             : `shown${EVENT_KEY}`,
  FOCUSIN           : `focusin${EVENT_KEY}`,
  RESIZE            : `resize${EVENT_KEY}`,
  CLICK_DISMISS     : `click.dismiss${EVENT_KEY}`,
  KEYDOWN_DISMISS   : `keydown.dismiss${EVENT_KEY}`,
  MOUSEUP_DISMISS   : `mouseup.dismiss${EVENT_KEY}`,
  MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
  CLICK_DATA_API    : `click${EVENT_KEY}${DATA_API_KEY}`
}

Code snippet from the official repository, lines 45-57.

Finally, EVENT_KEY is defined by:

const DATA_KEY = 'bs.modal'
const EVENT_KEY = `.${DATA_KEY}`

Code snippet from the official repository, lines 23-24.

If you look at all the values, you’ll see that the call is actually:

$(this._element).trigger("shown.bs.modal")

The fact that the event is always triggered for any modal is due to the reason that the call of trigger is done within the method that is invoked for all page modals. If you are interested in creating an event that is triggered for all AJAX requests, you will need to call the function trigger within a method that performs the AJAX call. If you are using the function itself $.ajax jQuery to make the calls, you can create a kind of proxy function:

function meuAJAX(url, settings) {
    // Dispara o seu evento:
    $(document).trigger("onRequireByAjax");
    // Efetua a chamada AJAX:
    $.ajax(url, settings);
}

And so, whenever you need to make an AJAX call:

meuAJAX({
  url: "localhost",
  method: "get",
  ...
});

And to monitor the event:

$(document).on("onRequireByAjax", event => alert("AJAX feito"));

Browser other questions tagged javascript jquery bootstrap-3

You are not signed in. Login or sign up in order to post.