I'm trying to load a range slider in PHP (slider like one of http://ghusse.github.io/jQRangeSlider/demo.html).
This is the slider in HTML, which works (see: http://www.leff-design.nl/websites/sliderpreview/test.html):
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="jQAllRangeSliders-min.js"></script>
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script>
//<!--
$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});
//-->
</script>
</body>
</html>
Now I tried to set this to php but don't know exactly how to do this. I tried this (it's not the full php code but just a part of an Advanced custom field plugin php file):
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fields/css/iThing.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/jQAllRangeSliders-min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).load(function() {
$('#slider').editRangeSlider();
});
})(jQuery);
</script>
<?php
function create_field( $field )
{
{
echo '<script type="text/javascript">$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});</script>';
}
}
new acf_field_number_range();
?>
Also tried to echo the slider code but it does nothing. It does not get the right css classes like in the HTML file. How do I exactly connect the #slider id with the jquery files in php?
Thanks in advance.
Never mind, I forgot the <div id="slider">. Stupid.
Related
Ok, I've searched google and all over this site and am not finding the solution.
I have a php file with a button. I have all the included bootstrap/jquery-ui css files at the top and the corresponding .js files at the bottom. I also have a custom .js file that has ONE function which defines a custom dialog box. When I try to call it from the php file I get:
ReferenceError: $myDialog is not defined.
The included js file is called dialog.js and IS in the js folder.
Here are the php and js files:
$(function() {
/**
* $myDialog Custom Dialog Function
*
* Example Usage:
* var theTitle = "CUSTOM TITLE GOES HERE!";
* var msg = 'Your message goes here...';
* $myDialog.dialog("option", "title", theTitle);
* $myDialog.html(msg + '</div>');
* $myDialog.dialog('open');
*
* Filename: dialog.js
**/
var $myDialog = $('<div id="dialog-message">')
.dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
width: 400,
dialogClass: 'dialog-message ui-dialog-osx',
title: "Important Message!",
autoOpen: false,
show: 'fade',
hide: 'fade',
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}
],
});
});
<?php
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<title>Rental Application</title>
<!-- CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/html5reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" media="all">
<link rel="stylesheet" type="text/css" href="css/drwebguy.css" media="all" />
</head>
<body>
<div id="home" class="container-fluid main_content">
<div class="row">
<div class="col-md-4"><a id="btnMyDialog" class="btn btn-primary" role="button">myDialog</a></div>
<div class="col-md-4">
<p>This is just some text...</p>
</div>
<div class="col-md-4"></div>
</div><!-- row -->
</div><!-- class="container-fluid" -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.mask.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/js.cookie.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<!--<script type="text/javascript" src="js/drwebguy.js">--></script>
<script type="text/javascript">
$(function() {
$('#btnMyDialog').on('click', function(){
var theTitle = "CUSTOM TITLE GOES HERE!";
var msg = 'Your message goes here...';
$myDialog.dialog("option", "title", theTitle);
$myDialog.html(msg + '</div>');
$myDialog.dialog('open');
});
});
</script>
</body>
</html>
And, obviously, if I put that var function at the bottom of my file instead of including an external js file it works fine...but, also obviously, that defeats the purpose of oop :/
use all script like this :
(function($) {
$(document).ready(function(){
// .. script what you want
});
})(jQuery);
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
How to write php code(variable) in tooltip
Here is my code:-
<head>
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
<script type="text/javascript">
$(function() {
$('.ChillTip').ChillTip();
$('.ChillTip1').ChillTip({
CTBK:'#fff',
CTBC:'#000',
CTW:'150'
});
});
</script>
</head>
<body>
<?php
$abc= 'Urvisha';
?>
For more info.
<button class="ChillTip" title="This is a button example">BUTTON</button>
</body>
I want the $abc in my tooltip
if i am writing $abc inside title="" then $abc is displaying not its value
plz help me.....
You just need to echo the variable into the HTML:
<button class="ChillTip" title="<?php echo $abc?>">BUTTON</button>
I am getting an error ReferenceError: jQuery is not defined in jquery-ui-1.8.17. I tried to change code to jquery-ui-1.8.16 but that is also not working.
My template view is as follows:
<head>
<LINK REL="SHORTCUT ICON" HREF="<?php echo base_url('theme'); ?>/images/icon.jpg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('theme/css');?>/style.css" />
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery.js"></script>
</head>
can any one help me ??
you need to include jQuery base library first, and then you can include custom.
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
May be this link http://forum.jquery.com/topic/and-jquery-not-defined-problems
can help you out. maintaining the order can resolve your problem.
Change the order of your include scripts:
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
include jQuery before adding jQuery-ui
I'm trying to refresh a div with jquery that loads the time which is generated with php.
I've read some of the articles on jquery that were already on here and tried using those to refresh my div, but I failed.
echo '<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>' . $title . '</title>
<link type="text/css" rel="stylesheet" media="all" href="styles/style.css" />
<link type="text/css" rel="stylesheet" media="all" href="styles/layout.css" />
<link type="text/css" rel="stylesheet" media="all" href="styles/' . $bodycss . '" />
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function update() {
$.get("'.$_SERVER['REQUEST_URI'].'", function(data) {
$("#time").html(data);
window.setTimeout(update, 500);
});
}
</script>
<div id="container">
<header id="header" class="margin5">
<div id="info"> <img src="images/logo.jpg" alt="Oppasweb" /> </div>
<div id="time"><time datetime=' . getTimeForTag() . '>' . getTime() . '</time></div>
<div class="clear"></div>
';
}
The javascript should refresh the div every .5 of a second, generating the new time, however it doesn't do that, the time stays static.
your setInterval function is wrong (never closed).
you should not need it for that.
function update() {
$.get("'.$_SERVER['REQUEST_URI'].'", function(data) {
$("#time").html(data);
window.setTimeout(function() {update();}, 500);
});
}
$(document).ready(function () {
update();
});
moreover, with looping so often, you might want to id your call (with a i++), and append to the times to the div instead of replacing the full html. You might want to look for the difference between setTimeout and setInterval.
note: true, full html as string is bad practice. but for test purposes, it's not that important (imo)