1

I am trying to fetch the row data on html button click. Below is my code. Here thr problem is when i click on the send email button page is getting refreshed. Also the click event is not getting fired. Not sure what is worng in this code

script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js" ></script>
<script type="text/javascript" src="/it/spservices/SiteAssets/JS/jquery.min.js"></script>
<link rel='stylesheet' type='text/css' href='/it/spservices/SiteAssets/JS/EAS.CSS'>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Application.." title="Type in a Application name">

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">Application</th>
    <th style="width:20%;">Status</th>
     <th style="width:20%;">Issue</th>
    <th style="width:20%;">Risk/Impact</th>
    <th style="width:20%;">Resolution</th>
    <th style="width:20%;">SendEmail</th>
  </tr>
</table>

<script type="text/javascript">

    $(document).ready(function () {

  //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getListData());
    getListData();



    });


function getListData()
{
     var SPContext = SP.ClientContext.get_current();
    var SPWeb = SPContext.get_web();
    var SPLists = SPWeb.get_lists().getByTitle("GetReport"); //Pass the List Name
    var query = new SP.CamlQuery();
    query.set_viewXml('<View><ViewFields><FieldRef Name="Application" /><FieldRef Name="Issue" /><FieldRef Name="Resolution" /><FieldRef Name="Risk_x002f_Impact" /><FieldRef Name="Status" /></ViewFields></View>');
    var items = SPLists.getItems(query);
    SPContext.load(items,'Include(Application,Status,Issue,Risk_x002f_Impact,Resolution)');
    SPContext.executeQueryAsync(sucess, fail);
    function sucess() {
        var application, status, issue, riskImpact, resolution;
        console.log('Number of items in the list' + items.get_count());
        var txtHTML = "";
        var listItemEnumerator = items.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var item = listItemEnumerator.get_current();
            application = item.get_item('Application');
            status = item.get_item('Status');
            issue = item.get_item('Issue');
            riskImpact = item.get_item('Risk_x002f_Impact');
            resolution = item.get_item('Resolution');

            txtHTML += "<tr>";
            txtHTML += "<td>" + application + "</td>";
            txtHTML += "<td>" + status + "</td>";
            txtHTML += "<td>" + issue + "</td>";
            txtHTML += "<td>" + riskImpact + "</td>";
            txtHTML += "<td>" + resolution + "</td>";
            txtHTML += "<td><input class='emailbtn' type='button' value='SendEmail'/></td>";
            txtHTML += "</tr>";

        }
         $("#myTable").append(txtHTML);

    }

    function fail(sender, args) {

        console.log(args.get_message());
    }

}
     $(".emailbtn").click(function() {
    var $row = $(this).closest("tr"),
        $tds = $row.find("td:nth-child(2)");

    $.each($tds, function() {
        console.log($(this).text());
    });

});

function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

</script>
1

Not Sure Why Event Delegation only works in this case But any how it is working f9.

$('#myTable').on('click','.emailbtn',function(){
    var $row = $(this).closest("tr"),
        //$tds = $row.find("td:nth-child(2)");
        $tds = $row.find("td");
console.log($tds)
    $.each($tds, function() {

        console.log($(this).text());
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.