Передача данных объекта в Bootstrap Modal

Я хочу передать данные объекта JavaScript в каждое конкретное модальное окно объекта, когда пользователь нажимает доступную кнопку. Однако, когда я тестирую и нажимаю кнопку, происходят две вещи. Во-первых, ничего не отображается, а если что-то появляется, это будут одни и те же данные для каждого модального окна, обычно это данные последнего объекта.

var radio = [
    {
        name:"106 power",
        address:"1620 sw 11th st",
        phone:"305-892-9927"
    },
    {
        name:"99 jamz",
        address:"1900 sw 19th st",
        phone:"305-892-9900"
    },
	{
        name:"cool jamz",
        address:"3450 sw 167th st",
        phone:"304-892-9900"
    }

    ]

    for (i = 0; i < radio.length; i++){

    document.getElementById('box').innerHTML += '<div class = "box2">' + 
    radio[i].name + '<br>' + radio[i].address + '<br> <button type = "button class = "button" data-toggle = "modal" data-target = "#myModal"> Click me! </button></div>';

    };

    $(document).ready(function(){
    $(".button").on('click',function(){
       $("#main-content").html('<div class = "box3">' + radio[i].name + '<br>' + 
    radio[i].address + '<br>' + radio[i].phone + '</div>');
	 
    });
    
});

.box{
    width:400px;
    height:800px;
    background-color:grey;
    }
    .box2{
    width:400px;
    height:100px;
    background-color:white;
    }
    .box3{
    width:400px;
    height:100px;
    background-color:green;
    }

<!DOCTYPE html>

    <html lang = "en-US">

    <head>


    <title>Help</title>
    <link rel = "stylesheet" 
    href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
    integrity = "sha384- 
    Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin = "anonymous">



    <script src = "https://code.jquery.com/jquery-3.3.1.js" integrity = "sha256-    
    2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = " crossorigin = "anonymous"> 
    </script>
     


    <script 
    src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
    integrity = "sha384- 
    JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
    crossorigin = "anonymous"></script>
    </head>

    <body>
    <div id = "box" class = "box"></div>

    <!-- Modal -->
    <div id = "myModal" class = "modal fade" role = "dialog">
    <div class = "modal-dialog">

    <!-- Modal content-->
    <div class = "modal-content">
    <div class = "modal-header">
    <button type = "button" class = "close" data-dismiss = "modal">&times;            
    </button>
    <h4 class = "modal-title">Modal Header</h4>
     </div>
     <div class = "modal-body " id = "main-content">
    <p>Some text in the modal.</p>
    </div>
    <div class = "modal-footer">
    <button type = "button" class = "btn btn-default" data- dismiss = "modal">Close
    </button>
    </div>
    </div>

    </div>
    </div>
    </body>
</html>

javascript object bootstrap-modal

02.05.2018 05:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

6 019

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно использовать $('#myModal').on('shown.bs.modal'), чтобы поймать событие, когда отображается модальное окно, и использовать e.relatedTarget, чтобы получить текущую кнопку, которую вы нажимаете.

Я добавил data-index на кнопку, чтобы мы могли получить текущее радио

var radio = [
    {
        name:"106 power",
        address:"1620 sw 11th st",
        phone:"305-892-9927"
    },
    {
        name:"99 jamz",
        address:"1900 sw 19th st",
        phone:"305-892-9900"
    },
	{
        name:"cool jamz",
        address:"3450 sw 167th st",
        phone:"304-892-9900"
    }

    ]

    for (i = 0; i < radio.length; i++){

    document.getElementById('box').innerHTML += '<div class = "box2">' + 
    radio[i].name + '<br>' + radio[i].address + '<br> <button type = "button class = "button" data-index = "' + i + '" data-toggle = "modal" data-target = "#myModal"> Click me! </button></div>';

    };

$(document).ready(function(){
    $('#myModal').on('shown.bs.modal', function(e) {
      var i = $(e.relatedTarget).data('index');
      console.info(i);
      $("#main-content").html('<div class = "box3">' + radio[i].name + '<br>' + 
    radio[i].address + '<br>' + radio[i].phone + '</div>');
  })
    
});

.box{
    width:400px;
    height:800px;
    background-color:grey;
    }
    .box2{
    width:400px;
    height:100px;
    background-color:white;
    }
    .box3{
    width:400px;
    height:100px;
    background-color:green;
    }

<!DOCTYPE html>

    <html lang = "en-US">

    <head>


    <title>Help</title>
    <link rel = "stylesheet" 
    href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
    integrity = "sha384- 
    Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin = "anonymous">



    <script src = "https://code.jquery.com/jquery-3.3.1.js" integrity = "sha256-    
    2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = " crossorigin = "anonymous"> 
    </script>
     


    <script 
    src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
    integrity = "sha384- 
    JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
    crossorigin = "anonymous"></script>
    </head>

    <body>
    <div id = "box" class = "box"></div>

    <!-- Modal -->
    <div id = "myModal" class = "modal fade" role = "dialog">
    <div class = "modal-dialog">

    <!-- Modal content-->
    <div class = "modal-content">
    <div class = "modal-header">
    <button type = "button" class = "close" data-dismiss = "modal">&times;            
    </button>
    <h4 class = "modal-title">Modal Header</h4>
     </div>
     <div class = "modal-body " id = "main-content">
    <p>Some text in the modal.</p>
    </div>
    <div class = "modal-footer">
    <button type = "button" class = "btn btn-default" data- dismiss = "modal">Close
    </button>
    </div>
    </div>

    </div>
    </div>
    </body>
</html>

02.05.2018 06:36

Другие вопросы по теме

Как использовать JS-сортировку для сортировки нескольких элементов

DOORS Дата удаления объекта

Геттеры и сеттеры Ada

Если и утверждения в Business Objects / Webi

HashMap containsKey всегда возвращает false для той же строки

Функция возвращает NaN, когда этого не должно быть

Чтение файла в вектор объектов класса

Отфильтруйте данные с помощью динамических и вложенных условий фильтрации с помощью Lodash

Тонны модулей поставляются с console.info, но они ничего не возвращают

HashMap <Integer, Object> присваивает одинаковое значение всем ключам

Передача данных объекта в Bootstrap Modal

Ответы 1

Другие вопросы по теме

Похожие вопросы