php jquery editable row

acmumph · December 12, 2013

SO I have the attached code that produces a row of results from a db query. Instead of having a new window appear to make any edits to returned fields, I am trying to allow a dblclick on desired row and an editable row expands underneath it. Unfortunately, I get this to work for the first row returned, but any row below that does not acknowledge dblclick action...appreciate any help you can provide

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#flip").dblclick(function(){

$("#panel").slideToggle("slow");

});

</script>

#panel{

padding:5px;

text-align:center;

background-color:purple;

border:solid 1px #c3c3c3;

}

#panel{

padding:10px;

display:none;

}

#flip{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

</style>

</head>

<body>

<div >

<?php

$con = mysqli_connect('localhost','root','','ajax_demo');

if (!$con)

{

die('Could not connect: ' . mysqli_error($con));

}

mysqli_select_db($con,"ajax_demo");

$sql="SELECT * FROM user;";

$result = mysqli_query($con,$sql);

echo "<table border='1'>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Hometown</th>

</tr>";

while($row = mysqli_fetch_array($result))

{

echo "<tr id='flip'>";

echo "<td>" . $row['FirstName'] . "</td>";

echo "<td>" . $row['LastName'] . "</td>";

echo "<td>" . $row['Age'] . "</td>";

echo "<td>" . $row['Hometown'] . "</td>";

echo "<td>" . $row['Job'] . "</td>";

echo "</tr>";

echo "<tr id='panel'>";

echo "<form action='#' method='GET'>";

echo "<td><input type='text' value='".$row['FirstName']."'></input></td>";

echo "<td><input type='text' value='".$row['LastName']."'></input></td>";

echo "<td><input type='text' value='".$row['Age']."'></input></td>";

echo "<td><input type='text' value='".$row['Hometown']."'></input></td>";

echo "<td><input type='text' value='".$row['Job']."'></input></td>";

echo "<td><input type='submit'></input></td>";

echo "</form>";

echo "</td>";

}

echo "</table>";

mysqli_close($con);

?>

</div>

</body>

</html>

mac_gyver · December 12, 2013

a) id's must be unique. you would need to use a class to assign the event handler to each region you want it to work with. you would also need to use a class for the css.

b) to reference the element that triggered the event, you need to use $(this) (i'm not sure of the actual usage, not being a jquery guru.)

mac_gyver · December 12, 2013

after a little research and experimentation -

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-2.0.3.js'></script>

<script>
$(document).ready(function(){
$(".flip").dblclick(function(){
$("#panel" + $(this).attr("id")).slideToggle("slow");
});
});
</script>

<style type="text/css">
.panel{
padding:5px;
text-align:center;
background-color:purple;
border:solid 1px #c3c3c3;
}
.panel{
padding:10px;
display:none;
}
.flip{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div >
<?php

// ... your database code was here....


echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

$i = 1;
while($row = mysqli_fetch_array($result))
{
echo "<tr class='flip' id='$i'>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
echo "<tr class='panel' id='panel$i'>";
echo "<form action='#' method='GET'>";
echo "<td><input type='text' value='".$row['FirstName']."'></input></td>";
echo "<td><input type='text' value='".$row['LastName']."'></input></td>";
echo "<td><input type='text' value='".$row['Age']."'></input></td>";
echo "<td><input type='text' value='".$row['Hometown']."'></input></td>";
echo "<td><input type='text' value='".$row['Job']."'></input></td>";
echo "<td><input type='submit'></input></td>";
echo "</form>";
echo "</td>\n";
$i++;
}
echo "</table>";
?>
</div>
</body>
</html>

acmumph · December 12, 2013

after a little research and experimentation -

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-2.0.3.js'></script>

<script>
$(document).ready(function(){
$(".flip").dblclick(function(){
$("#panel" + $(this).attr("id")).slideToggle("slow");
});
});
</script>

<style type="text/css">
.panel{
padding:5px;
text-align:center;
background-color:purple;
border:solid 1px #c3c3c3;
}
.panel{
padding:10px;
display:none;
}
.flip{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div >
<?php

// ... your database code was here....


echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

$i = 1;
while($row = mysqli_fetch_array($result))
{
echo "<tr class='flip' id='$i'>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
echo "<tr class='panel' id='panel$i'>";
echo "<form action='#' method='GET'>";
echo "<td><input type='text' value='".$row['FirstName']."'></input></td>";
echo "<td><input type='text' value='".$row['LastName']."'></input></td>";
echo "<td><input type='text' value='".$row['Age']."'></input></td>";
echo "<td><input type='text' value='".$row['Hometown']."'></input></td>";
echo "<td><input type='text' value='".$row['Job']."'></input></td>";
echo "<td><input type='submit'></input></td>";
echo "</form>";
echo "</td>\n";
$i++;
}
echo "</table>";
?>
</div>
</body>
</html>

Thanks for the solution. Nice way to make each id unique. I was trying to figure out how to add the primary key ID for the unique id element....

Sign In

php jquery editable row

Recommended Posts

acmumph

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

acmumph

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information