I have a jplayer here to play an audio: AUDIO
Problem is that it is not playing my audio file I have. How can I get the audio to play?
The audio files comes from the directory AudioFiles/Kalimba.mp3. I retrieve the directory from the db and then tell the jsplayer to play the audio in this directory. This should have then played the audio but nothing happens if I click on the play button
jplayer summary here: http://www.jplayer.org/latest/quick-start-guide/step-8-audio/
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Preview Audio</title>
<link type="text/css" href="jquery/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery/jquery.jplayer.min.js"></script>
</head>
<body>
<?php
$getaudio = 'AudioFiles/' . $_GET['filename'];
$audioquery = "SELECT AudioFile FROM Audio WHERE (AudioFile = ?)";
if (!$audiostmt = $mysqli->prepare($audioquery)) {
// Handle errors with prepare operation here
}
// Bind parameter for statement
$audiostmt->bind_param("s", $getaudio);
// Execute the statement
$audiostmt->execute();
if ($audiostmt->errno)
{
// Handle query error here
}
$audiostmt->bind_result($dbAudioFile);
$audiostmt->fetch();
$audiostmt->close();
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp4: "<?php echo $dbAudioFile; ?>"
});
},
swfPath: "/jquery",
supplied: "mp3"
});
});
</script>
<?php echo "File Path " . $dbAudioFile; ?>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
debug it with console, ex. firebug (ff plugin) and paste the result here please
Related
I'm trying to use the Popup widget of Jquery Mobile 1.4.5 but I've got some problem when I try to load a external page in a Popup from a sub page. Here's my code:
Index.htm:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview">
<li>IMDB</li>
<li>Test A</li>
<li>Test B</li>
</ul>
</div><!-- /page -->
</body>
</html>
list.php:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview">
<li>Bangkok Dangerous
<li>Drive Angry
<li>Knowing
</ul>
</div>
</body>
<script language="javascript">
function loadPopup(url) {
$.ajax({
type: "GET",
url: url
}).done(function(data) {
$.mobile.activePage.append($(data)).trigger("create");
$("#popup1").popup().popup("open");
});
}
</script>
</html>
imdb.php:
<html>
<body>
<div data-role="popup" id="popup1" style="min-height:300px;width:80%;left:10%;right:10%;" class="ui-content">
Fermer
<?php
$imdbnumber = $_GET["imdbnumber"];
$movie_poster = "http://img.omdbapi.com/?apikey=xxxxxxxx&i=" . $imdbnumber . "&h=300";
$movie_details = json_decode(file_get_contents("http://www.omdbapi.com/?i=" . $imdbnumber . "&plot=full"));
echo "<div style='float:left;padding-right:20px;'><img src='" . $movie_poster . "' height=300></img></div>";
echo "<div><h3><b>" . $movie_details->Title . " (" . $movie_details->Year . ")</b></h3>" . $movie_details->Plot . "</div>";
?>
</div>
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</body>
</html>
When I load index.htm then click on IMDB link then try to load IMDB info for one of the listed movie, it doesn't work. If I load directly list.php then my Popup is working perfectly.
Something I'm doing wrong?
Thank you!
P.S.: I've tried with Colorbox but I get the same kind of result... :-/
I am trying to use jqmobi with PHP where everything is working but when I try to use PHP session it's not working. First when I use jquery post then it will retrieve data from server but when I reload page then session is destroyed.
I have kept session_start() in every file but still of no use. So if anybody have worked with jqmobi and PHP, share your experience. I am posting my main index.php file:
<?php
session_start();
?>
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>UI Starter</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" >
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.base.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<!-- http://code.jquery.com/jquery-1.10.1.min.js -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="./js/lib/jquery.validate.min.js"></script>
<script src="./js/jq.appframework.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"> </script>
<script src="./fcharts/FusionCharts/FusionCharts.js"></script>
<!-- include touch on desktop browsers only -->
<script>
// $.ui.showBackButton = false;
if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
var script = document.createElement("script");
script.src = "plugins/af.desktopBrowsers.js";
var tag = $("head").append(script);
//$.os.android = true; //let's make it run like an android device
//$.os.desktop = true;
}
</script>
</head>
<body>
<div id="afui"> <!-- this is the main container div. This way, you can have only part of your app use UI -->
<!-- this is the header div at the top -->
<div id="header">
<a onclick="$.ui.toggleSideMenu()" id="mainbuon" class="menuButton" style="float:right"></a>
</div>
<div id="content">
<!-- here is where you can add your panels -->
<div title='Management' id="elogin" class="panel" selected="true"
data-load="notloadedPanel" data-unload="notunloadedPanel">
<h2 >login</h2>
<form id="sample" style="position:absolute;width:250px;height:350px; left:50%; top:50%;margin-left:-130px;margin-top:-50px;">
<input type="email" id="email" name="email" value="" placeholder="username"style="text-align:center;" >
<div id="error"></div>
<input type="password" id="password" name="password" value="" placeholder="password" style="text-align:center;" >
<div id="error1"></div>
<a class="button" onclick="validate()" >Login</a>
</form>
<footer>
</footer>
</div>
<div title='List' data-defer="evelist.php" id="elist" class="panel" data-header="testheader"
data-tab="navbar_list" data-load="loadedPanel" data-unload="unloadedPanel">
</div>
<div id="setting" class="panel" title='Management' data-defer="Setting.php" data-load="settingloadedPanel"
data-unload="settingunloadedPanel" data-tab="navbar_list" >
</div>
<div id="missreport" class="panel" data-defer="MissReports.php" title='Management' data-load="reportloadedPanel"
data-unload="reportunloadedPanel" data-tab="navbar_list" >
</div>
<header id="testheader">
<a onclick="$.ui.toggleSideMenu()" id="mainbuon" class="menuButton" style="float:left"></a>
<!-- <a id="backButton" onclick="$.ui.goBack()" class='button'>Go Back</a> -->
<h1>Events List</h1>
</header>
</div> <!-- content ends here #smessage -->
<!-- bottom navbar. Add additional tabs here -->
<div id="navbar">
<div class="horzRule"></div>
<a href="#Dashboard" id='navbar_dash' class='icon home'>Dashboard</a>
<a href="#elist" id='navbar_list' class='icon home'>list</a>
<a href="#aevent" id='navbar_add' class='icon home'>Add ent</a>
<a href="#smessage" id='navbar_sent' class='icon home'>Sent Msg</a>
<a href="#sendmessage" id='navbar_send' class='icon home'>Send Msg</a>
</div>
<!-- this is the default left side nav menu. If you do not want any, do not include these -->
</div>
</body>
<script type="text/javascript">
var webRoot = "./";
$.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away. We set it to false to show a splashscreen
$(document).ready(function(){
//
$.ui.launch();
});
$.ui.backButtonText="Back"
$(document).bind("swipeLeft",function(){
$.ui.toggleSideMenu(false);
});
$(document).bind("swipeRight",function(){
$.ui.toggleSideMenu(true);
});
//$.ui.useAjaxCacheBuster=true;
function logout(){
var rt= "<?php echo session_destroy(); ?>";
$.ui.loadContent("#elogin",false,false,"slide");
} /***login form panel start here****/
function notloadedPanel(){
$.ui.disableSideMenu();
$('#mainbuon').hide();
$.ui.clearHistory();
}
function notunloadedPanel(){
$.ui.enableSideMenu();
$('#mainbuon').show();
}
function validate(){
var validator = $("#sample").validate({
rules: {
email: {
required: true,
}
, password: {
required: true,
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "email" ) {
// error.insertAfter("#error");
error.appendTo('#error');
} else {
//error.insertAfter(element);
error.appendTo('#error1');
} },submitHandler: function() {
$.post(webRoot + 'parameter.php', {
email:$('#email').val(),password:$('#password').val(),Login:'Login'
}, function (data) {
if($.trim(data)=='success'){
$.ui.loadContent("#elist",false,false,"slide");
}else{
alert("wrong username and password");
}
});
}
});
if(validator.form()){
$('form#sample').submit();
}
}
/***login form panel ends here****/
document.addEventListener("DOMContentLoaded", init, false);
$.ui.ready(function () {
//This function will get executed when $.ui.launch has completed
// $.ui.showBackButton = false;
});
/* This code is used for native apps */
var onDeviceReady = function () {
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
webRoot = AppMobi.webRoot + "/";
//hide splash screen
AppMobi.device.hideSplashScreen();
$.ui.blockPageScroll();
};
document.addEventListener("appMobi.device.ready", onDeviceReady, false);
</script>
The code should be sufficient, however you need to find out if session_destroy or unset($_SESSION) was called else where
<?php
session_start();
$_SESSION['key'] = "value";
?>
I have designed a web site which takes image as input and by using ajax I have displayed the image.It was working fine locally but when I uploaded it into the server the image is not shown. The process that takes place is: 1)User uploads an image 2)The image is stored in a temporary folder by default 3)The image that is stored in the temporary folder is moved to a folder upload 4) The image is displayed in a div. I checked the path but it seems okay for me. I will post the code for review:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="MainStyleSheet.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="html5slider.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#file').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
</script>
<script type="text/javascript">
function myfunction()
{
$("#display").html('');
$("#display").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#retrieveimageform").ajaxForm(
{
target: '#display'
}).submit();
$("#tagsform").ajaxForm(
{
target: '#tags'
}).submit();
};
</script>
<title></title>
</head>
<body>
<div id="maindiv">
<div id="banner">
<?php
include 'Header.php';
?>
</div>
<div id="wrapper">
<div id="imageupload">
<form action="uploadimage.php" method="post"
enctype="multipart/form-data" id="imageform">
<label for="file">Upload your image:</label>
<input type="file" name="file" id="file"><br>
</form>
</div>
<div id='preview'>
</div>
<div id='tags'>
</div>
</form>
<div class="clear"></div>
........................................
<div id="footer">
<?php
include 'Footer.php';
?>
</div>
</div>
<div id='screen'>
</div>
</body>
</html>
The uploadimage.php contains:
<?php
session_start();
$allowedExts=array("gif","jpeg","jpg","png");
$extension= end(explode(".", $_FILES["file"]["name"]));
if((($_FILES["file"]["type"]=="image/gif")
||($_FILES["file"]["type"]=="image/jpeg")
||($_FILES["file"]["type"]=="image/jpg")
||($_FILES["file"]["type"]=="image/png"))
&& ($_FILES["file"]["size"]<2000000)
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"]>0)
{
echo "Error:".$_FILES["file"]["error"]."<br>";
}
else{
// echo "Upload: ".$_FILES["file"]["name"]."<br>";
// echo "Store in: ".$_FILES["file"]["tmp_name"]."<br>";
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$_FILES["file"]["name"]);
//echo "Stored in "."upload/".$_FILES["file"]["name"];
echo "<img src='upload/".$_FILES["file"]["name"]."' class='preview' height='300' width='250'>";
$_SESSION['img']="upload/".$_FILES["file"]["name"];
}
}
else
{
echo "Invalid file";
}
?>
In the server the image is not stored in the upload folder when the user given an input and the image is not shown. Any solutions?:Please help. The server is linux server.
The problem is with file permission.
use the following command
sudo chmod 777 absolute_path_of_you_dir
on Ubuntu.
Ok , so I am trying to load content from a another page using JQUERY LOAD method SO THE content can appear without the page refreshing. I did that but when I click on the link below generated from PHP , it still redirects me to the other page instead of the content loading into the <div class="panel">
Below is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> MadScore, A Social Scoring Platform </title>
<link rel="stylesheet" type="text/css" href="css/madscore.css">
<link rel="stylesheet" type="text/css" href="css/skins/tango/skin.css" />
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1, buttonNextHTML:"<div></div>", buttonPrevHTML:"<div></div>"
});
});
</script>
//Here is where I made the Jquery call for the div below with class "panel" but it won't load ..
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
</head>
<body>
<div class="sliding-panel">
<div class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<li>
<div class="panel"> //panel supposed to be triggered by Jquery
<h1> People </h1>
<?php
database_connect();
$query = "select * from People";
$result = $connection->query($query);
$row_count =$result->num_rows;
for($i = 1; $i <= $row_count; $i++)
{
$row = $result->fetch_assoc();
echo "<a href='/profile.php?id=".$row['ID']."' id='profile'><img src ='../".$row['Picture']."' width='100' height='100' /> </a>";
}
?>
</div>
</li>
<li>
<div class="panel">
<h1>Ballers</h1>
</div>
</li>
<li>
<div class="panel">
<h1>Movies</h1>
</div>
</li>
<li>
<div class="panel">
<h1> Talking heads</h1>
</div>
</li>
</ul>
There are few errors,
1 Wrong spelling of script. scrip should be script
2 wrong syntax of id selector. $("profile") should be $("#profile")
3 loading constant string instread of current element href. load("this.href") should be
load(this.href)
Change
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
To
<script type="text/javascript">
$(document).ready(function(){
$("#profile").click(function(){
$(".panel").load(this.href);
});
});
</script>
I cannot seem to get this to work. I have a small JS file that switches banners depending on the time of day, but it seems that doing an external reference in my PHP file does not work. It works fine in an HTML page.
This is the code in the JavaScript file.
function getStylesheet() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 19) {
document.write("<img src='images/banner_day.jpg'>");
} else {
document.write("<img src='images/banner_night.jpg'>");
}
}
getStylesheet();
And here is the reference code I used to call the JavaScript file. Its in a PHP file.
<script src="http://beta.website.com/wp-content/themes/theme/scripts/banner.js"></script>
Everything on the PHP page shows up in the browser, except for the banner that I tried to call with the script.
Here is the entire PHP file code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<img src="http://beta.dfdfdf.com/wp-content/themes/asdafd/images/logo.png" />
</div>
<div id="shadow2"></div>
<div id="shadow1"></div>
<ul id="menu">
<li>df</li>
<li>df</li>
<li>fd df df</li>
<li>The asfdssd asdfds</li>
<li>sf</li>
<li>df</li>
<li>dfd</li>
</ul>
<div id="slogan"><big>"fasfdsads2005."</big></div>
<div id="loginDiv">Login Panel Here</div>
</div>
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script></div>
<div class="sidebar">
Sidebar Content<br />
<br /><br />
blah
blah
blah
</div>
<div class="content">
Main Content
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Cadsfadsfafdfsd.com All Rights Reserved</h3>
<p>dsafasdfdffadffadsdafsdfsadafsdfsadfas</p>
</div>
<div class="footer_column2">
<h3>More Links</h3>
<ul>
<li><a href="http://aadfsdfsdfa.
com">asfsdfa</a></li>
<li><a href="http://ItsNotch.
com">ItsNotch</a></li>
<li><a href="http://adfasfsfaf.
com">adsfasf</a></li>
<li><a href="http://twitter.
com/safs">Twitter</a></li>
<li><a href="https://www.facebook.com/group.php?gid=10215yy20340498">Facebook Fan Page
</a></li>
</ul>
</div>
<div class="footer_column2">
<h3>RSS</h3>
<ul>
<li>RSS Feed</li>
<li>What is RSS?</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try changing your Javascript to this:
window.onload = function () {
// Uncomment this line to make sure the script is loading/running, then delete it
// alert('Hello, your Javascript is running');
// Declare variables
var currentTime, bannerDiv, newImg;
// Get currentTime
currentTime = new Date().getHours();
// Get 'banner' div
bannerDiv = document.getElementById('banner');
// Get create a new <img>
newImg = document.createElement('img');
// Assign a src="" attribute depending on the time
newImg.src = (currentTime > 7 && currentTime < 19) ? 'images/banner_day.jpg' : 'images/banner_night.jpg';
// add the new image to the document
bannerDiv.appendChild(newImg);
};
And put it in the <head> of the document, so change
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- ....... -->
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</div>
<!-- ....... -->
...to:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</head>
<body>
<!-- ....... -->
<div id="banner"></div>
<!-- ....... -->
If it still doesn't work, one of two things is happening:
Your javascript file is not actually at http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js so the script cannot be loaded/run. Uncomment the first line to confirm that the script is running.
Your banner images cannot be found at images/banner_night.jpg - make sure your relative paths are correct.
Have you made sure that you've actually got the <script></script> in your head? I certainly can't see it there (unless it is in <?php wp_head();>?).
Having attempted to navigate to http://beta.website.com/wp-content/themes/theme/scripts/banner.js it returns a 404, you'll need to fix this issue first.
Remember that javascript is client side, and all you want to do with php is spit out the tags somewhere for the browser to deal with.
It might be path problem.
What is you images (full) path?
What is you page (full) path?
As it is now it looks for images directory beneath your current page. Is this correct?