2015-04-22 8 views
5

Мне удалось выяснить, как захватить внешний json и использовать его в модальном режиме с помощью заданного вручную идентификатора в javascript.Получение идентификатора от кнопки в модуле начальной загрузки

Я застрял в передаче идентификатора с кнопки на URL-адрес JavaScript. Разметка моей кнопки следующая:

<button type="button" class="btn btn-primary btn-sm modal-btn" data-id="10">Details</button> 

В настоящее время мой JS выглядит так;

<script type="application/javascript"> 
     $(document).ready(function() { 
var table = $('#example').DataTable({ 

    dom: 'T<"clear">lfrtip', 
    tableTools: { 
     "sRowSelect": "multi", 
     "aButtons": [ "select_all", "select_none" ], 
     "aoColumnDefs": [ 
      { "bVisible": false, "aTargets": [ 1 ] } 
     ] 
    } 
}); 


$('#example tbody').on('click', 'tr', function (e) { 

    if($(e.target).is('.modal-btn')){ 
     $('#fullDetails').modal('show'); 
      var event = "details.php?id=" + ($(this).data('id')); 
       $.getJSON(event, function(data) { 
        $(".modal-title").text(data.title); 
        $(".modal-audience").text(data.audience); 
        $(".modal-leader").text(data.leader); 
        $(".modal-date").text(data.date); 
        $(".modal-start_time").text(data.start_time); 
        $(".modal-end_time").text(data.end_time); 
        $(".modal-details").text(data.details); 
        $(".modal-venue").text(data.venue); 
        $(".modal-cost").text(data.cost); 
       }, "json"); 

    }else{ 
     $(this).toggleClass('selected'); 
    } 
}); 

$('#button').click(function() { 
    alert(table.rows('.selected').data().length +' row(s) selected'); 
}); 

}); </script> 

линия im, имеющая проблема с is;

var event = "details.php?id=" + ($(this).data('id')); 

Я использую ($ (this) .data ('id')); чтобы попытаться захватить атрибут id из кнопки, но я продолжаю получать неопределенные.

+2

'$ (это)' собирается быть ссылки на 'tr' из исходный '.on ('click', 'tr', function (e)', использовать '.proxy()' или просто использовать 'var event =" details.php? id = "+ ($ (e.target) .data ('id')); ' –

ответ

4

Попробуйте

var event = "details.php?id=" + ($(e.target).data('id')); 

$ (это) указывает на тр, которая была нажата.

0

Изменение линии

var event = "details.php?id=" + $(e.target).data('id'); 

и попробуйте еще раз

+0

Немного объяснений было бы полезно. Что случилось и как это решить? – showdev

2

Попробуйте взять его, как показано ниже

$('#example tbody').on('click', 'tr', function (e) { 
     var target = $(e.target);//Try this change 

    if(target.is('.modal-btn')){ //compare it this way 
     $('#fullDetails').modal('show'); 
      var event = "details.php?id=" + (target.data('id'));//fetch it like this 
       $.getJSON(event, function(data) { 
        $(".modal-title").text(data.title); 
        $(".modal-audience").text(data.audience); 
        $(".modal-leader").text(data.leader); 
        $(".modal-date").text(data.date); 
        $(".modal-start_time").text(data.start_time); 
        $(".modal-end_time").text(data.end_time); 
        $(".modal-details").text(data.details); 
        $(".modal-venue").text(data.venue); 
        $(".modal-cost").text(data.cost); 
       }, "json"); 

    }else{ 
     $(this).toggleClass('selected'); 
    } 
});