How can I use the content in $displayusercontent which is pulled from the db into the Text field on the jquery.
I've tried this below, but nothing returns, if I echo $displayusercontent on to the page then it works this way.
<html>
<head>
</head>
<body>
<!-- my content here-->
<script type="text/javascript">
var userContent = <?php echo $displayusercontent; ?>
</script>
<script type="text/javascript" src="/my/javascript/file/here.js"></script>
</body>
</html>
This is from my jquery file
initIntro: function () {
// display marketing alert only once
if (!$.cookie('intro_show')) {
setTimeout(function () {
var unique_id = $.gritter.add({
// (string | mandatory) the heading of the notification
title: 'MyTitle',
// (string | mandatory) the text inside the notification
text: userContent,
// (string | optional) the image to display on the left
//image: '../../assets/local/layout/img/avatar.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: true,
// (int | optional) the time you want it to be alive for before fading out
time: '',
// (string | optional) the class name you want to apply to that specific message
class_name: 'my-sticky-class'
});
// You can have it return a unique id, this can be used to manually remove it later using
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 15000);
}, 2000);
$.cookie('intro_show', 1);
}
}
It's invalid. You need to make it a string
var userContent = <?php echo json_encode($displayusercontent); ?>;
As #dsclementsen pointed out, in this case using json_encode is the right option.
After the posts and reading the links attached, this is my code that works.
<html>
<head>
</head>
<body>
<!-- my content here-->
<script type="text/javascript">
var userContent = <?php echo json_encode($displayusercontent) ?>;
</script>
<script type="text/javascript" src="/my/javascript/file/here.js"></script>
</body>
</html>
Thanks all for the help :-)
Related
I use Highcharts and when I update the site it doesn't update the data from which it constructs the graph.
I take the data from mysql, save it in a .csv file and open the .csv in highcharts. It seems to save the old values in the graph even if the .csv file is updated.
<?php
unlink('column-data.csv'); //This file must exist or else it gives error
include 'database.php';
$result = mysql_query("SELECT
value
FROM
data
INTO OUTFILE 'C:/xampp/htdocs/arduinoproj/test3/column-data.csv'
FIELDS ENCLOSED BY '\,'
TERMINATED BY ';'
ESCAPED BY '\"'
")
or die("Could not issue MySQL query");
include 'highcharts.php'
?>
..and the highcharts code is more or less unchanged.
The changed code from the original is in bold.
Highcharts code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My first column chart by Highcharts</title>
<!-- 1. Add JQuery and Highcharts in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- 2. You can add print and export feature by adding this line -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
<script type="text/javascript">
jQuery(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
**type: 'line'**
},
title: {
text: 'Tiny Tool Monthly Sales'
},
subtitle: {
text: '2014 Q1-Q2'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Sales'
}
},
series: []
};
// JQuery function to process the csv data
$.get(**'column-data.csv'**, function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains names of categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
//skip first item of first line
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
//putting all together and create the chart
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Am trying to refresh data stored in a div every 10 seconds using jQuery.
My HTML code is:
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
setInterval(function() {
$("#latestData").load("getLatestData.php #latestData");
}, 10000);
});
</script>
</head>
<body>
<div id = "latestData">
</div>
</body>
</html>
And the PHP code I am using (temporarily as I know this won't change due to the same "data"):
<?php
echo "test";
?>
However, it isn't even showing "test" on the html page.. could anyone suggest where I have gone wrong?
Many thanks
jQuery load method works in a different way. Try reading its documentation.
You don't have to specify destination element ID twice, remove the second one, like this:
$("#latestData").load("getLatestData.php");
Here's a way that will solve what you want to achieve, using the $.get method in jQuery:
$(document).ready(function () {
setInterval(function() {
$.get("getLatestData.php", function (result) {
$('#latestData').html(result);
});
}, 10000);
});
If you want to refresh message count just use this code:
$(document).ready(function () {
setInterval(function () {
$("#ID").load();
}, 1000);
});
I'm a bit new to Ajax.
I've got a Ajax file which includes a php file and refreshes it every X seconds. That code for AJAX.PHP is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "SANAjax();", 10000 ); ///////// 10 seconds
$(function() {
SANAjax = function(){
$('#dataDisplay').fadeOut("slow").load('rand.php').fadeIn("slow");
}
});
</script>
<div id="dataDisplay"></div>
This code is working fine.
Bbut the html of AJAX.PHP page shows as it is code, while I want the output html of rand.php not javascript code given above. How can i do it?
suppost "rand.php" html out put (source) is: < html >< body >this is body <\ body ><\ html >.
I want this html to be shown on the html source of AJAX.PHP.
How can i do it?
If I mess any thing let me know, I'll try to make it more clear.
You need to run it. Not insert only as file.
$.post("rand.php", { },
function(data) { $('#dataDisplay').html(data) });
updated:
SANAjax = function(){
$.post("rand.php", { },
function(data) { $('#dataDisplay').fadeOut("slow").html(data).fadeIn("slow"); });
}
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_rand').load('rand.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_rand"> </div>
Don't forget to add the jquery library
I would like to create a PHP page which accepts an arguement like so:
http://localhost/page.php?topic=Foo
and then pulls data from an SQL Database where topic=Foo but then automatically checks for new data every 10 seconds and refreshes a DIV tag using Ajax. I've tried and nothing works. Any help?
EDIT: here is the code I've used:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
ext = <?php $_GET[feedtitle] ?>
$(document).ready(function() {
$("#responsecontainer").load("response.php?ext=" + ext);
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?ext=' + ext);
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
EDIT: I can do the SQL bit, it's just the getting the arguement to the response.php im having issues with.
EDIT: I have new code, but its still not working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function gup( name )
{ name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
var feed = gup('f');
$(document).ready(function() {
$("#responsecontainer").load("response.php?ext=" + feed);
var refreshId = setInterval(function() { $("#responsecontainer").load('response.php? ext=' + feed); }, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
So, you need to
Get escaped URL parameter
,
output the jquery $.post function's result data and then you just need to know
How to refresh page with jQuery Ajax? and do an
AJAX Div Retrieval every 60 seconds?
I hope that helps :)
I am working on a one page website that allows the users to add and remove pages from there navigation as and when they would like too, the way it works is that if the click 'Blog' on the main nav a 'Blog' section should appear on the page, if they then click 'News' the 'News' section should also be visible, however the way I have started to implement this it seems I can only have one section at a time, can my code be adpated to allow multiple sections to shown on the main page.
Here is my code for the page that has the main menu and the users selections on it.
<!DOCTYPE html>
<head>
<title>Development Site</title>
<link rel="stylesheet" href="/media/css/reset.css" media="screen"/>
<link rel="stylesheet" href="/media/css/generic.css" media="screen"/>
<script type="text/javascript" src="/media/javascript/jquery-ui/js/jquery.js"></script>
<script type="text/javascript" src="/media/javascript/jquery-ui/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="/media/javascript/jquery-ui/development-bundle/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.menuitem').click(function() {
var link = $(this), url = link.attr("href");
$("#content_pane").load(url);
return false; // prevent default link-behavior
});
});
</script>
</head>
<body>
<li><a class="menuitem" href="inspiration">Inspiration</a></li>
<li><a class="menuitem" href="blog">Blog</a></li>
<div id="content_pane">
</div>
</body>
</html>
You should try something like this
$('a.menuitem').click(function() {
var link = $(this), url = link.attr("href");
var $newDiv = '<div></div>';
$("#content_pane").append($newDiv);
$newDiv.load(url);
return false; // prevent default link-behavior
});
I havent tested that but it should work. If you can please report your result.
Alternatively you can create a variable that stores loaded content, wrap it into a div element and append created element to the #content_pane
Building on what Mike put.. do this:
$('a.menuitem').click(function(e) {
var link = $(this), url = link.attr("href");
var $newDiv = '<div></div>';
$("#content_pane").append($newDiv);
$newDiv.load(url);
e.preventDefault; // prevent default link-behavior
});
The e.preventDefault(); will stop the default action from occuring. Then it should not follow the link. Return False is usually used in the .submit() function. You'll need .preventDefault for the .click().