Attempting to transition from a JavaScript Alert to a Bootstrap Modal when a list row is clicked

189
June 10, 2017, at 6:37 PM

I have some working code that imports some JSON data via AJAX and builds an HTML table. When a line in the table is clicked, a JavaScript alert pops up with the information from that line. Since it does not look too good, I wanted to try using a Bootstrap Modal instead.

I have researched and reviewed how to do this, but something is not working. There are some topics on this in Stack Overflow, but none seem to address what I seem to be missing.

When I comment out the line of code for the alert and add the $(#focusModal).modal('show'); code for the Modal, the code breaks. The table is not even generated and I get an "Uncaught SyntaxError: Invalid or unexpected token error" in Chrome.

FYI: The JSON data is from a file being served locally using Node.js. Sample JSON data is included below.

HTML sample:

<html>
    <head>
        <title>Create Table From JSON</title>
        <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="main.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div>
            <h1>Academy Awards For Best Actress</h1>
        </div>
        <div id="jsonTable"></div>
        <!-- Button for testing Modal -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#focusModal">Open Modal</button>
        <!-- Modal -->
        <div id="focusModal" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Modal Title</h4>
              </div>
              <div class="modal-body">
                <p>Modal body text</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 Sample:

function TableFromJSON(){
    //AJAX(via jQuery) to request JSON data
    var jsonData;
    $.getJSON("http://127.0.0.1:8000/academy_award_actresses.json", function(data){
        jsonData = data;
        BuildTable(jsonData);
    });
}   

function BuildTable(jsonData){  
    //Get the header values
    var headerArr = [];
    for(var key in jsonData[0]){
        headerArr.push(key);
    }
    //Create table and header row
    var table = document.createElement("table");
    table.className = "table table-bordered table-striped table-hover"
    var tableRow = table.insertRow(-1);
    for(var i = 0; i < headerArr.length; i++){
        var tableHeader = document.createElement("th");
        tableHeader.innerHTML = headerArr[i];
        tableRow.appendChild(tableHeader);
    }
    //Add data and rows
    for(var i = 0; i < jsonData.length; i++) {
        tableRow = table.insertRow(-1);
        for(var j = 0; j < headerArr.length; j++) {
            var cell = tableRow.insertCell(-1);
            cell.innerHTML = jsonData[i][headerArr[j]];
        }

    }
    //Add table to div container
    var tableContainer = document.getElementById("jsonTable");
    tableContainer.appendChild(table);
}

$(document).ready(function(){
    TableFromJSON();
    //jQuery for click alert functionality
    $(document).on("click", "tr", function(){
        $(#focusModal).modal('show');
        //alert($(this).text());
    });
});

JSON Sample:

[
    {
        "year": "1970",
        "actress": "Glenda Jacson",
        "movie": "Women in Love"
    },
    {
        "year": "1971",
        "actress": "Jane Fonda",
        "movie": "Klute"
    },
    {
        "year": "1972",
        "actress": "Liza Minnelli",
        "movie": "Cabaret"
    },
    {
        "year": "1973",
        "actress": "Glenda Jacson",
        "movie": "A Touch of Class"
    }
]
READ ALSO
Jquery Datatable get all filtered data across multiple pages

Jquery Datatable get all filtered data across multiple pages

I am using a very old version of DataTable Jquery lib, v 11

126
Drag and Drop into Shopping Cart by simply calling the already programmed onClick event from the Button

Drag and Drop into Shopping Cart by simply calling the already programmed onClick event from the Button

I am simply trying to add a drag and drop functionality to my webshop

113
Component disappears on update

Component disappears on update

I am implementing a word search facility in my React Native appI have a MobX store, wordStore

187