href link doesn't work

Question

I am placing a piece of php code within a html page. I am using href but the link is not working . here is my html+php piece of code:

<div class="panel-body">
 <div class="row">
 <div class="col-md-12 space20">
 <button class="btn btn-green add-row">
 Add New <i class="fa fa-plus"></i>
 </button>
 </div>
 </div>
 <div class="table-responsive">
 <table class="table table-striped table-hover" id="sample_2">
 <?php 
 $servername = "localhost";
 $username = "hevak_neshat"; 
 $password = "shir moz peste";
 $dbname = "hevak_android_api";
 // Create connection 
 $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 if ($conn->connect_error){
 die("Connection failed: " . $conn->connect_error); 
 } 
 $sql = "SELECT * FROM beacons";
 $result = $conn->query($sql); 
 if($result -> num_rows > 0)
 {
 echo "<thead>
 <tr><th>Major number</th>
 <th>Minor number</th>
 <th>Client</th>
 <th>Location</th>
 <th>Link to ad</th>
 <th>Attachment</th>
 <th>Edit</th>
 </tr> ;</thead>";
 echo "<tbody>";
 while($row = $result -> fetch_assoc())
 {
 echo "<tr><td>" .$row["major"]. "</td><td>" .$row["minor"]. "</td><td>" .$row["client"]. "</td><td>" .$row["geolocation"]. "</td><td>" .$row["linktoadd"]. "</td><td>" .$row["attacment"] . "</td><td>"; 
 echo "<a href=\"#\" class =\"edit-row\" >";
 echo "Edit";
 echo "</a></td>";
 echo "</tr>"; 
 }
 echo "</tbody></table>";
 } else {
 echo "no results";
 }

?>

and following is part of my .js code that is related to the html :

$('#sample_2').on('click', '.edit-row', function(e) {
 e.preventDefault();
 if (actualEditingRow) {
 if (newRow) {
 oTable.fnDeleteRow(actualEditingRow);
 newRow = false;
 } else {
 restoreRow(oTable, actualEditingRow);
 }
 }
 var nRow = $(this).parents('tr')[0];
 editRow(oTable, nRow);
 actualEditingRow = nRow;
 });
 var oTable = $('#sample_2').dataTable({
 "aoColumnDefs" : [{
 "aTargets" : [0]
 }],
 "oLanguage" : {
 "sLengthMenu" : "Show _MENU_ Rows",
 "sSearch" : "",
 "oPaginate" : {
 "sPrevious" : "",
 "sNext" : ""
 }
 },
 "aaSorting" : [[1, 'asc']],
 "aLengthMenu" : [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"] // change per page values here
 ],
 // set the initial value
 "iDisplayLength" : 10,
 });
 $('#sample_2_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
 // modify table search input
 $('#sample_2_wrapper .dataTables_length select').addClass("m-wrap small");
 // modify table per page dropdown
 $('#sample_2_wrapper .dataTables_length select').select2();
 // initialzie select2 dropdown
 $('#sample_2_column_toggler input[type="checkbox"]').change(function() {
 /* Get the DataTables object again - this is not a recreation, just a get of the object */
 var iCol = parseInt($(this).attr("data-column"));
 var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
 oTable.fnSetColumnVis(iCol, ( bVis ? false : true));
 });
};
return {
 //main function to initiate template pages
 init : function() {
 runDataTable_example1();
 runDataTable_example2();
 }
};

My exact problem is when I remove the php part "Edit" is clickable and works correctly. but when i place the php so i can be able fetch my database data, "Edit" is still a link but when you click on it nothing happens. I cannot find the cause of this problem

Update: here is my browser provided html:

<div class="panel-body">
 <div class="row">
 <div class="col-md-12 space20">
 <button class="btn btn-green add-row">
 Add New <i class="fa fa-plus"></i>
 </button>
 </div>
 </div>
 <div class="table-responsive"> 
 <table class="table table-striped table-hover" id="sample_2">
 <thead> 
 <tr>
 <th>Major number</th>
 <th>Minor number</th>
 <th>Client</th>
 <th>Location</th>
 <th>Link to ad</th>
 <th>Attachment</th>
 <th>Edit</th>
 </tr> 
 </thead><tbody><tr><td>2</td><td>5</td><td>noxel</td><td>16253</td><td>www.noxel.com</td><td>test</td><td><a href='#' class ='edit-row' >Edit<script>
$(document).on("click","edit-row",function(event){
alert("m here");
});
</script></a></td></tr><tr><td>7</td><td>9</td><td>nox</td><td>123456</td><td>www.digikla.com</td><td>jhhfdbc</td><td><a href='#' class ='edit-row' >Edit<script>
$(document).on("click","edit-row",function(event){
alert("m here");
});
</script></a></td></tr><tr><td>0</td><td>0</td><td>fgfh</td><td>645312</td><td>wwwwwwwwwwwww</td><td>wwwwwwwww</td><td><a href='#' class ='edit-row' >Edit<script>
$(document).on("click","edit-row",function(event){
alert("m here");
});
</script></a></td></tr></tbody>
 </table> 
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- end: PAGE CONTENT-->
 </div>
 </div>
 <!-- end: PAGE -->
 </div>

