This is the code i am using for the on page videos. I have multiple videos on the page.
<video class='player' onplay='myFunction()'
data-id='$row[id]' oncontextmenu='return false;'
width='300' height='180' controls controlsList='nodownload'>
<source src='' type='video/mp4'>
Your browser does not support the video tag.
</video>
This is the javascript i am using to pass the parameters...
<script type='text/javascript'>
function myFunction(){
$.ajax({
url: "check.php",
method: "POST",
data: { "videoId": $(this).data("id") },
dataType:"Text",
});
}
</script>
I am trying to insert the VIDEO ID in the database of the video when clicked to play.
For database i am using below code
if(isset($_POST['videoId'])){
$videoId=$_POST['videoId'];
mysqli_query($conn,"INSERT INTO video
(videoId,xx,yy)
VALUES ('$videoId','$xx','$yy')")
or die(mysqli_error($conn));
Related
Quality selector not working when I call the via jquery ajax.
HTML
<video style="background:black; border-radius:20px;"class="" id="player" "> </video>
Ajax code
$.ajax({
url:"/retrieve/video.php",
method:"POST",
data:{quality:quality,slig:slig,episode:episode,server:server},
success:function(data){
$("#loaders").hide();
$('#player').show();
$('#player').append(data);
}
});
I need to call a html data inside a twitter modal window from a .php file. How to call this function? This below script is inside a php file, i need to call this inside a modal window once we click the link. I am able to trigger the modal window but not the data.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title><?php echo $post->post_title; ?></title>
<meta name=”robots” content=”noindex”/>
</head>
<body>
<div style=”"><?php echo $image; ?></div>
<?php echo $post->post_title; ?></b>
<p style=”float: left;”>Testing</p>
</body>
</html>
you can achieve this by putting your HTML inside a file called remote.html, then run this:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
Alternatively, you can insert HTML into the modal window using jquery, kind of like this:
$('.modal-button').click(function() {
var myHTML = "[YOUR HTML]";
$('.modal-body').html(myHTML);
});
what you want is to display the image and title data inside the modal right?
<div>
<div id="image"></div>
<span id="myTitle"></span></b>
<p style=”float: left;”>Testing</p>
</div>
Place this content inside modal and fetch the image and title data through an ajax call
$(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Fetch.php",//give the path of the php file or the function
data: '{ "query": ' + data + ' }',//place the query data
dataType: "json",
success: function (msg) {
AjaxSucceeded(msg);
},
failure: function (response) {
alert("Failure");
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Error " + jqXHR + " " + textStatus.responseText + " " + errorThrown);
}
});
});
AjaxSucceeded(msg){
//replace the div with the image and the title
$(#image).innerHTML=msg.Image;
$(#myTitle).innerHTML=msg.Title;
}
Cheers!!!
I need to get the url for the artists track from the mysql databse for it to be played through jplayer. I achieved it with the normal html audio controls but cannot do it with jplayer as the audio source is entered in javascript.
Here's how i achieved it with the html player;
<?php
include ("../database.php");
$result = mysql_query("SELECT * FROM tracks WHERE artistname='$artistname'");
while($row = mysql_fetch_array($result)){
?>
<br><br>
<audio controls="controls" height="50px" width="100px">
<source src=<?php echo $row['trackurl'] ?> type="audio/mp3" />
<embed height="50px" width="100px" src="song.mp3" />
</audio>
<?php } <?
Heres the javascript for jplayer:
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://localhost/uploads/dde85d7907e516545ba0860ef1ac23f2.mp3"
});
},
swfPath: "../jplayer",
supplied: "mp3"
});
});
The url from the mysql databse needs to go where it says:
mp3: "http://localhost/uploads/dde85d7907e516545ba0860ef1ac23f2.mp3"
You can use AJAX to get the the value and pass it to the jPlayer
In your javascript make a variable of track like
var mp3file='<?php echo $row['trackurl']; ?>';
and then
$(this).jPlayer("setMedia", {
mp3: "mp2file"
});
This will work if you fetching a single song. If you fetching data in array then you need AJAX
I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below
I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images
when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt'}
});
});
});
Further pass it to the php file now here i m facing a problem what i need at the moment is
that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs
Here's the jquery code that should work:
<script>
$(function () {
$(document).on('click', 'div.prodcls img', function (e) {
e.preventDefault();
window.open($(this).attr('src').replace('/thumbnails', ''), '');
});
});
</script>
And some css for good measure:
<style>
div.prodcls img:hover {
cursor: pointer;
}
</style>
Here's a working fiddle: http://jsfiddle.net/DenGp/
Css:
#imagePopup{ float:left; z-index:10; position: absolute;}
Add some positioning
HTML:
<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>
JS:
$('.prodcls').click(function(){
var src = $(this).attr('src').replace('/thumbnail', '');
$("#imagePopup").html("<img src='"+src+"'/>")
$("#imagePopup").toggle();
});
Updated answer:
HTML: (give every image a link):
<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>
showImage.php:
$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;
You can open actual image in new browser tab without jQuery:
For Example:
<div id="prodoneid" class="prodcls">
<a href='images/zara1.png' target='_blank'>
<img src="images/thumbnail/zara/1.png" alt="ZARA"/>
</a>
</div>
Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/
You have an error in your AJAX code (your forgo to include the actual var:
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt':txt} //added :txt here
});
});
});
Now in PHP:
$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.
I am very new to Jquery and ajax so please be kind.
i am making a request to the server using jquery $.ajax, the ajax pulls the image from the image id stored on the server/database when the user clicks on a thumbnail of which there are loads. All works fine except with the following code i can only click on any of the thumbnails once to load the big picture from the database, after that no other thumbnail works.
Can anyone help?
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
function getimage(data){
var img = new Image();
$(img).load(function(){
$(img).hide();
$.ajax({
type: "GET",
url: "name.php?",
data: "name=" + data,
success: function(){
$("#loader").removeClass("loading").append(img);
$(img).fadeIn("slow");
}
});
}).attr("src", data +".jpg");
}
</script>
</head>
<body>
<h1>Image Loading</h1>
<div id="loader" class="loading">
</div>
<a href="name.php?name=image1" id="image1" onclick="getimage('image1'); return false;"/><img src="image1_th.jpg" /></a>
<a href="name.php?name=image2" id="image2" onclick="getimage('image2'); return false;" /><img src="image2_th.jpg" /></a>
<a href="name.php?name=image3" id="image3" onclick="getimage('image3'); return false;"/><img src="image3_th.jpg" /></a>
try this:
function getimage(data){
var img = new Image();
$(img).load(function(){
$(img).hide();
$.ajax({
type: "GET",
url: "name.php?",
data: "name=" + data,
success: function(){
$("#loader").html(''); // you need to remove the old image
$("#loader").removeClass("loading").append(img);
$(img).fadeIn("slow");
}
});
}).attr("src", data +".jpg");