Javascript function response in Jquery not working - php

I have a form that using ajax to post the comment to video_comment.php then show up the comment live on video page.
This is my jquery code:
$("input[id*='post_video_playallcomment_']").livequery('click', function(event) {
event.preventDefault();
var video_msg = $("#post_message");
var input_id = $(this).attr('id');
var id_split = input_id.split('_');
var video_id = id_split[3];
var comment = $("textarea[id='video_comment']").val();
var response_messages = '#video_response';
if ( comment == '' ) {
video_msg.fadeIn();
return false;
}
video_msg.hide();
user_posting(response_messages, '<?php echo $lang['600']; ?>', 1);
reset_chars_counter();
$.post(base_url + '/video_comment.php', { video_id: video_id, comment: comment },
function(response) {
if ( response.msg != '' ) {
$(response_messages).hide();
user_posting(response_messages, response.msg);
$("textarea[id='video_comment']").val('');
} else {
$(response_messages).hide();
user_response(response_messages, '<?php echo $lang['587']; ?>');
$(".no_comments").hide();
$("textarea[id='video_comment']").val('');
var bDIV = $("#comments_delimiter");
var cDIV = document.createElement("div");
$(cDIV).html(response.code);
$(bDIV).after(cDIV);
}
}, "json");
});
On video_comment.php, this is the response.code to show up the comment live on video page.
echo 'text...
echo '<div id="commentplayer"></div>';
echo '<script type="text/javascript">';
echo 'jwplayer("commentplayer").setup({';
echo 'file: "...url",';
echo 'width: "300",';
echo 'height: "225",';
echo 'provider: "http",';
echo 'startparam: "start",';
echo 'wmode: "transparent",';
echo 'controls: "true",';
echo 'stretching: "uniform",';
echo 'primary: "flash",';
echo 'autostart: "false",';
echo 'ga: {}';
echo '});';
echo '</script>';
echo 'text...
I have no problem to get 'text...', but i can't get '<script type="text/javascript">function...</script>' to show up live on video page.
Help please...

instead of placing javascript code in the php return, why dont you place it in the .post response?
$("input[id*='post_video_comment']").click(function() {
$.post('video_comment.php', function(response) {
$('#comment').html(response.code);
//place javascript code here
}, "json");
});
or placing a onload before your js code
$str = '<div id="commentplayer"></div>
<script type="text/javascript">
window.onload=(function() {
jwplayer("commentplayer").setup({
file: "...url",
width: "300",
height: "225",
provider: "http",
startparam: "start",
wmode: "transparent",
controls: "true",
stretching: "uniform",
primary: "flash",
autostart: "false",
ga: {}
});
});
</script>';
echo $str;

Related

Using Jquery autocomplete with images

I am using the code bellow of foxycomplete to get some results from my db with images.
With local files works great but i cant do it with mysql.
Here is my code that i am using..
<form id="autocompleteForm" name="autocompleteForm" action="" method="post">
<input type="text" name="s" id="s" value="Search" style="border:none;" />
</form>
The Javascript Code:
(function($) {
$(document).ready(function() {
$( '#s' ).each( function(){
$(this).attr( 'title', $(this).val() )
.focus( function(){
if ( $(this).val() == $(this).attr('title') ) {
$(this).val( '' );
}
} ).blur( function(){
if ( $(this).val() == '' || $(this).val() == ' ' ) {
$(this).val( $(this).attr('title') );
}
} );
} );
$('input#s').result(function(event, data, formatted) {
$('#result').html( !data ? "No match!" : "Selected: " + formatted);
}).blur(function(){
});
$(function() {
function format(mail) {
return "<a href='"+mail.permalink+"'><img src='" + mail.image + "' /><span class='title'>" + mail.title +"</span></a>";
}
function link(mail) {
return mail.permalink
}
function title(mail) {
return mail.title
}
$("#s").autocomplete(completeResults, {
width: $("#s").outerWidth()-2,
max: 5,
scroll: false,
dataType: "json",
source: "video_search.php",
matchContains: "word",
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.title,
result: $("#s").val()
}
});
},
formatItem: function(item) {
return format(item);
}
}).result(function(e, item) {
$("#s").val(title(item));
//location.href = link(item);
});
});
});
})(jQuery);
And the php code to retrieve my data:
<?php
require "connectiondb.php";
if(isset($_REQUEST['s']))
{
$queryString = mysql_real_escape_string($_REQUEST['s']);
echo'var completeResults = [{';
$ss = mysql_query ("SELECT title, image FROM users WHERE title LIKE '$queryString%' LIMIT 7");
while($result = mysql_fetch_assoc($ss)) {
echo '
"permalink": "index.html",
"image": "'.$result['image'].'",
"title": "'.$result['title'].'"
},';
}
echo '}];';
}else{
}
?>
Thank you Guys!!!
Whats inside the $result['image']? If it contains the image file itself(binary data) and not just the path, then you need to create one more file (image.php?s=id) which would retreive just that binary data with adequate header.. ie
<?php
header('Content-Type: image/jpeg');
// sql stuff
echo $result['image'];
?>
In your main file you'll then call just
"image": "'.image.php?id='.$result['id'].'",
also, dont torture yourself and use json_encode() :)

