Данные JSON в Bootstrap modal

Question

Я хочу поместить данные JSON в Bootstrap Modal.

Пример JSON:

(/list.php?action=cam_settings&id=1) 
{ 
"id":"1", 
"title":"TEST", 
"enabled":"1", 
"source":"rtsp://192.168.1.10/user=admin_password=tlJwpbo6_channel=1_stream=0.sdp?real_stream" 
} 

(/list.php?action=cam_settings&id=2) 
{ 
"id":"2", 
"title":"TEST 2", 
"enabled":"1", 
"source":"rtsp://192.168.1.123/user=admin_password=tlJwpbo6_channel=1_stream=0.sdp?real_stream" 
} 

Образец Modal:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<a id="1_ajax" data-toggle="modal" data-target="#cam_settings" class="btn btn-warning">ID 1</a> 
 
<a id="2_ajax" data-toggle="modal" data-target="#cam_settings" class="btn btn-warning">ID 2</a> 
 

 
<!-- Camera Settings Modal --> 
 
<div class="modal fade" id="cam_settings" tabindex="-1" role="dialog" aria-labelledby="cam_settings"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="cam_settings">Настройки камеры</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
\t \t <form action="" method="post"> 
 
\t \t <fieldset> 
 
      <div class="control-group"> 
 
       <label class="control-label" for="id">ID</label> 
 
       <div class="controls"> 
 
       <input type="text" id="id" name="id" required class="form-control input-lg"> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="control-group"> 
 
       <label class="control-label" for="name">Название</label> 
 
       <div class="controls"> 
 
       <input type="text" id="name" name="name" required class="form-control input-lg"> 
 
       </div> 
 
      </div> 
 
\t \t 
 
      <div class="control-group"> 
 
       <label class="control-label" for="source">Источник</label> 
 
       <div class="controls"> 
 
       <input type="text" id="source" name="source" required class="form-control input-lg"> 
 
       </div> 
 
      </div> 
 
\t \t 
 
\t \t \t <div class="checkbox"> 
 
\t \t \t \t <label> 
 
\t \t \t \t <input type="checkbox"> Камера включена 
 
\t \t \t \t </label> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t <input class="btn btn-primary" type="submit" value="Сохранить"> 
 
\t \t </fieldset> 
 
\t \t </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Удалить камеру</button> \t 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Вопрос заключается в том, как передать идентификатор (ID = "1_ajax") из кнопок GET запрос и как разобрать ответ JSON? Нужен ли мне AngularJS? Или можно сделать с jquery?

Answer 1

Я создал функцию jQuery для заполнения модального кода для меня, он работает со всеми элементами DOM, а не только с модалами. Вы можете увидеть его в действии здесь: https://jsfiddle.net/Loenix34/x9y30jnw/3/

Вот код

if($) { 
    $.fn.fill = function(prefix, data) { 
     $(this).each(function(key, value) { 
      var container = $(this); 
      $.each(data, function(key, value) { 
       container.find("."+prefix+key).each(function() { 
        var element = $(this); 
        if(element.is("img")) { 
         element.attr("src", value); 
        } else 
        if(element.is("a")) { 
         element.attr("href", value); 
        } else 
        if(element.is(":input")) { 
         element.val(value); 
        } else { 
         element.text(value); 
        } 
       }); 
      }); 
     }); 
    }; 
} 

Как вы можете видеть, она заполняет общие элементы с текстом, ввод в качестве значения, якорь как ссылку и изображение в качестве источника.

Наслаждайтесь!