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. :)
Related
Basically I want my tooltip to display company names once company_id is being hovered. However instead of displaying "Company A" for example, it just displays "Company". I realized that it's just printing everything before a space.
Here's the script:
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>
and here's my codes
<?php
$companyCtrl = new company_controller();
$companyInfoArr = $companyCtrl->retrieveAllCompanyInfo();
foreach($companyInfoArr as $info) {
$company_id = $info->getCompanyID();
$company_name = $info->getCompanyName();
echo "<a href='#' title=".$company_name." class='masterTooltip'>".$company_id."</a> <br>";
}
?>
There's not problem when i manually enter the text like this
Your Text
In this line:
echo "<a href='#' title=".$company_name." class='masterTooltip'>".$company_id."</a> <br>";
You need to add quotes around the title, so the HTML you're generating will be properly formed. Like this:
echo "".$company_id." <br>";
jQuery.ajaxSettings.traditional = true;
$(document).ready(function(){
$(".wijstoe").change(function(){
var id = $(this).children('#test').map(function() {
return $(this).text();
}).get();
var mw = $("option").val();
var opg = "Opgeslagen !";
$("#loading").css("display","block");
$.post("wijstoe.php",
{mw:mw, id:id},
function(data,status)
{
$("#loading").css("display","none");
$(this).children('#tester').html(opg);
});
});
});
HTML / PHP :
echo "<td>$row[2]</td>";
echo "<td id='test1'>";
echo "<div class='wijstoe'>";
echo "<div id='test' style='display:none;'>".$row[0]."</div>";
echo "<form><select>";
if($_SESSION['uname'] == 'admin') {
$querya="select uname from users";
$resulta = mysql_query($querya);
while ($rowa = mysql_fetch_row($resulta)) {
echo "<option>".$rowa[0]."</option>";
}
echo "</select></form>";
echo "<div id='tester'>DIDI</div>";
echo "</div>";
echo "</td>";
}
This does not get the text from id tester (DIDI) replaced by the text opgeslagen.
When I don't use $(this) it works but then it works for every div with id tester, i just want this specific div to have the text replaced.
So this works :
$(this).children('#tester').html(opg);
This does not work :
$('#tester').html(opg);
$.post("wijstoe.php",
{mw:mw, id:id},
function(data,status)
{
$("#loading").css("display","none");
$(this).children('#tester').html(opg);
});
The $(this) at the location listed will be the POST method.
Having multiple elements with the same ID is not a good practice. Change to a class when using on multiple elements.
var tester = $(this).find('.tester');
$.post("wijstoe.php",
{mw:mw, id:id},
function(data,status)
{
$("#loading").css("display","none");
$(tester).html(opg);
});
try
$(this).find('#tester').html(opg);
i have created auto scroll for my website but i am getting repeated results something like this.if just consider the row no it is giving output like this
100
99
100
99
98
100
99
98
97
here is my javascript and php code
first page displays the message from database so i am taking that message id and making one ajax request .here is javascript which is on the same page as first message.
<script>
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
$("#imgtag1").html("<img src="http://static.way2enjoy.com/files/loading.gif" /> Loading");
$.post("'.uhome().'/index.php?p=jquery/morethread/'.$nextb.'",
function(data){
$("#imgtag1").before(data);
if (data) {
$("#imgtag1").show();
}
$("#imgtag1").html("");
},"html"
);
}
});
</script>
here is my morethread code
$c=explode("/",$_SERVER[ 'REQUEST_URI' ]); $city1=end($c);
$res = sql_query("select * from tableA where id='{$city1}'");
$row67 = sql_fetch_array($res);
$nextbtn=$row67['id']-1;
echo '<script>
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
$("#imgtag1").html("<img src=\"http://static.way2enjoy.com/files/loading.gif\" /> Loading");
$.post("'.uhome().'/index.php?p=jquery/morethread/'.$nextbtn.'",
function(data){
$("#imgtag1").before(data);
if (data) {
$("#imgtag1").show();
}
$("#imgtag1").html("");
},"html"
);
}
});
</script>';
echo '<br></br>';
echo nl2br(decode_bb(h($row67['id'])));
echo '<br></br>';
echo '<b>=============================================</b>';
echo '<br></br>';
echo nl2br(decode_bb(h($row67['message'])));
echo '<br></br>';
echo '<b>=============================================</b>';
echo '<br></br>';
here is my live page where i am doing mistake .
http://way2enjoy.com/forums/viewthread/149498/
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;
So I have a php page that gets data from database and displays a table. Each td symbolises a seat in a movie theater. What i want to do is when a user clicks on one or more tds, and clicks send, the status column for each td in the database changes to 1 from 0(default). When the database is accessed next time, the td's with status=1 have a different color.
My code upto now is:
<div id="screen">SCREEN</div>
<div id="Seatings">
<?php echo "<table border='1'>
<tr>
<th>Seating</th>
</tr>";
$count=0;
echo "<tr>";
echo"<td id='Seat_rn'>A</td>";
while($row = mysql_fetch_array($sql))
{
if($count<10){
echo "<td id='Seat_A' class='count'>" . $row['Seat'] . "</td>";
}
$count++;
}
echo "</tr>";
$sql=mysql_query("SELECT * FROM Seating_para_20 Where Seat > '10'");
echo "<tr>";
echo"<td id='Seat_rn'>B</td>";
while($row = mysql_fetch_array($sql))
{
if($count>=10){
echo "<td id='Seat_B' class='count'>" . $row['Seat'] . "</td>";
}
$count++;
}
echo"</tr>";
echo "</table>";
?>
</div>
<input type="button" value="Done" name="done" onclick="window.close()">
My jquery code is:
$("td #Seat_A").click(function(){
$(this).css("background", "red");
});
$("td #Seat_B").click(function(){
$(this).css("background", "red");
});
$(document."done").click(function(){
alert(price:750 Baht);
})
I am nowhere near what i want and I'm sorry if any of my code is "amatuer-ish" but I am new to this and I have been trying very hard. Would appreciate any help that I can get.
First of all you have to add an ID to every TD on your table, i.e. Seat ID, For example:
echo "<td id='Seat_A' data-seat='". $row['id'] ."'class='count'>" . $row['Seat'] . "</td>";
Then send this ID to your PHP script with Ajax:
$("td #Seat_A").click(function(){
var seat_number = $(this).data("seat");
$.ajax({
type: 'POST',
url: "/take_a_seat.php",
data: 'seat_number='+seat_number,
success: function(data){
$(this).css("background", "red");
}
dataType: "json"
});
});
On the PHP script you have to do what you want to the seat with this ID and return true or false as a result. Let's suppose you have a field named reserved in your database table. You can get the unique ID and update that row to reserved = 1 for example.
Try this easy to use ajax script to accomplish your task
Features: you can show an gif img before send data to db in beforeSend section get response from php file in success section hide img after data inset in db in complete section and show successful or not success msg
var myVar = 'your desire data you want to send to db';
$.ajax({
type: "POST",
url:"scripts/dummy.php",
data:"myVar="+myVar,
beforeSend: function()
{
},
success: function(resp)
{
},
complete: function()
{
},
error: function(e)
{
alert('Error: ' + e);
}
}); //end Ajax
Javascript is client side. Your database is server side.. So you have to use php to change your database entries.
In short, if you want to execute PHP stuff without reloading page, than use AJAX. You can use it with your favorite JQuery.
This is an overview. For existing records you should some thing like this
<?php
$count=1;
$res = mysql_query("SELECT * FROM Seating_para_20 Where Seat > '10'");
while($row = mysql_fetch_array($sql)) {
if($row['status']==1) {
$tdcolor = 'red';
} else {
$tdcolor = 'blue';
}
?>
<td id="td-<?php echo $count;?>" sytle="background-color:<?php echo $tdcolor; ?>" onclick="reserveseat(<?php echo $count; ?>);" >
<?php
$count++;
}
?>
For changing after page load you will do ajax operation
<script type="text/javascript" language="javascript">
function reserveseat(count) {
$.ajax({
type: 'POST',
url: "bookseat.php",
data: '',
success: function(data){
$("#td-"+count).css("background-color", "red");
}
});
}
</script>
In bookseat.php you will change the status ... :-) Read about ajax from here . :-)