Pass value to dialog modal

I am using multiple buttons (dynamic) that opens a single div:
<div class="dialog" title="Player">
<p>YouTube Player here</p>
</div>
and at the header I am using:
<script>
$(function() {
$(".dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$(".opener").click(function() {
$(".dialog").dialog("open");
});
});
</script>
I get the buttons use like this:
foreach ($ytObject->RKT_requestResult->entry as $video) {
return = $ytObject->parseVideoRow($video);
$delimiter = "**";
$VideoContent = explode($delimiter, $return);
if ($count % 2 == 0) {
echo "<div class=\"ResultEven\">";
echo "<button class=\"opener btn\" class=\"btn\">Play</button> ";
echo "Download ";
echo $VideoContent['6'];
echo "</div>";
} else {
echo "<div class=\"ResultOdd\">";
echo "<button class=\"opener btn\" class=\"btn\">Play</button> ";
echo "Download ";
echo $VideoContent['6'];
echo "</div>";
}
$count++;
}
I want to get the value of $VideoContent['0'] as the pop-up content of <div class="dialog" title="player"> so that I can put the YouTube video directly on the modal.
Use the following code to get the value:
$(".opener").click(function() {
var video = $(this).siblings("a").attr("href");
alert(video); //here video will have the value of $VideoContent['0']
$(".dialog").dialog("open");
});
I have done it. Function that I have used is:
<script>
$(function() {
$(".dialog").dialog({
width: 450,
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$(".opener").click(function() {
var video = $(this).siblings("a").attr("href");
var VideoId = video.replace('http://www.youtube.com/watch?v=', '');
var VideoId = VideoId.replace('&feature=youtube_gdata', '');
var youtube = "<embed width=\"420\" height=\"345\" src=\"http://www.youtube.com/v/" + VideoId + "\" type=\"application/x-shockwave-flash\"> </embed>";
$(".dialog").dialog("open").html(youtube);
});
});
</script>
And the link/button to open it is
<button class="opener btn" class="btn"><img src="img/Play-icon.png" alt="play" /> Play</button>
echo " ";
May be a bit silly or tricky :P But working properly! ^_^
Actually the buttons come in a loop. So, I have used the buttons to show the modal and a blank href to get the value. That's it. :)

PHP concatenation

I am trying to get into some PHP and I can't seem to figure out the following.
I can create a string by means of PHP with concatenation:
echo 'This ' . 'string ' . 'was ' . 'made ' . 'with concatenation.' . "\n";
But what if you want to do this with a variable? (I am guessing WP's functions can be called variables.) I am quite lost here. The following does not work. Or at least, my text editor throws an unknown error.
<?php
if ( is_404() ) {
echo "<script src='" . get_stylesheet_directory_uri(); . "/sm/script/soundmanager2-nodebug-jsmin.js'></script>
<script>
soundManager.setup({
url: '" . get_stylesheet_directory_uri(); . "/sm/swf/',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'http://www.mysite.com/sound.mp3',
volume: '25'
});
mySound.play();
},
ontimeout: function() {
}
});
</script>"
}
?>
It goes wrong here:
rc='" . get_stylesheet_directory_uri(); . "/s
You have a ; in the middle of your sentence. Also at the end of your string you don't have a ;
Correct syntax
<?php
if ( is_404() ) {
echo "<script src='" . get_stylesheet_directory_uri() . "/sm/script/soundmanager2-nodebug-jsmin.js'></script>
<script>
soundManager.setup({
url: '" . get_stylesheet_directory_uri() . "/sm/swf/',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'http://www.mysite.com/sound.mp3',
volume: '25'
});
mySound.play();
},
ontimeout: function() {
}
});
</script>";
}
?>
You can also change your approach to avoid such problems. Instead of embeding HTML into PHP you can embed PHP into HTML closing and opening PHP tags:
<?php if ( is_404() ) { ?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/sm/script/soundmanager2-nodebug-jsmin.js"></script>
<script>
soundManager.setup({
url: "<?php echo get_stylesheet_directory_uri(); ?>/sm/swf/",
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'http://www.mysite.com/sound.mp3',
volume: '25'
});
mySound.play();
},
ontimeout: function() {
}
});
</script>
<?php } ?>
Try this
if ( is_404() ) {
echo "<script src='" . get_stylesheet_directory_uri(). "/sm/script/soundmanager2-nodebug-jsmin.js'></script>
<script>
soundManager.setup({
url: '" . get_stylesheet_directory_uri(). "/sm/swf/',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'http://www.mysite.com/sound.mp3',
volume: '25'
});
mySound.play();
},
ontimeout: function() {
}
});
</script>";
}
you are adding ; in between the code which is incorrect.
Try this:
<?php
if ( is_404() ) {
echo "<script src='" . get_stylesheet_directory_uri() . "/sm/script/soundmanager2-nodebug-jsmin.js'></script>
<script>
soundManager.setup({
url: '" . get_stylesheet_directory_uri() . "/sm/swf/',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'http://www.mysite.com/sound.mp3',
volume: '25'
});
mySound.play();
},
ontimeout: function() {
}
});
</script>";
}
?>
You can save yourself a lot of headache if you simply save the return value of the function:
<?php
if ( is_404() ) {
$temp = get_stylesheet_directory_uri();
echo "<script src='$temp/sm/script/soundmanager2-nodebug-jsmin.js'></script>
<script>
soundManager.setup({
url: '$temp/sm/swf/',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'http://www.mysite.com/sound.mp3',
volume: '25'
});
mySound.play();
},
ontimeout: function() {
}
});
</script>"
}
?>

