Jump to content

php jquery editable row


acmumph
Go to solution Solved by mac_gyver,

Recommended Posts

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
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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>
Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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