integrate an image with link - javascript

Well, I think it might be easier to explain my question by the image below:
As can be seen in the picture, if user select "By title", a textbox will be appeared where user can write a movie title (I also used jQuery auto-completion for this textbox). Then, if user click on the button "Movies by this title", a new window will be shown where there is a list of movies containing the term in the textbox.
My question:
I would like to integrate a small image of each of these movies beside them (and maybe some other information like movie year, genre..) like what amazon does (Please see here). I used renderitem for the auto-complete part and it works fine, but actually I have no idea how to do the same in the new window.. I would be very grateful if someone can help me.
This is my code:
<div id="m_scents" class="field">
<label style="margin-bottom:10px;" for="m_scnts"></label>
<input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
<input type="button" value="Movies by this title" id="btnMove" style="display:none;"/>
</div>
<script type="text/javascript">
var selected;
$(document).ready(function () {
$("input[id='selectType']").change(function(){
if ($(this).val() == "byTitle") {
$("#m_scents2").hide();
$("#btnMove").show();
$("#m_scents").show();
$("#q").focus();
$("#q").autocomplete({
minLength: 0,
delay:5,
source: "query.php",
focus: function( event, ui ){
event.preventDefault();
return false;
},
select: function( event, ui ) {
window.selected = ui.item.movieName;
return false;
}
}).data("uiAutocomplete")._renderItem = function( ul, item ) {
return $("<li></li>")
.data( "item.autocomplete", item )
.append( "<a>" + (item.posterLink?"<img class='imdbImage' src='imdbImage.php?url=" + item.posterLink + "' />":"") + "<span class='imdbTitle'>" + item.movieName + "</span>" + "<div class='clear'></div></a>" )
.appendTo( ul );
};
}
});
$('#btnMove').on('click', function (e) {
popupCenter("movieBytitle.php","_blank","400","400");
});
</script>
This is movieBytitle.php:
<body>
<div id= "field"
</div>
<script type="text/javascript">
var selected = parent.window.opener.selected;
$.ajax({
url: 'childfilm.php',
datatype: "json",
data:{p:selected},
success: function(response) {
$("#field").html(response);
}
});
</script>
</body>
and this is childfilm.php:
<?php
if(isset($_GET['p']) && !empty($_GET['p'])){
try{
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
$sql->execute(array(':p' => '%'.$_GET['p'].'%'));
while($row = $sql->fetch(PDO::FETCH_ASSOC)){
$option = '' . $row['movieName'] . '<br />';
$html .= $option;
}
} catch(PDOException $e){
echo 'ERROR: ' . $e->getMessage();
}
echo $html;
exit;
}
?>
UPDATE:
This is the new childfilm.php (Thanks to #ghost help):
if(isset($_GET['p']) && !empty($_GET['p'])){
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
$sql->execute(array(':p' => '%'.$_GET['p'].'%'));
}
?>
<table>
<tr>
<th></th>
<th>Title</th>
<th>Year</th>
<th>Genre</th>
</tr>
<?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
<tr>
<td><img class='imdbImage' src='imdbImage.php?url="<?php echo $row['posterLink'];?>'</td>
<td><?php echo $row['movieName']; ?></td>
</tr>
<?php endwhile; ?>
</table>
and this is imdbImage.php:
<?php
header("Content-type: image/jpeg");
$url = rawurldecode($_REQUEST['url']);
echo file_get_contents($url);
?>
New problem:
This is the result (Still, the image is not shown properly):

If you already got those information in the table, then just include it in the fetching and present it in tabular form:
<?php
if(isset($_GET['p']) && !empty($_GET['p'])){
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
$sql->execute(array(':p' => '%'.$_GET['p'].'%'));
}
?>
<table>
<tr>
<th></th>
<th>Title</th>
<th>Year</th>
<th>Genre</th>
</tr>
<?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
<tr>
<td><img src="path/to/images/<?php echo $row['filename']; ?>" alt="" /></td>
<td><?php echo $row['movieName']; ?></td>
<td><?php echo $row['year']; ?></td>
<td><?php echo $row['genre']; ?></td>
</tr>
<?php endwhile; ?>
</table>

Related

PHP & MySQL & JS editable table won't update records

So I'm trying to use a table to update some records in my database but each time I click on update it won't work and it won't do anything. A part of the code below was found in an another topic but it was incomplete so I added some other things.
Js script
$(function(){
$("#loading").hide();
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_userid = $(this).attr("id") ;
var value = $(this).text() ;
$.post('update.php' , field_userid + "=" + value, function(data){
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},1000);
}
});
});
});
This is the table fetching the rows from the database, however everything works besides updating.
HTML & PHP
<form method="post" action="update.php">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-dark">
<tr bgcolor="#df4662" style="color:#FFFFFF;">
<td>ID</td>
<td>Nickname</td>
<td>Name</td>
<td>Rank</td>
</tr>
<?php
while($row = mysqli_fetch_array($result)) {
?>
<tr>
<td contenteditable="true" id="id:<?php echo $row["id"]; ?>"><?php echo $row["id"]; ?></td>
<td contenteditable="true" id="username:<?php echo $row["username"]; ?>"><?php echo $row["username"]; ?></td>
<td contenteditable="true" id="name:<?php echo $row["steamid"]; ?>"><?php echo $row["steamid"]; ?></td>
<td contenteditable="true" id="ranks:<?php echo $row["ranks"]; ?>"><?php echo $row["ranks"]; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</form>
After a few errors I've been able to have a clean error_logs, but now I don't get any error even after pressing the update button.
update.php
<?php
include '../database.php'
?>
<?php
if(!empty($_POST))
{
foreach($_POST as $field_name => $val)
{
$field_id = strip_tags(trim($field_name));
$split_data = explode(':', $field_id);
$id = $split_data[1];
$field_name = $split_data[0];
if(!empty($id) && !empty($field_name) && !empty($val))
{
$affected_rows = mysqli_query($mysqli,"UPDATE users SET $field_name = '$val' WHERE id = $id");
echo $affected_rows;
echo "Updated";
} else {
echo "Invalid Request";
}
}
}
else {
echo "Invalid Requests";
}
?>
EDIT: Thanking Sam now the problem is just that the record won't update at all

Call API only for Selected items

I am calling Api : $url = 'https://plapi.ecomexpress.in/track_me/api/mawbd/?awb=awbnumber&order=' . $orderrecords[$k]["order_id"] . '&username=admin&password=admin123'; and fetching Status results of all Order IDS & displaying in php page when we refresh php page.
Now i want to select Order IDs through checkbox, than when i click on button "Show Status" , than only i want to Call Api & update the Selected Order IDs status in web page.
<p><button type= "button" class="call">Show Status</button></p>
<table class="tbl-qa" border="1">
<thead>
<tr>
<th class="table-header"></th>
<th class="table-header">ORDERID</th>
<th class="table-header">Status</th>
</tr>
</thead>
<tbody id="table-body">
<?php
$tabindex = 1;
if (!empty($orderrecords))
{
foreach($orderrecords as $k => $v)
{ ?>
<?php
$hide = '';
$data['username'] = 'admin';
$data['password'] = 'admin123';
$url = 'https://plapi.ecomexpress.in/track_me/api/mawbd/?awb=awbnumber&order=' . $orderrecords[$k]["order_id"] . '&username=admin&password=admin123';
$ch = curl_init();
// some curl code
$res = explode("\n", $output);
if (!isset($res[13]))
{
$res[13] = null;
}
$status = $res[13];
?>
<tr class="table-row" id="table-row-<?php echo $orderrecords[$k]["id"]; ?>" tabindex="<?php echo $tabindex; ?>">
<td><input onclick="assignorderids('<?php echo $orderrecords[$k]["order_id"]; ?>')" type="checkbox" name="assigneeid" id="assigneeid-<?php echo $orderrecords[$k]["order_id"]; ?>" value="<?php echo $orderrecords[$k]["order_id"]; ?>"></td>
<td><?php echo $orderrecords[$k]["order_id"]; ?></td>
<td><?php echo $status; ?></td>
</tr>
<?php
$tabindex++;
}
} ?>
</tbody>
</table>
Please help me how i can achieve this ?
Update : assignorderids function
function assignorderids(oid)
{
var checkstatus=$("#assigneeid-"+oid).is(":checked");
var morderId =document.getElementById("orderids").value;
if(checkstatus==false)
{
var arrayorder = JSON.parse("[" + morderId + "]");
document.getElementById("orderids").value='';
for (var i = 0; i < arrayorder.length; i++) {
var orderstatusValue=arrayorder[i];
if(orderstatusValue!=oid){
if (document.getElementById("orderids").value=='')
{
document.getElementById("orderids").value=orderstatusValue;
}
else
{
var newvalue=document.getElementById("orderids").value;
document.getElementById("orderids").value=newvalue+","+orderstatusValue;
}
}
}
}
else
{
if(morderId=='')
{
document.getElementById("orderids").value=oid;
}
else
{
document.getElementById("orderids").value=morderId+","+oid;
}
}
}
Url Output

Deleting row from mysql using jquery and php

I want to create delete feature using function and jquery
My jquery works and show messages but nothing happen "Nothing Deleted"
Jquery Code
<script type="text/javascript">
$(".remove").click(function(){
var id = $(this).parents("tr").attr("id");
if(confirm('Are you sure to remove this record?'))
{
$.ajax({
url: 'delete.php',
type: 'GET',
data: {id: id},
error: function() {
alert('Something is wrong');
},
success: function(data) {
$("#"+id).remove();
alert("Record removed successfully");
}
});
}
});
PHP Function Code
function delete($table,$id) {
global $connect;
mysqli_query($connect, "DELETE FROM `$table` WHERE `id` = $id ");
}
Delete.php Code
include ('function.php');
$id = $_GET['id'];
$table = 'msg';
delete($table,$id);
HTML Code
<table class="table table-striped" style="background-color: #ffffff;">
<tr>
<th>ID</th>
<th>From</th>
<th>Title</th>
<th>Date</th>
<th>Action</th>
</tr>
<?php
$i = '1';
$username = $user_data['username'];
$query = "SELECT * FROM msg WHERE `go_to` = '$username' Order by id";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $row['come_from']; ?></td>
<td>
<a href="read_message/<?php echo $row['id']; ?>"><?php if(count_msg_not_opened($username, $row['id']) > '0')
{
echo $row['title'];
}
else
{
echo '<b>' . $row['title'] . '</b>';
} ?></a></td>
<td><?php echo $row['date']; ?></td>
<td>
<button class="btn btn-danger btn-sm remove">Delete</button>
</td>
</tr>
<?php } ?>
</table>
I also include "jquery.min.js"
When I press "Delete" bottom this message appears "Are you sure to remove this record?"
I pressed "Yes" then this message appears "Record removed successfully", but nothing was deleted.
I don't know where the problem is.
You forgot to add the id attribute to the <tr>
<tr id="<?php echo $row['id']; ?>">
You should also add error checking and prepared statements to your PHP code.
Are you sure that you have connected your PHP-code to your SQL-database?
function delete($table,$id) {
global $connect;
mysqli_query($connect, "DELETE FROM `$table` WHERE `id` = $id ");
}
The code above is relying on a connection already existing within your PHP-file. See this to find out how to apply a connection.

