Jump to content


Photo

php jquery editable row


Best Answer mac_gyver, 11 December 2013 - 10:33 PM

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>
Go to the full post


  • Please log in to reply
3 replies to this topic

#1 acmumph

acmumph

    Member

  • Members
  • PipPip
  • 18 posts

Posted 11 December 2013 - 09:24 PM

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>
<script type='text/javascript' src='jquery-2.0.3.js'></script>

<script>
$(document).ready(function(){
$("#flip").dblclick(function(){
$("#panel").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
$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>Age</th>
<th>Hometown</th>
<th>Job</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>

#2 mac_gyver

mac_gyver

    Advanced Member

  • Moderators
  • 1,874 posts

Posted 11 December 2013 - 09:48 PM

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.)


multi-purpose programming fool and resident naysayer [We try not be negative in replies, but telling someone what they're doing wrong, while staying politically correct, isn't always going to happen.]

#3 mac_gyver

mac_gyver

    Advanced Member

  • Moderators
  • 1,874 posts

Posted 11 December 2013 - 10:33 PM   Best Answer

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>

multi-purpose programming fool and resident naysayer [We try not be negative in replies, but telling someone what they're doing wrong, while staying politically correct, isn't always going to happen.]

#4 acmumph

acmumph

    Member

  • Members
  • PipPip
  • 18 posts

Posted 11 December 2013 - 11:58 PM

 

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....






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com