0

When I clicked a Edit button, the loaded html table created using jquery ajax just disappeared. How can I make a jquery ajax method to make an html table stay in the page when a button is clicked?

Javascript:

$(document).ready(function () {
    var enableTableSelection = true; 

    function populateInputFields() {
        ///<summary>Populate input fields with table data based on table row selected<summary>
        var currentRow = $("#recentCasesTable tr.highlighted");
        var departmentCase = $("#departmentCase").val(currentRow.find("td:eq(1)").text());
        var department = $("#department").val(currentRow.find("td:eq(2)").text());
        var charge = $("#charge").val(currentRow.find("td:eq(3)").text());
        var labCase = $("#labCase").val(currentRow.find("td:eq(4)").text());
        var incidentReportDate = $("#incidentReportDate").val(currentRow.find("td:eq(5)").text()).datepicker();
    }

    function buttonsEnableDisable(editMode) {
        ///<summary>Enable or Disable buttons and input fields when Edit button is clicked<summary>
        $("#departmentCase").attr('disabled', editMode);
        $("#department").attr('disabled', editMode);
        $("#charge").attr('disabled', editMode);
        $("#labCase").attr('disabled', editMode);
        $("#incidentReportDate").attr('disabled', editMode);

        $("#btnEdit").attr('disabled', !editMode);
        $("#btnSave").attr('disabled', editMode);
        $("#btnCancel").attr('disabled', editMode);
    }

    function isRowHighlighted() {
        ///<summary>Check if a table row is clicked<summary>
        if (!$('input').val()) {
            alert("Please click a row.");
            enableTableSelection = true;
            buttonsEnableDisable(true);
        } else {
            departmentCase;
            department;
            charge;
            labCase;
            incidentReportDate;
        }
    }
  
            $.ajax({
            type: "POST",
            url: "Exercise_Jayson_AjaxWS.asmx/PopulateGrid",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var grdRecentCases = xml.find("Table");
                var rows = '';
                $.each(grdRecentCases, function () {
                    
                    var caseKey = $(this).find("CASE_KEY").text();
                    var departmentCaseNumber = $(this).find("DEPARTMENT_CASE_NUMBER").text();
                    var department = $(this).find("DEPARTMENT_NAME").text();
                    var charge = $(this).find("CHARGE").text();
                    var labCase = $(this).find("LAB_CASE").text();
                    var incidentReportDate = $(this).find("OFFENSE_DATE").text();
                    
                    rows += "<tr><td>" + caseKey + "</td><td>" + departmentCaseNumber +"</td><td>" + department + "</td><td>" + charge + "</td><td>" + labCase + "</td><td>" + incidentReportDate + "</td></tr>";
                });
                $("#recentCasesTable").append(rows);
                $('#recentCasesTable:eq(0) td:nth-child(1)').hide();

                $('#recentCasesTable tr').click(function () {
                    if (enableTableSelection) {
                        $('#recentCasesTable tr').removeClass('highlighted');
                        $(this).addClass('highlighted');
                        populateInputFields();
                    }
                });
                },
              error: function (response) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
            }
        });
               //Not Working
                $("#btnEdit").click(function () {
                    buttonsEnableDisable(false);
                    enableTableSelection = false;
                    isRowHighlighted();
                });

});

HTML:

<body>
    <table id="recentCasesTable">
        <thead>
            <tr>
                <th>Department Case #</th>
                <th>Department </th>
                <th>Charge</th>
                <th>Lab Case #</th>
                <th>Incident Report Date</th>
            </tr>
        </thead>

    </table>



<button id ="btnEdit" name="edit" type="submit" value="edit">Edit</button>
Markk
  • 25
  • 5

0 Answers0