• Jorge Torres: Question. What happens if you replace your PHP for a simple echo "Testing"? This could help you find out if this has something to do with an error in database connection or other problems in the PHP.
• mina: Jorge database is working completely fine. code fetches my data correctly.
• AkshayJ: What does the browser console show??
• mina: this is what brower console says Akshay :Uncaught TypeError: Cannot read property 'jumpTo' of subview-example.js:482 undefined.
• Fiido93: When console found out Uncaught TypeError: Cannot read property meaning that your have problem with your js. try replace example $(document).on('click', 'a.edit-row', function(e) .. I dont know if it's correct.

Answer 1

You need not to write script in php-loop. Also note that ".edit-row" is valid selector for classes not "edit-row"

Do not forget to prevent the default behaviour of <a> elements. Use Event.preventDefault()

Put your script right before closing of body(</body>) tag.

Try this:

$(document).on("click", ".edit-row", function(event) {
 event.preventDefault();
 alert("m here");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="panel-body">
 <div class="row">
 <div class="col-md-12 space20">
 <button class="btn btn-green add-row">
 Add New <i class="fa fa-plus"></i>
 </button>
 </div>
 </div>
 <div class="table-responsive">
 <table class="table table-striped table-hover" id="sample_2">
 <thead>
 <tr>
 <th>Major number</th>
 <th>Minor number</th>
 <th>Client</th>
 <th>Location</th>
 <th>Link to ad</th>
 <th>Attachment</th>
 <th>Edit</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>2</td>
 <td>5</td>
 <td>noxel</td>
 <td>16253</td>
 <td>www.noxel.com</td>
 <td>test</td>
 <td><a href='#' class='edit-row'>Edit</a>
 </td>
 </tr>
 <tr>
 <td>7</td>
 <td>9</td>
 <td>nox</td>
 <td>123456</td>
 <td>www.digikla.com</td>
 <td>jhhfdbc</td>
 <td><a href='#' class='edit-row'>Edit</a>
 </td>
 </tr>
 <tr>
 <td>0</td>
 <td>0</td>
 <td>fgfh</td>
 <td>645312</td>
 <td>wwwwwwwwwwwww</td>
 <td>wwwwwwwww</td>
 <td><a href='#' class='edit-row'>Edit</a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
</div>

Fiddle here

• mina: finally it works! I have added var currentTD = $(this).parents('tr').find('td'); if ($(this).html() == 'Edit') { $.each(currentTD, function () { $(this).prop('contenteditable', true) }); } else { $.each(currentTD, function () { $(this).prop('contenteditable', false) }); } $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
• mina: i have added code above at the end of your suggestion and it is working. thank you for the help:-)
• Rayon: Yes, to make fields editable, that was needed.. I will not mind if you upvote.. Happy Coding !

Answer 2

Try replacing your js code function $('#sample_2').on('click', '.edit-row', function(e) { with `

$(document).on('click', '#sample_2 a.edit-row', function(e) {

OR SIMPLY

$(document).on('click', 'a.edit-row', function(e) {

this might work for your

• mina: @RayonDabre i donno why, i replace this part of code and still when i click on button nothing happens.
• Rayon: @mina, I suggest you to provide browser rendered html so that it will be easier to debug..

Answer 3

I'm quite sure that delegated event handlers would help: http://api.jquery.com/on/

Try these changes:

echo "<a href='#' class ='edit-row' >";
$(document).on("click",".edit-row",function(event){
alert("m here");
});

• Amar Singh: put a alert and return false ,, and check this should work
• mina: I put an alert first line in $(document).on('click', '#sample_2 a.edit-row', function(e) {alert"something"} , but still when I click on the edit button nothing shows up. not even the alert. why?
• mina: I even did this but still when I click on the edit button nothing happens, checkout my next comment.
• mina: echo"<button onClick=\"My_Function\">Edit</button>"
• mina: and put this at the end of my code: <script>function My_Function() {alert("I am an alert box!");}</script>

Answer 4

change your top javascript code to this and check.

 $(document).on('click', '.edit-row', function(e) {
 e.preventDefault();
 if (actualEditingRow) {
 if (newRow) {
 oTable.fnDeleteRow(actualEditingRow);
 newRow = false;
 } else {
 restoreRow(oTable, actualEditingRow);
 }
 }
 var nRow = $(this).parents('tr')[0];
 editRow(oTable, nRow);
 actualEditingRow = nRow;
 });

• Imran Qamer: check by putting above code in $(document).ready(function(){})
• Imran Qamer: also show code where you initialized these variables actualEditingRow, newRow. And check by putting alert aswell
• Rayon: @ImranQamer, OP stands for Original Poster or Asker