Как получить значения данных загрузочного модала с помощью jQuery или javascript при нажатии кнопки внутри модала?

#javascript #jquery #twitter-bootstrap #bootstrap-modal

#javascript #jquery #twitter-bootstrap #bootstrap-модальный

Вопрос:

Я хочу получить значения данных модального загрузчика при нажатии кнопки внутри модального. Вот мой модальный —

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Cancel</h4>
                                </div>
                                <div class="modal-body"> 
                                    Are you sure you want to cancel this?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="savebutton" class="btn btn-success" >Yes</button>  
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                                </div>
                            </div>
                        </div> 
                    </div>
  

И вот как я передаю данные в модальный —

Обновить —

     <button data-target='#myModal' id='link' data-toggle='modal' data-id="1"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 1</button>
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="2"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 2</button>
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="3"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 3</button>
    ...
    ..
    .
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="n"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel n</button>
  

Модальный можно вызвать с любой из множества кнопок, и мне нужно получить идентификатор данных только соответствующей кнопки. например. — если я нажму на кнопку «Отмена 1», я должен получить идентификатор данных как 1 после нажатия кнопки «Да» в модальном.

Я хочу получить модальное значение данных поля «id», которое равно 1234, при нажатии кнопки «Да» в этом модале с использованием jQuery или javascript.

Комментарии:

1. var id=document.getElementById(‘savebutton’).getAttribute(«data-id»);

2. Спасибо за помощь. Я пытался, но вместо значения возвращается значение null. Вот jsfiddle- jsfiddle.net/Au9tc/4771

Ответ №1:

Я изменил вашу скрипку: http://jsfiddle.net/exr00e0d /

вы взяли href. вместо этого я взял цель (модальную).

 $('.cancel_modal').click(function() {
   //alert('called');
    // we want to copy the 'id' from the button to the modal
    var href = $(this).data('target');
    var id = $(this).data('id');

    // since the value of href is what we want, so I just did it like so
    alert(href);
    // used it as the selector for the modal
    alert(id);
    $(href).data('id', id);
});
  

Ответ №2:

попробуйте это

 function getid() {
var id=document.getElementById('savebutton').getAttribute("data-‌​id");
return id;
}

<button type="button" id="savebutton" class="btn btn-success" onclick="getid()" >Yes</button> 
  

Комментарии:

1. Спасибо за помощь. Я пытался, но вместо значения возвращается значение null. Вот jsfiddle- jsfiddle.net/Au9tc/4771

2. @gauravparmar вы пропустили data-* атрибут данных ie, data-id=»1234″

3. @gauravparmar Я обновил проверку скрипта сейчас … jsfiddle.net/Au9tc/4777

4. На самом деле у меня есть несколько динамически сгенерированных кнопок «Отмена» для открытия модала, и я хочу получить идентификатор данных соответствующей кнопки при нажатии «Да» внутри модала. Вот обновленный jsfiddle, если вы могли бы, пожалуйста, помочь — jsfiddle.net/gauravparmar/Au9tc/4812

Ответ №3:

В jQuery

 $('#savebutton').click(function() {
    var id = $('#link').data('id');
    // if for some reason, the code above doesn't work,
    // $('#link').attr('data-id');
    console.log(id);
});
  

Редактировать:

Глядя на ваш jsfiddle

 $('#link').click(function() {
    // we want to copy the 'id' from the button to the modal
    var target = $(this).attr('target');
    var id = $(this).data('id');

    $(target).data('id', id);
});

$('#savebutton').click(function() {
    // now we grab it from the modal
    var id = $('#addBookDialog').data('id');

    console.log(id);
});
  

Комментарии:

1. Спасибо, но это не работает. Пожалуйста, скажите, что я делаю не так? Вот jsfiddle — jsfiddle.net/Au9tc/4776

2. я только что снова заглянул в ваш jsfiddle, я понял, что в вашем параметре jsfiddle «тип загрузки» должно быть «onLoad» … даже с моим старым кодом это должно работать.

3. Извините. Я не очень хорошо разбираюсь в загрузочных модалах. Я пытался использовать вышеупомянутое решение, но оно не работает для меня, когда у меня есть несколько модальных ссылок, открывающих один и тот же идентификатор, что и в моем случае. Может быть, я сделал что-то не так. Не могли бы вы, пожалуйста, проверить этот обновленный jsfiddle — jsfiddle.net/gauravparmar/Au9tc/4792

4. у вас не может быть нескольких элементов с одинаковым идентификатором в вашей скрипке. В раскрывающемся списке javascript я изменил тип загрузки на «onLoad», чтобы мой скрипт выполнялся. Вот новая скрипка. jsfiddle.net/Au9tc/4793

5. На самом деле у меня есть несколько динамически сгенерированных кнопок «Отмена» для открытия модала, и я хочу получить идентификатор данных соответствующей кнопки при нажатии «Да» внутри модала. Вот обновленный jsfiddle, если вы могли бы, пожалуйста, помочь — jsfiddle.net/gauravparmar/Au9tc/4812