#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