Appending new comment to the old comments division

I am trying to append new comment to the old comment box .
Here is my code , Dont know why its not working
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$(".bsubmit").click(function () {
var id = $(this).parent().parent().attr("id");
var comm = document.getElementById(id).getElementsByClassName("commentadd")[0].value;
$.ajax({
type: "POST",
url: "comment.php",
data: {
id: id,
comm: comm
},
cache: false,
success: function () {
$('.addcomment').slideUp('slow', function () {
// POSTED IN DATABASE SUCCESS NOW APPEND The comment with other COMMENTS
document.getElementById(id).getElementsByClassName(".itemcomment").append('<div class="comm">
<a href="profile.php?id=<?php echo $_SESSION['
fbid ']; ?> class="comm_img"><img src=" <?php echo $_SESSION['
smallest ']; ?> width="50" height="50" /></a>
<p width="50"><strong>
</strong></p>
</div>');
});
$('#load').fadeOut();
}
});
return false;
});
});
});
</script>
I think the error is in the code inside the "slideUp" callback, so I think the correct way to do it is:
Using regular JavaScript:
$('.addcomment').slideUp('slow', function () {
var elem = getElementById(id).getElementsByClassName(".itemcomment")[0],
div = document.createElement("div"),
a = document.createElement("a"),
p = document.createElement("p"),
img = document.createElement("img"),
strong = document.createElement("strong");
div.className = "comm";
a.className = "comm_img";
a.href = "profile.php?id=<?php echo $_SESSION['fbid ']; ?>";
img.src = "<?php echo $_SESSION['smallest ']; ?>";
img.width = "50";
img.height = "50";
p.width = "50";
p.appendChild(strong);
a.appendChild(img);
div.appendChild(a);
div.appendChild(p);
elem.appendChild(div);
});
Using JQuery:
$('.addcomment').slideUp('slow', function () {
var html = '<div class=comm>';
html += '<a href="profile.php?id=' + "<?php echo $_SESSION['fbid'];?>" + 'class=comm_img>';
html += '<img src="' + "<?php echo $_SESSION['smallest']; ?>" + 'width="50" height="50" /></a>';
html += '<p width="50"><strong></strong></p></div>';
$(".itemcomment", "#"+id).append(html);
});
Hope it helps!

