Передача данных объекта в Bootstrap Modal - PullRequest
Новая
       7

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

0 голосов
/ 02 мая 2018

Я хочу передать данные объекта 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>

1 Ответ

0 голосов
/ 02 мая 2018

Вам нужно использовать $('#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.log(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>
...