I am attempting to create a MySQL backed events interface, using fullCalendar and MySQL. I have tried to manipulate the examples in the fullCalendar documentation and have successfully created a events feed from my database.
I am now trying to create a eventDrop call which sends an events id, title and start time to the database. I used the code from a previous question to create the eventDrop call, here is the JavaScript for the whole callendar page:
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// if so, remove the element from the "Draggable Events" list
$(this).remove();
},
// events from mysql database
events: "/json-events.php",
// submit to database
eventDrop: function(calEvent, jsEvent, view) {
var method = 'POST';
var path = 'submit.php';
var params = new Array();
params['id'] = calEvent.id;
params['start'] = calEvent.start;
params['end'] = calEvent.end;
params['title'] = calEvent.title;
post_to_url( path, params, method);
}
});
});
The PHP file I hoped would receive the POST data and insert it into the database with an end time equal to the start time plus 15 mins (edited after answer below):
<?php
mysql_connect("") or die(mysql_error());
mysql_select_db("") or die(mysql_error());
$id = $_POST["id"];
$title = $_POST["title"];
$start = $_POST["start"];
$end = date(Y-m-d T H:i:s , strtotime($start)+900);
$query = "INSERT INTO `events` VALUES (`$id`, `$title`, `$start`, `$end`, ``)";
mysql_query($query);
print $query;
?>
The database is not receiving the event data.
This is the conclusion I have come up with and I have no problem running this off my test and public server.
I have taken the FullCalendar and this is the format I use.
The database is real simple.
id integer 11 chars primary key auto-increment,
title varchar 50,
start varchar 50,
end varchar 50,
url varchar 50.
This is the index.php or index.html file.
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json.php needs to be running in the same directory.</p>
</body>
</html>
This is the json.php file.
<?php
mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("calendar") or die("Could not select database");
$rs = mysql_query("SELECT * FROM events ORDER BY start ASC");
$arr = array();
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
?>
Once remove the column names in insert query and try, if you don't get then let's think about it. Do something like this
mysql_query(INSERT INTO `events` VALUES ('$id', '$title', '$start', '$end', ''));
Just print the post values before inserting, if it seems clear, then check your query.
echo the query and exit, you may get something like this
mysql_query(INSERT INTO `events` VALUES ('23', 'event title', 'start date', 'end date', ''));
Run this query to find errors if any
print $query - there should be a ; at the end
Related
As a follow up to Display image as background in fullcalendar, I now have a fully working MySQL solution, but I cannot find a way to change the background if a custom column that I set in my database is not empty (picture), nor changing the same opacity according to the same condition.
In my other question, I was able to change the background in dayRender and the opacity in eventRender:
dayRender: function (date, cell) {
cell.css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat center");
cell.css("background-size","contain")
},
eventRender: function(event, element) {
$(element).css("opacity", "0.75");
}
});
Now my js code looks like this:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
events: "/events.php",
dayRender: function (date, cell, view) {
cell.css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat center");
cell.css("background-size","contain")
},
eventRender: function(event, element) {
}
});
})
The PHP page to get the event data from the MySQL database is:
<?php
// List of events
$json = array();
// Query that retrieves events
$requete = "SELECT * FROM evenement ORDER BY id";
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=HIDDEN', 'HIDDEN', 'HIDDEN');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// Execute the query
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// sending the encoded result to success page
echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
?>
I tried to use this in dayRender to change the background with no success so far:
var eventoObj = $("#calendar").fullCalendar( 'clientEvents')[0];
alert(eventoObj.picture_url)
Can anyone help me out figuring this out?
Thank you for your time and help.
I'm trying to create a drag & drop calendar(Fullcalendar) and saving the new or edited items in a MySQL database.
But I'm having 2 problems at the moment.
First:
I can't drag & drop more then 1 item in the month view:
http://snag.gy/SF9wI.jpg
But if I drag a new one in the Week view ,It works : http://snag.gy/0tW2m.jpg
and if I go back to the Month view the ones I just created in the Week view are still there.
Second:
I'm new in ajax,jquery and I don't really know how to use $_post, so I can save my records in my MySQL database. I tried a few guides but no success.
MySQL database:
name: tblEvent
idEvent INT auto_increment PRIMARY KEY
fiTask INT
fiUser INT
dtStart DATETIME
dtEnd DATETIME
dtUrl VARCHAR(255)
dtAllDay TINYINT(1)
index.php:
<?php
include_once './Includes/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar.js'></script>
<script src='../lang/de.js'></script>
<script>
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var h = {};
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function () {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
slotEventOverlap: false,
eventLimit: true,
droppable: true, // this allows things to be dropped onto the calendar
events: "./event.php",
// Convert the allDay from string to boolean
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
var eventData;
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: './add_event.php',
data: 'title=' + title + '&start=' + start + '&end=' + end + '&url=' + url,
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
$('#calendar').fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
/*eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: './update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
}*/
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
</head>
<body>
<div id='wrap'>
<div id='external-events'>
<h3>Aufgaben</h3>
<?php
foreach (SelectTask() as $x) {
echo "<div class='fc-event'>" . $x['dtTask'] . "</div>";
}
?>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</body>
</html>
event.php:
<?php
// List of events
$json = array();
// Query that retrieves events
$requete = "SELECT * FROM tblEvent";
// connection to the database
try {
$dbc = new PDO('mysql:host=10.140.2.19;dbname=dbcontrol', 'ymartins', 'a15370430x');
} catch (Exception $e) {
exit('Unable to connect to database.');
}
// Execute the query
$resultat = $dbc->query($requete) or die(print_r($dbc->errorInfo()));
// sending the encoded result to success page
echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
?>
add_event.php:
<?php
// Values received via ajax
$title = $_POST['title'];
$user = $_POST['user'];
$start = $_POST['start'];
$end = $_POST['end'];
$url = $_POST['url'];
// connection to the database
try {
$dbc = new PDO('mysql:host=10.140.2.19;dbname=dbcontrol', '****', ****);
} catch (Exception $e) {
exit('Unable to connect to database.');
}
// insert the records
$sql = "INSERT INTO tblEvent (dtTitle, dtStart, dtEnd, dtUrl) VALUES (:title, :start, :end, :url)";
$q = $dbc->prepare($sql);
$q->execute(array(':title' => $title, ':start' => $start, ':end' => $end, ':url' => $url));
?>
What am I doing wrong and how can I improve my script?
You may want to expand your question to include exactly what is going wrong/not working?
I see one issue at least:
your AJAX call should look like this:
$.ajax({
url: '/add_event.php',
data: {'title': title, 'start': start ...}
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
complete the 'data:' line... its a dict, not a GET Url encoded string when using POST.
you may also want to add a failure section to catch errors, or at least print out the value of the 'json' in case your php page throws an error (it will be in that variable of the success callback).
hopefully you can help me. I have read a lot of forums regarding this but still cannot get what I wanted. I'm using PHP/MySQL to run my system. I already had a code in JavaScript that will allow the user to add a place and the system can add that place in the Google Map (embedded in my site) as a marker. Now, what I wanted is to add the coordinates of that new place in my database and then my map will just get the markers from the database for adding in the map.
Currently, what I did is to get the latitude and longitude of the added place from the javascript then was able to pass them to my php script within the same file. The latitude and longitude can be added in my database but I do not know now how to go back again to JavaScript so that I can add my markers.
What is the best way to do this? Is/Are there better approaches to solve this?
<?php
$marker = array();
if(isset($_GET['set'])){
$lat = $_GET['lat'];
$long = $_GET['longi'];
$newadd = $_GET['newAdd'];
$connect = mysql_connect("localhost","root","");
mysql_select_db("mapping");
$query=mysql_query("INSERT INTO markers VALUES('','','$newadd','$lat','$long','')");
}
?>
My JavaScript to place markers
function addMarkers(){
var tempMarker;
var tabs = [];
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://maps.google.com/mapfiles/ms/micons/green-dot.png";
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };
// for loop get data from db and loop it
tempMarker = new GMarker(tempLatLng,markerOptions);
//if(tabs.length==0){
tabs[ctr] = [new GInfoWindowTab('Greetings','Hi! Welcome'), new GInfoWindowTab('My Info',tempMarker.getLatLng().toString())];
//}
tabInfoWindow(tempMarker,tabs, ctr);
markerArray.push(tempMarker);
displayMarkers();
}
}
Thanks!
Using jquery you can post the data in an ajax request and continue adding the markers in the success handler.
var location = {lat:56, lng:67, name:"my_place"};
$.ajax({
url: "save_place.php",
data: location,
dataType:"json",
success: function(response){
if(response.success){
// add marker to map here
}else{
alert("Error adding location to database");
}
},
error:function(){
alert("Error in connecting to server");
}
});
EDIT:
From your comments, I understand what you need is this one:
<?php
$lat = isset($_GET['lat']) ? $_GET['lat'] : 0;
$long = isset($_GET['longi']) ? $_GET['longi'] : 0;
$newadd = isset($_GET['newAdd']) ? $_GET['newAdd'] : "";
?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<style type='text/css'>
#map {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type='text/javascript'>//<![CDATA[
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function addMarker(lat, lng, newAdd) {
alert(" Adding marker " + lat + "," + lng);
this.lat = lat;
this.long = lng;
var location = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: location,
title: name,
map: map,
draggable: true
});
map.setCenter(location);
}
<?php
echo "addMarker($lat, $long, '$newadd')";
?>
</script>
</body>
</html>
url : http://<domain>/test.php?lat=40.735812&longi=-74.001389&newAdd=
Well what I do is have a endpoint on the PHP side that I can ask for the markers. Then when my map has loaded I will make a call to get them and then add them on:
$.post('/server/getMarkers',{},function(markers) {
for(var i=0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(marker[i].latitude, marker[i].longitude),
id:marker[i].id
});
google.maps.event.addListener(marker, "click", function() {
//request data for this.id to show in info window if needed
});
}
});
The getMarkers method on the PHP side could look something like this
public function getMarkers() {
/* fetch an array of markers details from the db by any means... */
$markers = getMarkersFromDB();
foreach ($markers as $key=> $marker) {
$payload[$key]['latitude'] = $marker->latitude;
$payload[$key]['longitude'] = $marker->longitude;
$payload[$key]['id'] = $marker->id;
}
echo json_encode($payload);
}
I am using datepicker with php and jQuery to show events however this script will not work in IE and I cant figure out why. I think it has something to do with the $.get jQuery but not sure why this will not work
<?
// DB CONNECTION
?>
<link type="text/css" href="/css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<?
// DB QUERY DB
$sql = "SELECT MONTH(eStart) as mon, DAY(eStart) as day, YEAR(eStart) as year FROM events WHERE eStart LIKE '%$date%' ORDER BY eStart ASC";
$rows = $db->query($sql);
while ($record = $db->fetch_array($rows)) {
$dates .= "new Date(".$record[year].", ".$record[mon]."-1, ".$record[day]."),";
}
$dates = rtrim($dates, ',');
?>
<script type="text/javascript">
$(document).ready(function() {
var dates = [<?= $dates; ?>];
$('#datepicker').datepicker({
numberOfMonths: [1,1],
beforeShowDay: highlightDays
});
$('#datepicker').click(function(evt){
// put your selected date into the data object
var data = $('#datepicker').val();
$.get('/getdata.php?date='+ encodeURIComponent(data), function(data) {
$('#events').empty();
$('#events').html(data).show();
evt.preventDefault();
});
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #000000;
}
</style>
<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>
<div id="events" style="float:left;font-size: 10pt;height: 300px;">
<p>Select a date on the calendar to see events.</p>
</div>
<div style="clear:both"></div>
Here it is with no php, just the HTML output
<link type="text/css" href="/css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(document).ready(function() {
var dates = [new Date(2011, 11-1, 3),new Date(2011, 11-1, 11),new Date(2011, 11-1, 19),new Date(2011, 11-1, 26),new Date(2011, 12-1, 11),new Date(2012, 6-1, 16),new Date(2012, 7-1, 1),new Date(2012, 9-1, 20),new Date(2012, 10-1, 25)];
$('#datepicker').datepicker({
numberOfMonths: [1,1],
beforeShowDay: highlightDays
});
$('#datepicker').click(function(evt){
// put your selected date into the data object
var data = $('#datepicker').val();
$.get('/getdata.php?date='+ encodeURIComponent(data), function(data) {
$('#theevents').empty();
$('#theevents').html(data).show();
evt.preventDefault();
});
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #000000;
}
</style>
<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>
<div id="theevents" style="float:left;font-size: 10pt;height: 300px;">
<p>Select a date on the calendar to see theevents.</p>
</div>
<div style="clear:both"></div>
Your dates array in JavaScript will have a stray trailing comma and that is probably making IE append a stray null to your array:
$dates .= "new Date(".$record[year].", ".$record[mon]."-1, ".$record[day]."),";
# ----------------------------^
So your JavaScript looks like this:
var dates = [ new Date(...), new Date(...), ..., ];
and IE thinks that you mean this:
var dates = [ new Date(...), new Date(...), ..., null ];
And then, in your for loop inside highlightDays, you'll try to call getTime() on null:
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) { // <---------- Right here
return [true, 'highlight'];
}
}
That will give you a run-time error in your JavaScript and then all your JavaScript stops working.
Fix your var dates to not include the trailing comma.
Once that's out of the way, it looks like you have a stacking problem with IE. The individual cells within the calendar will look something like this:
<td class=" " onclick="DP_jQuery_1323234722897.datepicker._selectDay('#datepicker',11,2011, this);return false;">
<a class="ui-state-default" href="#">1</a>
</td>
The return false in the onclick attribute is your problem. If you clear those attributes after binding the datepicker:
$('#datepicker td').attr('onclick', '');
then #datepicker should respond to your click. You'll probably want to move your evt.preventDefault(); from the $.get callback up to the click handler as well.
Demo: http://jsfiddle.net/ambiguous/XanvW/4/
And if you want your click handler to be called after the date is chosen (rather than "instead of selecting the date" as I thought), then you want the onSelect callback:
Allows you to define your own event when the datepicker is selected.
is there any jQuery plugin to create something like the live feed from the Twitter Main Page , using PHP, which is getting the data from a MySQL database?
How has to be the PHP file?
Thanks.
You really don't need a plugin for this, you could easily create something similar yourself using jQuery to make AJAX calls to a PHP MySQL feed
Create a script to make reoccurring AJAX calls using setTimeout() and then add the new found results to the feed container using .prepend()
HTML
<html>
<head><title>Tweets</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#tweets {
width: 500px;
font-family: Helvetica, Arial, sans-serif;
}
#tweets li {
background-color: #E5EECC;
margin: 2px;
list-style-type: none;
}
.author {
font-weight: bold
}
.date {
font-size: 10px;
}
</style>
<script>
jQuery(document).ready(function() {
setInterval("showNewTweets()", 1000);
});
function showNewTweets() {
$.getJSON("feed.php", null, function(data) {
if (data != null) {
$("#tweets").prepend($("<li><span class=\"author\">" + data.author + "</span> " + data.tweet + "<br /><span class=\"date\">" + data.date + "</span></li>").fadeIn("slow"));
}
});
}
</script>
</head>
<body>
<ul id="tweets"></ul>
</body>
</html>
PHP
<?php
echo json_encode(array( "author" => "someone",
"tweet" => "The time is: " . time(),
"date" => date('l jS \of F Y h:i:s A')));
?>
setInterval() would be more adequate, since you want a check at regular intervals.
Then, there is a jquery comet plugin that explores the implementation of the "push" technology. Check it out here.
var frequency = 5000, // number of milliseconds between updates.
updater = function() {
jQuery.ajax({
url: 'http://twitter.com/example/something.html',
success: function(data) {
// update your page based upon the value of data, e.g.:
jQuery('ul#feed').append('<li>' + data + '</li>');
}
});
},
interval = setInterval(updater, frequency);
<script>
$(document).ready(function(){
var frequency = 10000; // 10 seconds = 10000
var updater = function() {
$.ajax({
url: 'mesaj.html', // data source html php
cache: false,
success: function(data) {
$("#message").html(data); // div id
}
});
};
interval = setInterval(updater, frequency);
});
</script>
example
<div id="message">{ do not write }</div>