Jump to content

php jquery editable row

acmumph

By acmumph
in Javascript Help

Recommended Posts

acmumph Newbie

acmumph

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/284725-php-jquery-editable-row/
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

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 Prolific Member

mac_gyver

Posted
Posted

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 Newbie

acmumph

Posted
  • Author
Posted

 

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.