jQuery $.ajax does not work

I wrote a code using jQuery plugin fullcalendar, and everything worked just fine, until I send an $.ajax request in the eventClick.
I tried to alert something in the eventClick and it worked, but the ajax request just doesn't work.
js code:
!function($)
{
$(document).ready(function() {
$("#eventDialog").dialog({
autoOpen : false,
modal : true
});
var date = new Date();
var d = date.getDay();
var m = date.getMonth();
var y = date.getFullYear();
$("#calendar").fullCalendar({
theme : true,
header : {
left : 'next,prev today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
editable : false,
events : [
<?php
while ($event = mysql_fetch_array($selectevents))
{
$startd = explode(".", $event['start']);
$endd = explode(".", $event['end']);
$starth = explode(":", $event['starth']);
$endh = explode(":", $event['endh']);
?>
{
id : <?php echo $event['id']; ?>,
title : '<?php echo stripslashes($event['title']); ?>',
<?php
if ($event['allday'] == 1)
{
?>
start : new Date(<?php echo $startd[2]; ?>,<?php echo $startd[1]-1; ?>,<?php echo $startd[0]; ?>),
end : new Date(<?php echo $endd[2]; ?>,<?php echo $endd[1]-1; ?>,<?php echo $endd[0]; ?>)
<?php
}
else
{
?>
start : new Date(<?php echo $startd[2]; ?>,<?php echo $startd[1]-1; ?>,<?php echo $startd[0]; ?>,<?php echo $starth[0]; ?>,<?php echo $starth[1]; ?>),
end : new Date(<?php echo $endd[2]; ?>,<?php echo $endd[1]-1; ?>,<?php echo $endd[0]; ?>,<?php echo $endh[0]; ?>,<?php echo $endh[1]; ?>),
allDay : false
<?php
}
?>
}
<?php
$evNum--;
if ($evNum > 0)
echo ",";
}
?>
],
eventClick : function(event) {
var eid = event.id;
$.ajax({
type : "GET",
url : "getEvent.php",
data : "id=" + eid,
succuss : function(msg) {
var title = $("event title", msg).text();
var description = $("event description", msg).text();
var start = $("event start", msg).text();
var end = $("event end", msg).text();
var starth = $("event starth", msg).text();
var endh = $("event endh", msg).text();
$("#eventDialog").attr("title", title);
$("#eventDialog #edDescription").html(title);
eventDialog.dialog("open");
}
});
}
});
});
}(jQuery);
getEvent.php
$id = htmlspecialchars(mysql_real_escape_string($_GET['id']));
$selectevent = mysql_query("SELECT * FROM `calendar` WHERE `id`='$id'") or die(mysql_error());
$event = mysql_fetch_array($selectevent);
header("Content-Type: text/xml; charset=utf-8");
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo "<event>";
echo "<id>".$event['id']."</id>";
echo "<title>".stripslashes($event['title'])."</title>";
echo "<description>".$event['description']."</description>";
echo "<start>".$event['start']."</start>";
echo "<end>".$event['end']."</end>";
echo "<starth>".$event['starth']."</starth>";
echo "<endh>".$event['endh']."</endh>";
echo "</event>";
Can anybody point out the problem?
Thank's!
succuss??, i guess is this your problem , it should be "success"
Change succuss to success in your code it must be a typo.
Since jQuery $.ajax did not find the success handler in its settings it didn't do anything.

Categories