JSFiddle - React, Tailwind, and code Playground

by Daniel Brose

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<table id="table"></table>
<div style="margin-top:50px;"> <b>fix:</b> http://stackoverflow.com/questions/12449890/reload-content-in-modal-twitter-bootstrap
    <p>Not only way to fix, but explicitly calling load() instead of relying on data-toggle seems to work in all cases.</p>
    <p>Though care is also needed when setting up handlers, so running inside anonymous function on refresh of table contents is ideal. Current doesnt include that, but it would be as simple as making handler for bootstrap-table.OnPostBody (see doco and examples, very easy) and scoping that 'setup code' to affect just table.</p>
    <p>Other changes you should consider include no inline printing of modal. 
        <br/>Your reloading content, so just 1 modal per table is really all you need. 
        <br/>You could even change '.modal-content' load to '.modal-body' load and remove the extra html from the data request, if you know it follows similar convention.</p>
</div>
<div style="margin-top:50px;">get random number from remote page --->http://fiddle.jshell.net/bHmRB/93/show/
    <br />(shoud be append new number to ul element everytime when click link, but it is wrong now!)
    <ul id="get-random" style="width: 200px;height:100px;border: 5px solid #337ab7;"></ul>
</div>

JavaScript

var columns = [{
    field: "id",
    title: 'ID',
}, {
    field: "link",
    title: 'LINK'
}];
var data = [{
    "id": "1",
    "link": "link1"
}, {
    "id": "2",
    "link": "link2"
}];

function dspInformStatus(value, row, index) {
    var rtnVal = '<a class="inform-status" href="http://fiddle.jshell.net/bHmRB/93/show/" data-toggle="modal" data-target="#inform-status' + index + '">' + value + '</a>';
    rtnVal += [
        '<div class="modal fade" id="inform-status' + index + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">',
        '<div class="modal-dialog">',
        '<div class="modal-content"></div>',
        '</div>',
        '</div>'].join("");
    return rtnVal;
}
var clickInformStatus = {
    'click .inform-status': function (e, value, row, index) {
        // $(this).siblings
    }
};

$(function () {
    columns[1]["formatter"] = dspInformStatus;
    columns[1]["events"] = clickInformStatus;

    $('#table').bootstrapTable({
        columns: columns,
        data: data
    });

    // This is the better location for adding behaivour, no idea why you would want to attach setup code in a click event listener
    $('.inform-status').siblings('.modal').on('hidden.bs.modal', function (event) {
        $("#get-random").append("<li>" + $(this).find("#random").html() + "</li>");
        // $(this).removeData('bs.modal');//noneffective
        // $(this).data('bs.modal', null);//noneffective
        $(this).removeData();
        // .find(".modal-content").html('');//noneffective
        console.log('hidden', $(this));
    });

    $("[data-toggle=modal]").click(function (ev) {
        console.log('click event for modal link to ' + $(this).attr('data-target'), $(this));
        ev.preventDefault();
        // load the url and show modal on success
        $($(this).attr('data-target') + " .modal-content").load($(this).attr("href"), function () {
            $($(this).attr('data-target')).modal("show");
        });
    });
});