Pergunta sobre javascript, modal-dialog, twitter-bootstrap – twitter bootstrap modal - como passar dados para função callback

0

Existe uma maneira de passar dados adicionais para bootstrap chamada de função modal?

por exemplo, digamos que meu link que faz com que o modal abra tenha um atributo extra nele com alguns dados úteis, como eu poderia referenciar esse atributo?

HTML

<span listid="80" href="#editTaskList" data-toggle="modal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>

JS

$('#editTaskList').on('show', function () {
    // get the source of the click, and then get the data i need.
});

Sua resposta

3   a resposta
1

Eu sei que esta é uma pergunta antiga, mas esta é a primeira coisa que encontrei no google. Então, eu quero colocar algumas informações importantes aqui ...

Você precisa colocar sua função de retorno de chamada ligada em eventos antes de chamar o modal, por exemplo:

$('#modal').on('shown', function(){ 
     // Do something when the modal is loaded
});
$("#modal").modal();

Isso é muito importante e me ajudou muito, então, aqui está ...

1

Como isso -

<span id="modal_opener" data-extrastuff="stuff" listid="80" href="#editTaskList" data-toggle="modal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>

$('#modal_opener').click(function() {
    var stuff_i_want = $(this).attr('data-extrastuff');
});
Sim isso é verdade. mas eu sinto que é um tipo de hack - usar o callback on show me permite realmente sequenciar os eventos dentro da função, ao invés de fazer uma condição de corrida contra o evento click separado. Kristian
3

Isso poderia funcionar para você?

<span listid="80" href="#editTaskList" data-toggle="datamodal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
var $editTaskList = $('#editTaskList');

$('body').on('click.modal.data-api', '[data-toggle="datamodal"]', function (e) {
    var $this = $(this);
    $editTaskList.data('anyAttr',$this.data('anyAttr'));
    $editTaskList.modal('show');
    e.preventDefault();
})

$editTaskList.on('show', function () {
    var myData = $editTaskList.data('anyAttr');
});

Perguntas relacionadas