Passing parameter from hyperlink in a Datatable Jquery

Question

What i am trying here : I have a function that does a ajax request and gets the data to fill up a DataTable. In my dataTable i have columns . When i click the Edit hyperlink i want it to pass the UID to the function called myfunction. But i blows up when i click the EDIT hyperlink again it only blows up when you press the Hyperlink other than that there is no issue with DataTable. (image Attached) Thank you in advance.

my Datatable looks like..

ResourceId ResourceLName FName  UID  Actions 
1           abc           xyx    21    EDIT(this is a hyperlink) 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
           <script src="script.js"></script>        
            <script src="Scripts/jquery-3.0.0.js"></script>
            <script src="Scripts/jquery-ui-1.12.1.js"></script>
            <script src="Scripts/jquery-ui-1.12.1.min.js"></script>
            <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
            <script src="Scripts/jquery.unobtrusive-ajax.min.js"></script>
            <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
            <script src="Scripts/DataTables/dataTables.jqueryui.js"></script>
            <link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />

    $(document).ready(function ()
 {
     function loadECWResourceInfo()
 {         
                    $.ajax({
                        url: 'GetResourceInfo_Json.asmx/GetResourceInfoTable',
                        method: 'post',
                        dataType: 'json',
                        success: function (data) {
                            $('#datatable').dataTable({
                                //Calling DataTable function                      
                                modal: true,                           
                                retrieve: true,
                                paging: true,
                                sort: true,
                                searching: true,
                                //scrollY: 600,  // this will change the 
                                data: data,   //pasing data 
                                columns: [   // passing column 
                                    { 'data': 'ResourceId' },                                   
                                    { 'data': 'ResourceLName' },
                                    { 'data': 'FName' },                                  
                                    { 'data': 'UID' },
                                    {                      

                                  "mRender": function (data, type, row) {
                                   var id = row.UID;
                                   return '<a href="#" onclick="myfunction("+ id +")>EDIT</a>';
                                        }
                                    }
                                ]
                            });
                        }
                    });
                }

//I want the href  onclick event to hit this function so i can do something.


  function myfunction(event)
           {
                var id = event.UID;
                alert("OK");
           }
}   

    </script>
</head>



//-------------HTML--------------------  

  <body>
<form id="form1" runat="server">
  <div style="width: auto; height: auto; border: 1px solid black; padding: 3px">

                    <table id="datatable" style="border-collapse: collapse" border="1">
                        <thead>
                            <tr>
                                <th>ResourceId</th>
                                <th>ResourceLName</th>
                                <th>FName</th>
                                <th>UID</th>                       
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>      
            </form>
        </body>
        </html>

This is what i get when i press hyperlink EDIT button in my datatable.

user3920526 · Accepted Answer · 2018-04-25T14:18:51.857

I fixed the issue looking at the is problem Uncaught ReferenceError: myFunction is not defined main problem is the function that you call from your anchor tag .. it needs to be outside the document.ready.. not sure why but once i place it outside the document.ready(function(){}); it worked.

<script type="text/javascript">
    function myFunction()
 {
       alert("You have called the function from a anchor tag inside a datatable. Make sure it is outside $document.Ready(function)")        
    }

     $(document).ready(function ()
 {
     function loadECWResourceInfo()
 {         
                    $.ajax({
                        url: 'GetResourceInfo_Json.asmx/GetResourceInfoTable',
                        method: 'post',
                        dataType: 'json',
                        success: function (data) {
                            $('#datatable').dataTable({
                                //Calling DataTable function                      
                                modal: true,                           
                                retrieve: true,
                                paging: true,
                                sort: true,
                                searching: true,
                                //scrollY: 600,  // this will change the 
                                data: data,   //pasing data 
                                columns: [   // passing column 
                                    { 'data': 'ResourceId' },                                   
                                    { 'data': 'ResourceLName' },
                                    { 'data': 'FName' },                                  
                                    { 'data': 'UID' },
                                    {                      

                                  "mRender": function (data, type, row) {
                                   var id = row.UID;
                                   return '<a href="#" onclick="myfunction("+ id +")>EDIT</a>';
                                        }
                                    }
                                ]
                            });
                        }
                    });
                }

do you have fiddle for your solution.. facing the same.. followed your solution its not working. if possible kindly check [this](https://stackoverflow.com/questions/7774731/javascript-redirect-and-pass-argument-to-redirected-page) — Mr. Learner, May 12 '21 at 07:30

Passing parameter from hyperlink in a Datatable Jquery

1 Answers1