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)
Related
I want to use bootstrapDialog alert (https://nakupanda.github.io/bootstrap3-dialog/) instead of default alertbox of browser in my controller but its not working.
I included these scripts I got from the github dist folder in the bottom of view
<link rel="stylesheet" href="assets/css/bootstrap-dialog.min.css" />
<script src="assets/js/bootstrap-dialog.min.js"></script>
Controller
function student(){
if ($student_status == 'paid'){
echo '<script type="text/javascript">';
echo 'BootstrapDialog.alert('Your Registration was successful')';
echo '</script>';
}
else {
// redirect url
}
}
I also tried to echo the css and js files in the controller but failed. If I echo the default alertbox, it works, please what could I be doing wrong?
first - you have some errors:
you need to escape your single quotes of the alert like:
echo 'BootstrapDialog.alert(\'Your Registration was successful\')';
or you could use mix of single and double quotes like:
echo 'BootstrapDialog.alert("Your Registration was successful")';
you also might need to load your script and css with a leading slash like:
<link rel="stylesheet" href="/assets/css/bootstrap-dialog.min.css" />
<script src="/assets/js/bootstrap-dialog.min.js"></script>
you are loading your stylesheet as script, <script src="assets/css/bootstrap-dialog.min.css"></script>; is incorrect, use <link rel="stylesheet" href="your.css">
second - its not a good idea to mix javascript and php the way you do it, you cannot call a jquery function from php, you can only generate html, which then executes at runtime. This would work:
if ($student_status == 'paid'){
$str=' <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<script type="text/javascript">
setTimeout(function() {
BootstrapDialog.alert(\'Your Registration was successful\')
},10);
</script>';
echo $str;
}
note the setTimout() function, it is needed to give a little time to make sure all your files are loaded.
third - The correct way is to use ajax instead: see docs:
jquery ajax calls your php function student.
function student returns true or false.
In the ajax success callback you add your bootstrapDialog.alert
Bootstrap dialog is built on Bootstrap, so you must include bootstrap css and bootstrap js, followed by the bootstrapDialog css and js
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
http://jsfiddle.net/mreis1/YJdB7/1/
For Example
View:
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<title>Bootstrap Dialog Test</title>
</head>
<body>
<!-- IF SUCCESSFUL -->
<?php $alert= ''; ?>
<?php if ($alert == 'success'): ?>
<script type = "text/javascript">
BootstrapDialog.alert('Your Registration was Successful');
</script>
<?php endif; ?>
<!-- IF FAILED -->
<?php if($alert == 'failed'): ?>
<script type = "text/javascript">
BootstrapDialog.alert({
title: 'An Error Occured',
message: 'Your Registration failed',
type: BootstrapDialog.TYPE_DANGER,
buttonLabel: 'Close'
});
</script>
<?php endif; ?>
</body>
</html>
Controller:
function student(){
if ($student_status == 'paid'){
$data['alert'] = 'success';
}
else {
$data['alert'] = 'failed';
}
$this->load->view(view_page, $data);
}
Output:
echo "BootstrapDialog.alert('Your Registration was successful')"
You have to either escape quotes or use double quotes.
Try This Code
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap-dialog.min.css" />
<script src="<?php echo base_url();?>assets/js/bootstrap-dialog.min.js"></script>
Test.js:
$(document).ready(function() {
$.post('MYLogic.php', null, function(response) {
});
});
Can any one tell me which jQuery or version of JQuery should I include on my JSP page to call PHP class using $.post
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/screen.css" rel="stylesheet" />
<link type="text/css" href="css/menu.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Mobilezone Afghanistan</title>
</head>
Try this
Remove null
$(document).ready(function() {
$.post('MYLogic.php', function(response) {
});
});
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.
Two calendar is not showing in one php file. scenario is below
I have a php file name temp. Here i want to show two calendar(previous month and next month).
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="left1"><?php include('calendar_previous.php');?></div>
<div id="right1"><?php include('calendar_next.php');?>hello</div>
</body>
</html>
My calendar_previous.php is
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="css/datetimepicker_css.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>BuildUp Real Estate</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="admin.css" />
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="css/jquery.1.4.2.js"></script>
<script type="text/javascript" src="css/jsDatePick_prev.jquery.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"inputField1"
});
g_globalObject.setOnSelectedDelegate(function(){
var obj = g_globalObject.getSelectedDay();
alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);
document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year;
});
};
</script>
</head>
<body>
<div id="inputField1"></div>
</body>
</html>
My calendar_next.php is almost same to calendar_previous.php with two difference of javascript
<script type="text/javascript" src="css/jquery.1.4.4.js"></script>
<script type="text/javascript" src="css/jsDatePick_next.jquery.min.1.3.js"></script>
When i call calendar_previous.php and calendar_next.php separately it is showing previous and next month properly. But when i include this two php file in temp.php in different div only one calendar is showing. I want to show two calendar in temp.php in different div.
Any help is appreciate.
I guess its because now you are having two window.onload. So, that might be troubling. What you can try is place the contents of both window.onload to the second page and try.
2nd problem could be jquery conflict.
For that follow this
$s = jQuery.noConflict();
Now replace all of the $ with $s in one of your files.
That should resolve your problem. Tell me if it doesn't.
I have a SlickGrid set up, it is reading data from my database with PHP, my problem is arising when i try to save the data back to my database, I am trying to use JSON to give me an array that I can then use to write back to the database, i have see this thread explaining this:
Saving changes in SlickGrid
So I have the hidden form element in my code, and am using JSON to encode the data variable, the assign it to the data hidden input on the form, this form posts to a page called save_price.php, the trouble is when I print_r, or var_dump the data variable, I get null as an output, I think it might be something to do with how I am using PHP to add the content into the data variable, either that or I am doing something really obviously wrong, hopefully you can see what the problem is, there isn't a great deal of documentation online about retrieving/saving to a db with PHP, so I'm kinda stuck banging my head against the wall on this one, here's my code:
Ok so I found the problem, just incase anyone is struggling to get this all to work, here is the working code, it gets data from a database, then sends the changed data to another page for processing, it nees a little bit of refinements, that will happen once I've got it all implemented:
<?php
include("includes/check_session.php");
require_once('includes/functions.php');
require_once('includes/config.php');
$data = '';
$i = 0;
$query = "
SELECT * FROM `prices`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data .= '
data['.$i.'] = {
id: "'.$row['id'].'",
title: "'.$row['title'].'",
duration: "'.$row['duration'].'",
percentComplete: "'.$row['percentComplete'].'",
start: "'.$row['start'].'",
finish: "'.$row['finish'].'",
effortDriven: "'.$row['effortDriven'].'"
};
';
$i++;
echo $data;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<?php // include("includes/cms_head_scripts.php"); ?>
<link rel="stylesheet" href="css/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" src="js/jquery.json.js"></script>
</head>
<body>
<div id="content_cont">
<div id="main">
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
</div>
pricing
</div><!-- #main -->
</div><!-- #content_cont -->
<script src="lib/firebugx.js"></script>
<script src="lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="lib/jquery.event.drag-2.0.min.js"></script>
<script src="slick.core.js"></script>
<script src="plugins/slick.cellrangeselector.js"></script>
<script src="plugins/slick.cellselectionmodel.js"></script>
<script src="slick.editors.js"></script>
<script src="slick.grid.js"></script>
<script type="text/javascript">
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title", editor:TextCellEditor},
{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
{id:"%", name:"% Complete", field:"percentComplete", editor:TextCellEditor},
{id:"start", name:"Start", field:"start", editor:TextCellEditor},
{id:"finish", name:"Finish", field:"finish", editor:TextCellEditor},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", editor:TextCellEditor}
];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true
};
$(function() {
<?php echo $data ?>
grid = new Slick.Grid($("#myGrid"), data, columns, options);
})
</script>
<form method="POST" action="save_price.php">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script type="text/javascript">
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
</body>
</html>