I am trying to post the value of an input box (In this case a imdb link) to my imdbgrabber.php page and have it return the info of that movie into a qtip box.
EDIT: View here http://movieo.no-ip.org/ Hover the images and you will see the error.
Everything works fine until i try and post the variable to the imdbgrabber page. This is the code.
Javascript:
var link = $("#link").val();
var imdbLink = 'link='+ link;
$(".moviebox").qtip({
style: { name: 'cream' },
content: {
method: 'GET',
data: imdbLink,
url: '/includes/imdbgrabber.php',
text: '<img class="throbber" src="/images/loading.gif" alt="Loading..." />'
},
position: {
corner: {
target: 'bottomright',
tooltip: 'bottomleft'
}
}
});
HTML:
<!--start moviebox-->
<div class="moviebox">
<a href="#">
<img src="http://1.bp.blogspot.com/_mySxtRcQIag/S6deHcoChaI/AAAAAAAAObc/Z1Xg3aB_wkU/s200/rising_sun.jpg" />
<form method="get" action="">
<input type="text" name="link" id="link" style="display:none" value="http://www.imdb.com/title/tt0367882"/>
</form>
</a>
</div>
<!--end moviebox-->
and finally the php:
<?php
$url=$_GET['link'];
//$url = 'http://www.imdb.com/title/tt0367882/';
//get the page content
$imdb_content = get_data($url);
//parse for product name
$name = get_match('/<title>(.*)<\/title>/isU',$imdb_content);
$director = strip_tags(get_match('/<h5[^>]*>Director:<\/h5>(.*)<\/div>/isU',$imdb_content));
$plot = get_match('/<h5[^>]*>Plot:<\/h5>(.*)<\/div>/isU',$imdb_content);
$release_date = get_match('/<h5[^>]*>Release Date:<\/h5>(.*)<\/div>/isU',$imdb_content);
$mpaa = get_match('/<a href="\/mpaa">MPAA<\/a>:<\/h5>(.*)<\/div>/isU',$imdb_content);
$run_time = get_match('/Runtime:<\/h5>(.*)<\/div>/isU',$imdb_content);
$rating = get_match('/<div class="starbar-meta">(.*)<\/div>/isU',$imdb_content);
////build content
//$content = '<h2>Film</h2><p>'.$name.'</p>'
// . '<h2>Director</h2><p>'.$director.'</p>'
// . '<h2>Plot</h2><p>'.substr($plot,0,strpos($plot,'<a')).'</p>'
// . '<h2>Release Date</h2><p>'.substr($release_date,0,strpos($release_date,'<a')).'</p>'
// . '<h2>MPAA</h2><p>'.$mpaa.'</p>'
// . '<h2>Run Time</h2><p>'.$run_time.'</p>'
// . '<h2>Full Details</h2><p>'.$url.'</p>';
//gets the match content
function get_match($regex,$content)
{
preg_match($regex,$content,$matches);
return $matches[1];
}
//gets the data from a URL
function get_data($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
?>
<!--start infobox-->
<div class="info">
<span>
<?php echo '<strong>'.$name.'</strong>' ?>
</span>
<img src="http://1.bp.blogspot.com/_mySxtRcQIag/S6deHcoChaI/AAAAAAAAObc/Z1Xg3aB_wkU/s200/rising_sun.jpg" />
<div class="plot">
<?php echo ''.substr($plot,0,strpos($plot,'<a')).'</div>' ?>
</div>
<div class="runtime">
<?php echo'<strong>Run Time</strong><br />'.$run_time.'</div>' ?>
</div>
<div class="releasedate">
<?php echo '<strong>Release Date</strong><br />'.substr($release_date,0,strpos($release_date,'<a')).'</div>' ?>
</div>
<div class="director">
<?php echo '<strong>Director</strong><br />'.$director.'' ?>
</div>
<div class="rating">
<?php echo '<strong>Rating</strong><br />'.$rating.'' ?>
</div>
</div>
<!--end infobox-->
I am sure it is a simple mistake somewhere but after hours of looking i thought i would ask the experts.
According to the documentation, the data for qtip when fetching via AJAX needs to be key-value pairs. Try this:
var link = $("#link").val();
var imdbLink = { "link" : link }; // note change to data...
$(".moviebox").qtip({
style: { name: 'cream' },
content: {
method: 'GET',
data: imdbLink, // you could make this { "link" : link }
url: '/includes/imdbgrabber.php',
text: '<img class="throbber" src="/images/loading.gif" alt="Loading..." />'
},
position: {
corner: {
target: 'bottomright',
tooltip: 'bottomleft'
}
}
});
Also it appears that your get_match routine is improperly indexing into the matches array. Arrays are zero-based, so the first match is the match at index 0, not one. In fact, you can only ever have a single match given your regular expressions since you only have one grouping expression.
Try changing it to this:
//gets the match content
function get_match($regex,$content)
{
preg_match($regex,$content,$matches);
return $matches[0];
}
Related
I'm building a website using PHP and AJAX JQUERY. And inside this website, there is texting system, like whatsapp, telegram ...etc.
and I'm wanna get all the messages from the database after the user send a message, using jQuery AJAX. so far I have been able to send the text to the database successfully but I fail when I try to get the messages.
I Have this following code when first the page is loaded:
<div class="messaging-frame">
<div class="Title-in-message">
<h4 class="title-message"><?php echo $index['Title'] ?></h4>
</div>
<div class="messaging-box" id="messages">
<?php
// THE MESSAGE FROM MESSAGE TABLE
foreach ($messages as $key => $value) {
if ($_SESSION['EmployeeNum'] === $value['Sender']) { ?>
<div class="row">
<div class="col" style="margin-bottom:15px">
<div class='sent'>
<p id='send-bubble'> <?php
echo $value['Message'] ?> </p>
</div>
</div>
</div>
<?php
} else { ?>
<div class="row">
<div class="col" style="margin-bottom:15px">
<div class='recived' id="recieved-bubble">
<p id='recived-bubble'><?php echo $value['Message'] ?></p>
</div>
</div>
</div><?php
}
}
?>
</div>\
Than this code in AJAX jQuery get executed when ever the user send a new message in messaging box:
$(document).ready(function() {
$('#sending_text').click(function() {
var report = $('#report_num').val()
var reportInt = parseInt(report);
var text = $('#text_sent').val();
var encodeText = encodeURIComponent(text);
$.ajax({
url: "<?php echo base_url() . 'DisplayTicket/sendNewText' ?> ",
type: "POST",
data: {
text: text,
reportNum: reportInt
},
success: function() {
$('#messages').load("<?php echo base_url() . 'DisplayTicket/getNewMessages' ?>", {reportNum: reportInt}, function() {
var texts = " <?php foreach ($messages as $k => $val) { if ($_SESSION['EmployeeNum'] === $value['Sender']) { ?>";
texts += " <div class='row'> <div class='col' style='margin-bottom:15px'> <div class='sent'>";
texts += "<?php echo $val['Message'] ?>";
texts += "</div> </div> </div>";
texts += "<?php } else { ?>";
texts += " <div class='row'> <div class='col' style='margin-bottom:15px'> <div class='recived' id='recieved-bubble'>"
texts += "<?php echo $val['Message'] ?>";
texts += "</div> </div> </div>"
texts += "<?php }
} ?>";
texts += "</div>";
$('#messages').html(texts);
})
},
});
});
})
Keep in mind that the $('#messages').html(texts);
is actually get executed but the newest messages in not added
I see you are using .load() method to fill the #messages .
Normally the first argument to this method is the response you wanna insert,and the this is just a callback after success, and you are using a php variable $messages instead of using the response from the request.
I see already 2 ways of doing this:
1 - remove the callback from load() and make sure the response is well written in html as youy want
2 - get rid of load() function, and call another ajax inside success of the first ajax to accomplish so.
The second method is just to make you understand what is wrong. So the best way to do it is to fix load() method accordingly
Currently, if no images have been clicked, I get my selected image like this and it's also what's shown on first page load.
$pictures = Picture::getPictures($album->getId());
$selectedPicture = $pictures[0];
It selects the first picture and display it like this:
<img src="<?php echo $selectedPicture->getOriginalFilePath($user->getId()); ?>" >
I am trying to change the selected image when a user clicks on a different thumbnail because this is just one of many images of an album.
Attempt with a ajax, I'm not really experienced with it so I couldn't get it to work
<script type="text/javascript">
function Func() {
$.ajax({
type: "POST",
url: "RefreshImage.php",
success: function (json) {}, error: function () {}
})
}
</script>
Then the php portion also has something like to create the thumbnails so that a user can clicks on one, it displays the image. But I'm not sure how to do that.
foreach ($pictures as $pic) {
$output.= "<a href='" . $pic->getOriginalFilePath($user->getId()) . "'> <img style='width:120px;height:120px' "
. "src='" . $pic->getThumbnailFilePath($user->getId()) . "'"
. "name='" . $pic->getFileName() . "' "
. "onClick='Func'></a>";
}
RefreshImage.php content
session_start();
$user = $_SESSION['user'];
//$albums = Album::getAlbums($user->getId());
if (isset($_POST["chosenAlbid"])) {
$album_id = $_POST["chosenAlbid"];
$user = $_SESSION['user'];
$album = Album::getAlbumById($user->getId(), $album_id);
$pictures = Picture::getPictures($album->getId());
$selectedPicture = $pictures[1];
}
?>
<div id="imagecontainer">
<div>
<p style="float: left;"><img style="width:500px;height:400px" src="<?php echo $selectedPicture->getOriginalFilePath($user->getId()); ?>" ></p>
<p><span>
<h4> Description</h4>
</span><?php echo $selectedPicture->getDescription() ?></p>
</div>
</div>
If you rewrite your function into jQuery it will be more easy.
From this
function Func() {
$.ajax({
type: "POST",
url: "RefreshImage.php",
success: function (json) {}, error: function () {}
})
}
To jQuery
$('a[data-refresh-img]').click(function(e) {
e.preventDefault(); // block ahref redirect
$('#imagecontainer img').attr('src', $(this).attr('href')); // replace image
);
Then activate function add data-refresh-img attribute on a tag.
And all will work for you.
JSFIDDLE
** UPDATE **
If you need replace any data with image you can do this
<a data-refresh-img href="original_img_path">
<img
title="picture one"
src="thumbnail_img_path" height=50>
<span style="display: none"><?php echo $selectedPicture->getDescription() ?> AAA</span>
</a>
And change function to
$('a[data-refresh-img]').click(function(e) {
e.preventDefault(); // block ahref redirect
$('#imagecontainer img').attr('src', $(this).attr('href')); // replace image
$('#imagecontainer img').attr('title', $(this).find('img').attr('title')); // replace title
$('#imagecontainer span[data-description]').html($(this).find('span').html()); // replace description
});
JSFIDDLE 2
I successfully fetch the data from the database. The problem is that, I want to display the results using Ajax request. The results/Output which displayed twice, I mean the *first output which displayed through Ajax (#the bottom of index.php), and the Second output displayed through PHP ECHO (**#**the bottom of the page). What can I do to get a single output through Ajax without adding another file and without refreshing the page?
index.php
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<div id="table_content"></div>
<?php
include ("db.php");
error_reporting(~E_NOTICE);
function ShowForm($AnswerCommentId) {
echo '<form id="myForm">';
echo '<input id="user" name="user" />';
echo '<textarea id="text" name="text"></textarea>';
echo sprintf('<input id="ParentId" name="ParentId" type="hidden" value="%s"/>', ($AnswerCommentId));
echo '<button type="button" OnClick=SendComment()>Comment</button>';
echo '</form>';
}
$query="SELECT * FROM `comm` ORDER BY id ASC";
$result = mysqli_query($conn,$query);
if (isset($_REQUEST['AnswerId'])) $AnswerId = $_REQUEST['AnswerId'];
else $AnswerId = 0;
$i=0;
while ($mytablerow = mysqli_fetch_row($result)){ $mytable[$i] = $mytablerow; $i++; }
function tree($treeArray, $level, $pid = 0) {
global $AnswerId;
foreach($treeArray as $item){
if ($item[1] == $pid){
echo sprintf('<div class="CommentWithReplyDiv" style="margin-left:%spx;">',$level*60);
echo sprintf('<p>%s</p>', $item[2]);
echo sprintf('<div>%s</div>', $item[3]);
if ($level<=2) echo sprintf('Reply', $item[0]);
if ($AnswerId == $item[0]) echo sprintf('<div id="InnerDiv">%s</div>', ShowForm($AnswerId));
echo '</div><br/>';
tree($treeArray, $level+1, $item[0]); // Recursion
}
}
}
tree($mytable,0,0);
?>
Comment
<div id="MainAnswerForm" style="display:none;width:40%; margin:0 auto;"><?php ShowForm(0); ?></div>
<div id="AfterMainAnswerForm"></div>
<script>
$(document).ready(function(){
$("#Link").click(function () {
$("#InnerDiv").remove();
$("#MainAnswerForm").slideToggle("normal");
return false;
});
});
</script>
</body>
Page.php
<?php
include ("db.php");
$user = $_POST['user'];
$text = $_POST['text'];
$ParentId = $_POST['ParentId'];
$action = $_POST['action'];
if ($action=="add") $query= mysqli_query($conn,"INSERT into `comm` VALUES (NULL,'{$ParentId}','{$user}','{$text}',NOW())");
?>
Javas.js
function show_messages(){
$.ajax({
url: "index.php",
cache: false,
success: function(html){
$("#table_content").html(html);
}
});
}
function AnswerComment (id){
$.ajax({
type: "POST",
url: "index.php",
data: "AnswerId="+id,
success: function(html){
$("#table_content").html(html);
}
});
}
function SendComment (){
var user1 = $("#user").val();
var text1 = $("#text").val();
var ParentId1 = $("#ParentId").val() + "";
$.ajax({
type: "POST",
url: "page.php",
data: "user="+user1+"&text="+text1+"&ParentId="+ParentId1+"&action=add",
success: function(html){
show_messages();
}
});
return false;
}
OK I think its more simple than you think
while you're using .html() it should change all the content of your div but while you're using <div id="table_content"></div> then the <?php ?> your code will show both - one appended to the div and under it the one which echoed by php ... so instead of using
<div id="table_content"></div>
<?php ?>
just wrap the <?php ?> inside the div
<div id="table_content">
<?php ?>
</div>
Alternative way: by using jquery wrapAll() but while Id must be unique you'll need to .remove() the #table_content element first then wrap all your code inside a new #table_content div .. see the example below
$(document).ready(function(){
$('#table_content').remove();
$('.CommentWithReplyDiv').wrapAll('<div id="table_content"></div>');
});
#table_content{
margin : 50px;
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_content"></div>
<div class="CommentWithReplyDiv">1</div>
<div class="CommentWithReplyDiv">2</div>
<div class="CommentWithReplyDiv">3</div>
<div class="CommentWithReplyDiv">4</div>
My project is a kind of blog, with posts and comments area. I'm trying to make it async with jquery ajax. My problem is that when a new comment gets inserted asynchronously it appears in the div twice, and all the other comments disappear. If i refresh the page it looks fine.
VIEW:
<section id="comments_section_<?php echo $p1['post_id'];?>"> //THIS IS THE OUTPUT WHERE NEW COMMENTS WILL BE APPENDED
<?php
$data['comments'] = $this->model_mutamba->getComments($p1['post_id']);
if($data['comments'] != ""){ ?>
<div class="comments_container" id="comments_container_<?php echo $p1['post_id'];?>">
<?php foreach ($data['comments'] as $c){
$user_img3 = $this->model_mutamba->getUserPicId($c->aluno_id);
?>
<div>
<img style="height:32px;" src="<?php echo site_url();?>img/users/portfolio/<?php echo $user_img3;?>" alt="" class="align-left" />
<p>
<?php echo $this->model_mutamba->addSmilies($c->comment);?>
<br>
<span class="comments_date">
<?php
$c_date = explode('-', substr($c->comment_date,0,-8));
$date_num_word = monthNumToWords($c_date[1]);
echo substr($c->comment_date, 11,-3)." ".$c_date[2]." de ". $date_num_word . " ". $c_date[0];?>
</span>
</p>
</div>
<?php } ?>
</div>
<?php } ?>
</section>
JS:
function comment(post_id,input){
var comment = $(input).val();
var output = '#comments_section_'+post_id;
if(comment != ""){
$.ajax({
type:"POST",
url:base_url+"mutamba/insertNewComment",
data: {comment: comment, post_id:post_id},
cache:false,
success:function(response){
$(output).html(response);
$(output).append(response);
}
});
}
}
CONTROLLER:
function insertNewComment(){
if($this->session->userdata('is_logged_in')){
$email= $this->session->userdata('email');
$comment= $this->FilterData($this->input->post('comment'));
$post_id= $this->FilterData($this->input->post('post_id'));
$this->load->model('model_mutamba');
if($this->model_mutamba->insertNewComment($email,$comment,$post_id)){
$this->load->model('model_user');
$count = $this->model_mutamba->countPostComments($post_id);
?>
<script>
var count = '<?php echo $count;?>';
var comments_count = '<?php echo "#comments_count_".$post_id;?>';
var content = "";
if(count == 1){
content = '<span class="comments_count">'+count+'</span> Comentário';
}else{
content = '<span class="comments_count">'+count+'</span> Comentários';
}
$(comments_count).html(content);
</script>
<?php
$this->load->model('model_user');
$user_img = $this->model_user->getUserPic($email);
echo '
<div>
<img style="height:32px;" src="'.site_url().'img/users/portfolio/'.$user_img.'" alt="" class="align-left" />
<p>
'.$this->model_mutamba->addSmilies($comment).'
<br>
<span class="comments_date">';
$date = date(date('Y-m-d H:i:s'));
$c_date = explode('-', substr($date,0,-8));
$date_num_word = monthNumToWords($date[1]);
echo substr($date, 11,-3)." ".$c_date[2]." de ". $date_num_word . " ". $c_date[0].'
</span>
</p>
</div>';
}
}else{
redirect("inicio");
}
}
Will appreciate any help,
Thanks in advance
This is happening because in your AJAX success callback, you are adding response to the output TWICE - once with .html() and then again with .append().
.html(response) removes the previous HTML in your webpage, thats why you dont see other comments and it adds response to it.
With .append(response), it is adding response to the bottom of the div, that is the reason you are seeing the response twice!
Remove $(output).html(response) from the success callback and it will work fine.
So, your function needs to look like this:
function comment(post_id,input){
var comment = $(input).val();
var output = '#comments_section_'+post_id;
if(comment != ""){
$.ajax({
type:"POST",
url:base_url+"mutamba/insertNewComment",
data: {comment: comment, post_id:post_id},
cache:false,
success:function(response){
$(output).append(response);
}
});
}
}
function comment(post_id,input){
var comment = $(input).val();
var output = '#comments_section_'+post_id;
if(comment != ""){
$.ajax({
type:"POST",
url:base_url+"mutamba/insertNewComment",
data: {comment: comment, post_id:post_id},
cache:false,
success:function(response){
//$(output).html(response); //Comment this line or the line below it.
$(output).append(response);
}
});
}
}
<div id="appenddiv">
<h1>append</h1>
</div>
<script type="text/javacript">
$("#appenddiv").append('<b>hello world</b>');
</script>
Here is my :
<?php
if($total_count > 0)
{
while($val =$objDB->get_row($rs_member))
{
// $flowplayer = "player".$val['video_id'];
$VideoPath = "uploadedvideo/video/".$val['video'];
?>
<div style="border:#FF0000;">
<div id="video1">
<a href="<?=$VideoPath?>"
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.5.swf", {
clip: {
// these two configuration variables does the trick
url: '<?=$VideoPath?>',
autoPlay: false,
autoBuffering: true // <- do not place a comma here
}
});
</script>
</div>
</div>
<?php
}
}
?>
Instead of this I need to play all video file in a single page serially..how to do this..please help
How about creating an array of all the videos you want to play and then add them to a playlist, like so:
<?php
if($total_count > 0)
{
$Videos = array();
while($val =$objDB->get_row($rs_member))
{
// $flowplayer = "player".$val['video_id'];
$Videos[] = "uploadedvideo/video/".$val['video'];
}
$VideoPlaylist = "'" . implode("', '", $Videos) . "'"; // will look something like : 'vid1.fla', 'vid2.fla'
?>
<div style="border:#FF0000;">
<div id="video1">
<a
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.5.swf", {
clip: {
// these two configuration variables does the trick
autoPlay: false,
autoBuffering: true // <- do not place a comma here
},
playlist: [<?php echo $VideoPlaylist; ?>]
});
</script>
</div>
</div>
<?php
}
?>