I have a simple table that prints our the list of videos and plays them when you click on the row. I have a delete button to delete the corresponding video in the row. But for some reason when you click on any video it will only delete the last one in the list. I can look at the source on the page and the video_url seems to be correct. Any ideas?
Here is the majority of the code:
<?php
// Dont allow direct linking
defined('_JEXEC') or die('Direct Access to this location is not allowed.');
//get current user
$user =& JFactory::getUser();
// get a reference to the database
$db = &JFactory::getDBO();
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
echo $problem;
}
return $data;
}
if (isset($_POST['delete_video'])) {
$video_url = check_input($_POST['video_url']); //value here is always just the last row in the table!!!
echo $video_url;
$query_delete_video = "DELETE FROM `#__videos` WHERE `video_url`='$video_url'";
$db->setQuery($query_delete_video);
$db->query();
}
//list all details of the camera including camera_name
$query_videos = "SELECT #__videos.video_url, #__videos.video_size, #__videos.video_datetime, #__videos.video_length, #__cameras.camera_name
FROM #__videos INNER JOIN #__cameras using (user_id, camera_id)
WHERE #__videos.user_id=".$user->id." ORDER BY #__videos.video_datetime DESC";
$db->setQuery($query_videos);
//get number of cameras so we can build the table accordingly
$db->query();
$num_videos = $db->getNumRows();
// We can use array names with loadAssocList.
$result_videos = $db->loadAssocList();
echo "<html>";
echo "<head>";
?>
<link href="recordings/recordings.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="flowplayer/example/flowplayer-3.2.6.min.js"> </script>
<?php
echo "</head>";
echo "<body>";
?>
<?php
if (!isset($result_videos))
{
//TODO check if query failed
}
else
{
if ($num_videos == 0)
{
?>
<div id="cc_table">
<table id="webcam-table">
<thead>
<tr>
<th>Camera Name</th>
<th>Camera Details</th>
<th>Video Options</th>
</tr>
</thead>
<td colspan=3><b><i><center>You currently have no videos created. Start monitoring today!</center></i></b></td>
</table>
</div>
<?php
}
else
{
?>
<div id="cc_table">
<form name="myform" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="POST">
<table id="webcam-table">
<thead>
<tr>
<th>Camera Name</th>
<th>Camera Details</th>
<th>Video Options</th>
</tr>
</thead>
<tbody>
<?php
for($i=0;$i<$num_videos;$i++)
{
?>
<tr onclick="DoNav('<?php echo $result_videos[$i]["video_url"]; ?>');">
<td>
<?php echo $result_videos[$i]["camera_name"]; ?>
</td>
<td>
Date Created: <?php echo $result_videos[$i]["video_datetime"]; ?> <br>
Video Size: <?php echo $result_videos[$i]["video_size"]; ?> bytes <br>
Video Length: <?php echo $result_videos[$i]["video_length"]; ?> secs
</td>
<td>
<input type="submit" name="delete_video" value="Delete" onClick="return confirm('Are you sure you want to delete?')"/>
</td>
</tr>
<input type="hidden" name="video_url" value="<?php echo $result_videos[$i]["video_url"]; ?>" />
<?php
}
echo "</tbody>";
echo "</table>";
echo "</form>";
echo "</div>";
}
}
?>
<div id="player" style="display:block;width:320px;height:240px;background-image:url(recordings/landscape.jpg)"></div>
<script type="text/javascript">
function DoNav(theUrl)
{
//document.write(document.location.href = theUrl);
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", theUrl);
}
</script>
<?php
echo "</body>";
echo "</html>";
?>
Can you post the HTML? I suspect you've got multiple hidden input fields on the page, all with the same name. If that's the case, only the last one that loads on the page will register as a valid hidden input. A better way to do it would be to set a data attribute on the delete button, and then add a JS click event to that delete button. Something like this:
<button class="delete" data-video_url="youtube.com/abcd">Delete ABCD</button>
<button class="delete" data-video_url="vimeo.com/xyz">Delete XYZ</button>
and then when someone clicks on a .delete button, you send the data-video_url value to the PHP script via POST. A jQuery example might look like this:
$('.delete').click(function() {
var url = $(this).data('video_url');
$.post('/delete.php', { video_url: video_url }, function() {
// Do something on success
});
});
Another way to do it is to simply make each button its own form:
<form method="post" action="delete.php">
<input type="hidden" name="video_url" value="url_goes_here">
<button>Delete</button>
</form>
Hope that helps. Good luck.
The problem is that the name of the hidden field is not unique (for every iteration in the loop a new hidden field with the same name is created). How should the script know which row you want if all of them has the same name?
Your code does not seem to name the hidden values properly.
You should use $i to name the variable.
input type="hidden" name="video_url<?php echo $i; ?>"
then in handler you can do
<?php
if ($_POST) {
$kv = array();
foreach ($_POST as $key => $value) {
// check here which one begins with video_url
}
}
?>
Related
I have an html table with bootstrap styling, and in the right side I have checkboxes in each row, but when I select them and click 'Write Report' button it doesn't go to next page, it doesn't do anything as if I didn't click anywhere.
I am new to all this HTML, Bootstrap and PHP so probably there is a stupid mistake I am making somewhere.
Here is my table:
<table id="usetTable" class="display compact" data-toggle="table" data-classes="table table-hover table-condensed" data-row-style="rowColors" data-striped="true" data-sort-name="Quality" data-sort-order="desc" data-pagination="true" data-click-to-select="true">
<thead>
<th data-field="state" data-checkbox="true">Dev.no</th>
<th>IMEI</th>
<th>Report comment</th>
</thead>
<tbody>
<form method="post">
<?php if (!empty($devices)) { ?>
<?php foreach ($devices as $device) : ?>
<tr id="tr-id-2" class="tr-class-2">
<td>
<input type="checkbox" name="devices[<?php echo $device["id"] ?>]" value="<?php echo $device["id"] . $dev_comment ?>">
<?php echo $device["device_no"] ?>
</td>
<td>
<?php echo $device["serial_imei"] ?>
</td>
<td>
<div class="input-group">
<textarea name="dev_comment[<?php echo $device["id"] ?>]" placeholder="comment" rows="1" cols="50"><?php echo $dev_comment; ?></textarea>
</div>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
</br>
<div id="wrapper">
<button class="btn" type="submit" name="report">Write report</button>
</div>
</form>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#usetTable').DataTable();
});
</script>
I tried to post only the minimal code to reproduce this error even though I am using dynamic data so its kinda difficult to reproduce this way but in case you want to do that, just user hardcoded data in the table and remove the array fields.
P.S. the table is looking perfectly fine, the only problem is with selecting the rows and going to next page.
[Here is a screenshot][1] [1]: https://i.stack.imgur.com/IidBA.png
EDIT:
I am using jQuery function now and it works but the table lost pagination:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(document).ready(function() {
$('#usetTable').DataTable();
$(function() {
//Assign Click event to Button.
$("#btnGet").click(function() {
//Loop through all checked CheckBoxes in GridView.
$("#usetTable input[type=checkbox]:checked").each(function() {
var row = $(this).closest("tr")[0];
});
});
});
});
</script>
if I remove this: src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
the table looks good but checkboxes dont work anymore.
my project is web image Re-Ranking. I am try to get which image is selected in the html page for update the rank of image in Mysql. My code is
index.php
<?php
include './search_image.php';
$obj_image = new Image();
if(#$_POST['Submit'])
{
$obj_image->image_name=str_replace("'", "''", $_POST['txt_image_name']);
$obj_image->Insert_into_image();
$data_image=$obj_image->get_all_image_list();
$row=mysql_num_rows($data_image);
}
?>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Home</title>
</head>
<body bgcolor=cyan>
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
<center><h1>WEB IMAGE RERANKING</H1></CENTER>
<center>
<table border=0 cellspacing=10>
<th><a href="index.php" target="right">HOME</th>
<th><a href="admin.php" target"=right">ADMIN</th>
<form method="post" enctype="multipart/form-data">
<tr>
<th width="50%">Enter Image name for search</th>
<td width="50%"><input type="text" name="txt_image_name"></input></td>
</tr>
<td width="50%"><input type="submit" name="Submit" value="Submit"></input> </td>
</tr>
</table>
</form>
</CENTER>
<?php
if($row!=0)
{
?>
<center>
<form method="post" enctype="multipart/form-data">
<table width="30%" border="0">
<?php
while($data= mysql_fetch_assoc($data_image))
{
?>
<tr>
<img src="images/<?php echo $data['image']; ?>" width="400px" height="200px" >
</tr>
<?php
}
?>
</table>
</form>
</center>
<?php
}
?>
<?php
echo" <script language='javascript' type='text/javascript'>
function loadImage(String a) {
alert('1 %s',a);
}
</script>"
?>
</body>
</html>
search_image.php
<?php
include 'db_connection.php' ;
class Image{
var
$image_id,
$image_name,
$image;
function Insert_into_image(){
}
function get_all_image_list(){
$query = "select *from stor_image where img_name='$this->image_name'";
$result = mysql_query($query);
return $result;
}
}
?>
when click on specific image update the rank of the image. So I need help to find image name or src for update the data in mysql database.
Thank you
Try this:
HTML:
<img src="images/<?php echo $data['image']; ?>" width="400px" height="200px" >
JS:
$('.gallery').click(function(){
var image_name = $(this).attr('name');
// make an ajax call with this image name and do what ever you want to do
});
HTML:
<img src="images/<?php echo $data['image']; ?>" width="400px" height="200px" >
<script>
function reply_click(clicked_id)
{
$imagename=clicked_id;
alert($imagename);
}
</script>
When we use ajax the value is in server side, which on successful execution can be shown using
.done(function(data) {console.log(data)}
The result of the ajax is inside "data". My question is can we pass the value of "data" in a php variable.
My scenario is : There is a dropdown, below this is an html table. So when the user selects an item in the dropdown, using ajax the selected values passes in the "data".
After this I am running a Mysql query
"Select name, age, sex from student where name = '{$retvalue}';
Now instead of "??", I want to pass value inside "data" in a php variable $retvalue.
How can I achieve this?
I have tried my level best and even after a thorough search in the net, I am not able to find anything.
Code is as follows :
Main - File
<?php
include ("dbcon.php");
include ("included_functions.php");
?>
<section>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.min.js"></script>
<script src="<?php bloginfo('template_url');?>/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fyearddl").change(function(){ /* Drop down List */
var fyear = $(this).val();
data = {fyear:fyear};
$.ajax({
type: "GET",
url: '<?php bloginfo("template_url");?>/showonselectFY.php',
data: data,
cache: false
})
.done(function(data) {
console.log(data);
$('#inboxfy').empty();
$('#inboxfy').val(fyear);
})
});
});
</script>
<div style="width:100%; height:30px; padding-bottom:45pt; background-color:#fff"></div>
<form id="formCatg" action="" method="POST">
<div class="centr-div">
<div class="divbox">
<label id="ddltxt">To view : </label>
<?php
$fyquery = "select fyear from finyear";
$fyresult = mysqli_query($connection, $fyquery);
echo "<select id='fyearddl' name='fyearddl'>";
echo "<option value = '-- Select Financial Year --'>-- Select Financial Year --</option>";
while ($resultarr = mysqli_fetch_assoc($fyresult)){
echo "<option value = '$resultarr[fyear]'>$resultarr[fyear]</option>";
}
echo "</select>";
?>
<input id="inboxfy" type="text" name="inboxfy" value="" style="width:20%; height:15pt" />
</div>
<div id="tablediv" class="scroll">
<table id="showselfy">
<thead>
<tr>
<th>S.no.</th>
<th>Quantity</th>
<th>Price ( £ ) </th>
</tr>
</thead>
<?php
//$query="select rt_id, rt_qty, rt_cost,fin_yr from rate_mast where fin_yr='2014-2015'";
$ddlvalue = $_POST['fyearddl'];
$query="select rt_id, rt_qty, rt_cost from rate_mast where fin_yr='{$ddlvalue}'";
$retval = mysqli_query($connection, $query);
while( $retvalarr = mysqli_fetch_assoc($retval)){
?>
<tbody>
<tr>
<td><?php echo $retvalarr['rt_id'] ?></td>
<td><?php echo $retvalarr['rt_qty'] ?></td>
<td><?php echo $retvalarr['rt_cost'] ?></td>
<td style="display:none"><?php echo $retvalarr['fin_yr'] ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
<span id="dataresult"></span>
</div>
</div>
</div>
</form>
</section>
<?php
mysqli_close($connection);
?>
<?php //get_footer(); ?>
showonselectFY.php
<?php var_dump($_GET); ?>
<?php
include("dbcon.php");
include("included_functions.php");
if(isset($_GET['fyear'])){
$getfinyear = $_GET['fyear'];
echo $getfinyear;
}
?>
<?php
mysqli_close($connection);
?>
In a table I display several links whose value (user id) is extracted from a database. By clicking on the link appears a modal pop up in which I would like to pass the selected value.
Here is the table:
<table>
<tr>
<td>Username</td>
<td>Id</td>
</tr>
<?php
include ‘db_connection.php’;
$sql = "SELECT * FROM users";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $row[userID]?></td>
<td>
<div id='basic-modal'>
<a href="?id=<?php echo $row[userID]?>" class='basic'>Show</a>
</div>
</td>
</tr>
<?php } ?>
</table>
If I click on the link Show appears the modal pop up:
<div id="basic-modal-content">
<?php
if(isset($_GET[‘userID’])){
$userID = $_GET[‘userID’];
echo ‘UsuerID: ‘ .$userID;
}
?>
</div>
This is the script I used
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
Since I have little familiarity with the jQuery framework I would like to ask you how can I pass the selected value within the modal and then use it.
jquery allows you to use the .data() attribute
<div id='basic-modal'>
<a href="?id=<?php echo $row[userID]?>" data-mydata="<?php echo $row[userID]?>" class='basic'>Show</a>
</div>
and then u can retrieve data from 'data-mydata' attribute:
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content')
.text($(this).data('mydata'))
.modal();
return false;
});
});
I am developing a simple students information application. I have student list in my index.phtml and I can edit student information form there. It's working nice but I want to use modal for edition student info. But I don't know how to do this.Below I have posted my current codes :
/// indexController.php
public function editAction()
{
$modelStudents = new Application_Model_DbTable_Students();
$id = (int) $this->_getParam('id');
$student = $modelStudents->fetch($id);
$form = new Application_Form_Student($student->email);
$form->submit->setLabel('Save');
$this->view->form = $form;
if ($this->getRequest()->isPost()) {
$formData = $this->getRequest()->getPost();
if ($form->isValid($formData)) {
$id = (int)$form->getValue('id');
$name = $form->getValue('name');
$email = $form->getValue('email');
$phone = $form->getValue('phone');
$students = new Application_Model_DbTable_Students();
$students->updateStudent($id, $name, $email, $phone);
$this->_helper->redirector('index');
} else {
$form->populate($formData);
}
} else {
$id = $this->_getParam('id', 0);
if ($id > 0) {
$form->populate($modelStudents->getStudent($id));
}
}
}
/// index.phtml
<html>
<head>
<style type="text/css" rel="stylesheet">
</style>
<script type="text/javascript" src="jQuery.js"> </script>
<script type ="text/javascript" src="jquery.simplemodal-1.4.2.js" ></script>
<script>
<?php
echo "Student List";
?>
<p><a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'add'));?>">Add new student</a></p>
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
<?php foreach($this->students as $student) : ?>
<tr>
<td><?php echo $student->name;?></td>
<td><?php echo $student->email;?></td>
<td><?php echo $student->phone;?></td>
<td>
<a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'edit', 'id'=>$student->id));?>">Edit</a>
<a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'delete', 'id'=>$student->id));?>">Delete</a>
<p id="delete" > Delete </p>
</td>
</tr>
<?php endforeach; ?>
</table>
</center>
</html>
////edit.phtml
<center>
<?php
echo "Edit Student List ";
echo $this->form ;
?>
</center>
Please let me know how to use jQuery simple modal plugin to preform this task.
Thanks in advance
Start by editing your index.phtml file to add a class and the student id to your edit link:
<a href="<?php echo $this->url(array('controller'=>'index',
'action'=>'edit', 'id'=>$student->id));?>" class="editBtn" studentId="<?=$student->id?>">Edit</a>
Then, in an included js file:
$(document).ready(function() {
$(function() {
//Event triggered when clicking on the edit btn
$('.editBtn').click(function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
//Get the page and add it to the modal
studentId = $(this).attr('studentId');
var data={};
data['id'] = studentId;
url = "/index/edit/";
$.get(url, data, function(resp) {
$.modal(resp);
});
});
});
});
This should help you get started...