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... :-/
Related
I am using phpstorm to create project using php, bootstrap and jquery. In this Project,I got two errors. But i don't know how to solve this error.
Can anyone tell me what is the fault? I have attached two images.
Code
<html>
<head>
<title>boutique</title>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-----NavBar----->
<nav class="navbar navbar-default navbar-fixedtop">
<div class="container-fluid">
boutique
<ul class="nav navbar-nav">
<li class="dropdown">Men<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Pants</li>
<li>Shoes</li>
<li>Accessories</li>
<li>Watch</li>
</ul>
</li>
</ul>
</div>
</nav>
<!---Header------>
<div id="headerwrapper">
<div id="back-flower"></div>
<div id="logotext"></div>
<div id="for-flower"></div>
</div>
<script>
jquery(window).scroll(function () {
var vscroll=jquery(this).scrollTop();
jquery('#logotext').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#back-flower').css({
"transform" :"translate("+vscroll/5+"px,-"+vscroll/12+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#fore-flower').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
});
</script>
</body>
</html>
Why do you using same name for var?
You can extract the scroll position using jQuery's .scrollTop() method
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});
Or try this;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});
I'm trying to echo php in a web page via an HTML form (test_form.php --> test.php). The form allows users to pick a date and time. I'll show the code for test_form.php and test.php below.
This works in Chrome (linux) -- my script checks that the date and hour are set, then echoes the date and hour in the browser.
But it doesn't work in Firefox (linux) or Safari (Mac).
In Firefox, I get a blank page. When I view the page source I see the echoed stuff -- except it tells me that date and hour are NOT set!
Has anyone experienced this? Does anyone have an idea what's going on?
thanks in advance.
test_form.php:
<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Select date a d/or time</title>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/js/doc.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.customflip.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/datebox/i18n/jqm-datebox.lang.utf8.js"></script>
<script type="text/javascript">
jQuery.extend(jQuery.mobile,
{
ajaxEnabled: false
});
function checkForm(form)
{
// validation fails if the input is blank
if(form.hour.value == "") {
alert("Error: Please select an hour!");
form.hour.focus();
return false;
}
// regular expression to match only digits (0-24)
var re = /0|(0[1-9])|(1[0-9])|(2[0-4]))/;
// validation fails if the input doesn't match our regular expression
if(!re.test(form.hour.value)) {
alert("Error: Input contains invalid characters!");
form.hour.focus();
return false;
}
// validation was successful
return true;
}
</script>
</head>
<body>
<div data-role='page'>
<a href='#' data-rel='back' class='ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all ui-nodisc-icon ui-alt-icon ui-btn-inline' data-role='button' role='button' data-inline='true'>Back</a>
<a href='#popupNested' data-role='button' class=' ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext ui-nodisc-icon ui-alt-icon ui-btn-inline' data-transition='turn' data-rel='popup' data-inline='true'>Date/time</a>
<div data-role='popup' id='popupNested' data-theme='none'>
<div data-role='collapsibleset' data-theme='a' data-content-theme='a' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' style='margin:0; width:250px;'>
<div data-role='collapsible' data-inset='false'>
<h2>Hourly</h2>
<ul data-role='listview'>
<li><a href='Manyhour_today_form.php' data-rel='dialog' data-role='date'>Pick an hour from today</a></li>
<li><a href='Manyhour_form.php' data-rel='dialog'>Pick hour from previous day</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role='collapsible' data-inset='false'>
<h2>Daily</h2>
<ul data-role='listview'>
<li><a href='Mtoday_POG.php'>So far today</a></li>
<li><a href='Manyday_form.php' data-rel='dialog'>Choose a previous day</a></li>
</ul>
</div><!-- /collapsible -->
<ul data-role='listview'>
<li><a href='Manymonth_form.php' data-rel='dialog'>Monthly</a></li>
<li><a href='Manyyear_form.php' data-rel='dialog'>Yearly</a></li>
</ul>
</div><!-- /collapsible set -->
</div><!-- /popup -->
<div data-role='content' style='width:50%'>
<form action='test.php' method='post' onsubmit='return checkForm(this);'>
<label for'date'><strong>Select a date and hour</strong></label>
<input type="text" name='date' data-role="datebox" data-options='{"mode":"calbox","calUsePickers": true, "calYearPickMin":2008, "calYearPickMax":"NOW", "beforeToday": true, "overrideDateFormat": "%Y-%m-%d"}' placeholder='click icon to select date'/>
<input type="text" name='hour' data-role="datebox" data-options='{"mode":"timeflipbox","minuteStep":60, "overrideTimeFormat": "%H", "overrideTimeOutput": "%H"}' placeholder='click icon to select hour' required="required"/>
<input type ='submit' name= 'submit' value='submit'>
</form>
</div>
</div><!-- /page -->
</body>
</html>
... and test.php:
<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
if(isset($_POST['date']))
{
$date = $_POST['date'];$date = str_replace("-","",$date);echo "date IS set, and it is ".$date."<br>";
}
else {
$date = "20150101"; echo "date variable not set";
}
if(isset($_POST['hour']))
{
$hour = $_POST['hour']; echo "hour IS set! And it is ".$hour."<br>";
if($hour == "00"){$hour =24;}
}
else {
$hour = "01"; echo "hour variable is not set";
}
?>
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
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>
In my site I have added a jQuery color picker textbox as like:
http://www.eyecon.ro/colorpicker/
When loading page through ajax then this color picker is not working. That means color picker is not working after ajax call.
How can i solve this problem?
My site is a CodeIgniter site:
This is my index page source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rock website</title>
<link href="<?php echo base_url();?>style/style_user_admin.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>style/jquery-jvert-tabs-1.1.4.css" />
<script type="text/javascript" src="<?php echo base_url();?>/js/ajaxupload.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/colorpicker.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/eye.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/utils.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/layout.js?ver=1.0.2"></script>
<link rel="stylesheet" href="<?php echo base_url();?>css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-jvert-tabs-1.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>js/jquery.cleditor.css" />
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.cleditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
page_setup();
});
</script>
<script type="text/javascript">
function page_setup()
{
$.ajax({
type: "POST",
url: "<?php echo base_url();?>index.php/super_admin/page_setup/",
success: function(msg){
//alert(msg);
$("#page_setup").html(msg).show();
}
});
}
</script>
</head>
<body>
<div class="wraper">
<div class="welcome_to_admin">
Super Admin Panel
</div>
<div class="admin_main">
<div id="vtabs1">
<div>
<ul>
<li>Page Setup</li>
</ul>
</div>
<div>
<div id="page_setup">
<!--
load the page_setup.php page here
-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is the super_admin controller code:
public function page_setup()
{
$this->load->view('super_admin/page_setup');
}
This is the page_setup.php page code:
<div class="tab1_rgt_part">
<div class="message_to_send_11">Color Settings</div>
<div class="tab1_main_part" style="margin-top:20px;">
<div class="tab1_left_part">Welcome Page Bg Color</div>
<input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" />
</div>
try adding the color picker after loading the html:
function page_setup()
{
$.ajax({
type: "POST",
url: "<?php echo base_url();?>index.php/super_admin/page_setup/",
success: function(msg){
//alert(msg);
$("#page_setup").html(msg).show();
$("#colorpickerField1").ColorPicker(
onChange: function (hsb, hex, rgb) {
$(this).val(hex);
}
);
}
});
}
$('#colorpickerField1, #colorpickerField2, #colorpickerField3,#colorpickerField4).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val("#"+hex);
//$(el).css("background-color","#"+hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
I found the answer.Add this code in a script tag at the top of the view page