When I click on icon my jQuery click function is not triggered. I am not sure what's wrong. Any help will be appreciated.
jQuery
$("document").ready(function(){
$("#abc").click(function() {
$("#dialog-confirm").dialog({
modal: true,
width: 400,
height: 400,
});
});
});
Now here is the image and this is how I am linking.
echo '<td>' . '<img src="edit.png" style = "height:35px;margin-left :8px;" id="abc">' . '</td>';
And here is my form that will pop as dialog!
<body>
<div id="dialog-confirm" style="display:none;">
<form>
<label for="name">Name</label>
<input type="name" id="name" required>
<label for="number">Number</label>
<input type="number" id="number" required>
<label for="email">Email</label>
<input type="email" id="email" required>
<input type="submit" id="submit">
<input type="submit" id="cancel" value="Cancel">
</form>
</div>
</body>
Any help?
Here is the complete page:
<!doctype HTML>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" ></script>
<script src="smoke.js"></script>
<link rel="stylesheet" href="css/venview.css">
<script type="text/javascript">
function deleterecord ( id ) {
smoke.confirm("Do you want to delete?", function(result){
if(result)
{
window.location.href = 'delete_ven.php?id=' + id;
}
else{
header("Location: ven_view.php");
}});
}
$(document).ready(function(){
$("#abc").click(function() {
$('#dialog-confirm').dialog({
modal: true,
width: 400,
height: 400
});
});
});
$("#submit").click (function(e){
e.preventDefault();
var name = $("#name").val;
var num= $("#number").val;
var email = $("#email").val;
var dataString = 'name'+name+'number'+num+'email'+email;
$.ajax({
type:'POST',
data:dataString,
url:'edit_ven.php',
success:function(data) {
alert(data);
}
});
});
</script>
</head>
<body>
<?php
include 'includes/head.php';
include 'ven_connect.php';
include "dashboard.php";
if (isset($_GET["page"]))
{
$page = (int) $_GET["page"];
}
else
{
$page=1;
};
$start_from = ($page-1) * 4;
$result = mysqli_query($conn , "SELECT * FROM vendor LIMIT $start_from, 4") or die (mysqli_error ($conn));
echo "<table title='Vendors'>";
echo '<tr>';
echo "<th>Sr</th>";
echo "<th>Edit</th>";
echo "<th>Delete</th>";
echo "<th>Name</th>";
echo "<th>PhoneNo</th>";
echo "<th>Email</th>";
echo "</tr>";
echo "<tr>";
while($row = mysqli_fetch_array( $result )) {
// display the contents of each row into a table
echo "<tr>";
echo '<td>' . $row['id'] . '</td>';
echo '<td>' . '<img src="edit.png" style = "height:35px;margin-left :8px;" id="abc">' . '</td>';
echo '<td>' . '<img src="delete.png" style = "height:35px;margin-left :8px;" onclick = "deleterecord('.$row['id'].')">' . '</td>';
echo '<td>' . $row['Name'] . '</td>';
echo '<td>' . $row['Number'] . '</td>';
echo '<td>' . $row['email'] . '</td>';
echo "</tr>";
}
echo "</tr>";
echo "</table>";
?>
<body>
<div id="dialog-confirm" style="display:none;">
<form>
<label for="name">Name</label>
<input type="name" id="name" required>
<label for="number">Number</label>
<input type="number" id="number" required>
<label for="email">Email</label>
<input type="email" id="email" required>
<input type="submit" id="update">
<input type="submit" id="cancel" value="Cancel">
</form>
</div>
</body>
<?php
//Pagination!!
if($page > 1)
{
$prev= $page - 1;
echo " <a href='{$_SERVER['PHP_SELF']}?page=$prev'>Prev</a> ";
}
$result = mysqli_query($conn , "SELECT * FROM vendor") or die (mysqli_error ($conn));
$total_records = mysqli_num_rows($result);
$total_pages = ceil($total_records / 4);
$range = 3;
for ($x = ($page - $range); $x <($page + $range); $x++) {
if (($x > 0) && ($x <= $total_pages)) {
if ($x == $page) {
echo " [<b>$x</b>] ";
}
else {
echo " <a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a> ";
}
}
}
if($page != $total_pages)
{
$nextpage=$page+1;
echo " <a href='{$_SERVER['PHP_SELF']}?page=$nextpage'>Next</a> ";
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
#abcis unique on page