PHP Dynamic Table with edit/delete links to open a popup

I built a form where user can enter Country Name and Country's Dialing Code. That form submits to Database and then I pull the record from database in a Table showing Country Name, Country's Dialing Code and two more options of EDIT and DELETE (having GET URL Link e.g. www.abc.com/country.php?country=Pakistan)
I want to add AJAX to it so that when user clicks on EDIT or DELETE link a relevant pop-up open with data from GET URL.
Following is my Dynamic Table in PHP
<div>
<?php
$q = "SELECT * FROM country";
$result = mysqli_query($conn, $q);
echo "<table border=2><tr><th>Country Name</th><th>Country Code</th><th></th><th></th></tr>";
while($a = mysqli_fetch_array($result)) {
$cn = $a['cname'];
$cc = $a['ccode'];
?>
<tr>
<td><?php echo $cn ?></td> <td><?php echo $cc; ?></td>
<script type="text/javascript">
var a = 0;
var cname = new Array("<?php echo $cn;?>");
a++;
</script>
<td>
<a href='#' onclick='javascript:editWin(cname[a]); return(false);'>Edit</a>
</td>
<td id="<?php echo $cn;?>">
<a href='#' onclick='javascript:delWin(); return(false);'>Remove</a>
</td>
</tr>
<?php
}
?>
</div>
My external Javascript Function is as follows
function editWin(e) {
window.open('edit.php?country='+e,'','height=400, width=600, top=100,
left=400, scrollable=no, menubar=no', '');
};
In GET Url it says undefined when popup window opens.
I got the solution
My PHP Code is as follows
<div> <?php
$q = "SELECT * FROM country";
$result = mysqli_query($conn, $q);
echo "<table border=2><tr><th>Country Name</th><th>Country Code</th><th></th><th></th></tr>";
while($a = mysqli_fetch_array($result)) {
$cn = $a['cname'];
$cc = $a['ccode'];
?>
<tr>
<td><?php echo $cn ?></td> <td><?php echo $cc; ?></td>
<td><a href='#' id="<?php echo $cn; ?>" onclick='javascript:editWin(this.id); return(false);'>Edit</a></td>
<td><a href='#' id="<?php echo $cn; ?>" onclick='javascript:delWin(this.id); return(false);'>Remove</a></td></tr>
<?php
}
?>
</div>
and my Javascript is as follows
function editWin(e) {
window.open('edit.php?country='+e,'','height=400, width=600, top=100, left=400, scrollable=no, menubar=no', '');
};
function delWin(e) {
window.open('del.php?country='+e,'','height=400, width=600, top=100, left=400, scrollable=no, menubar=no', '');
};

Send article id to ajax file or get article id straight in ajax file ? In joomla! plugin

I want to pass current article id to ajax file. Url of ajax file is something like www.web.com/plugins/system/ajax.php so using JRequest::getInt(id) always parses 0 integer. In non ajax file I can get ID the same way. So I'd like to know how to pass integer value or maybe there's other way of getting article id in ajax file ?
<?php
defined( '_JEXEC' ) or die;
define( 'DS', DIRECTORY_SEPARATOR );
?>
<?php
class plgSystemRatingx extends JPlugin
{
public function onContentBeforeDisplay()
{
?>
<?php echo JRequest::getInt('id'); ?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".like").click(function()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax
({
type: "POST",
url: "/joomla/plugins/system/ratingx/conf.php",
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content").html(html);
}
});
});
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
</script>
<?php echo JURI::current(); ?>
<div style="margin:50px">
Like -- Dislike
<div id="votebox">
<span id='close'>X</span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="content">
</div>
</div>
</div>
<?php
return true;
}
}
AJAX FILE:
<?php
// Set flag that this is a parent file
define('_JEXEC', 1);
// No direct access.
defined('_JEXEC') or die;
define( 'DS', DIRECTORY_SEPARATOR );
define('JPATH_BASE', dirname(__FILE__).DS.'..'.DS.'..'.DS.'..' );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
$db = &JFactory::getDbo();
if(JRequest::getInt('id'))
{
$id = JRequest::getInt('id');
$name = JRequest::getVar('name');
$queryx = "SELECT id from messages";
$db->setQuery($queryx);
$db->query($queryx);
$idx = $db->loadObjectList();
$query = "update messages set $name=$name+1 where id='$id'";
$db->setQuery( $query );
$db->query( $query ) or die('blo5gai');
$query2 = "select up,down from messages where id='$id'";
$db->setQuery( $query2 );
$db->query( $query2 ) or die('blo5gai');
$vote = $db->loadObject();
$up_value= $vote->up;
$down_value = $vote->down;
$total=$up_value+$down_value;
$up_per=($up_value*100)/$total;
$down_per=($down_value*100)/$total;
?>
<div style="margin-bottom:10px">
<b>Ratings for this blog</b> ( <?php echo $total; ?> total)
</div>
<table width="700px">
<?php echo JURI::current(); ?>
<tr>
<td width="30px"></td>
<td width="60px"><?php echo $up_value; ?></td>
<td width="600px"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>
</tr>
<tr>
<td width="30px"></td>
<td width="60px"><?php echo $down_value; ?></td>
<td width="600px"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>
</tr>
</table>
<?php
}
You have to add one attribute as vid and pass the value of the id through the vid attribute
example:
Like
In the script file, you have to call the attribute like this.
<script type="text/javascript">
$(document).ready(function()
{
$(".like").click(function()
{
var vid=$(this).attr("vid");
alert(vid);
}
});
</script>
<?php
// Set flag that this is a parent file
define('_JEXEC', 1);
// No direct access.
defined('_JEXEC') or die;
define( 'DS', DIRECTORY_SEPARATOR );
define('JPATH_BASE', dirname(__FILE__).DS.'..'.DS.'..'.DS.'..' );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
$id = JRequest::getInt('id');
$db = &JFactory::getDbo();
if($id)
{
$name = JRequest::getVar('name');
$query->select('id');
$query->from('messages');
$db->setQuery($query);
$db->query($query);
$idx = $db->loadResult();
$query->update('messages');
$query->set('name = '.$name+1);
$query->where('id='.$id);
$db->setQuery($query);
$db->query();
$query->select('up,down');
$query->from('messages');
$query->where('id='.$id);
$db->setQuery($query);
$db->query($query);
$vote = $db->loadObject();
$up_value= $vote->up;
$down_value = $vote->down;
$total=$up_value+$down_value;
$up_per=($up_value*100)/$total;
$down_per=($down_value*100)/$total;
?>
<div style="margin-bottom:10px">
<b>Ratings for this blog</b> ( <?php echo $total; ?> total)
</div>
<table width="700px">
<?php echo JURI::current(); ?>
<tr>
<td width="30px"></td>
<td width="60px"><?php echo $up_value; ?></td>
<td width="600px"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>
</tr>
<tr>
<td width="30px"></td>
<td width="60px"><?php echo $down_value; ?></td>
<td width="600px"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>
</tr>
</table>
<?php
}

Categories

Resources