I am amending some results tables that display rows from a mysql database to refresh automatically. I am new to this so have based it on
Refresh a table with jQuery/Ajax every 5 seconds
This works fine and I have tested it by asking for making the request to the server display the time so i can see the change when the refresh occurs.
My problem is that if i apply this to a table dislaying returned sql results (also using the jquery tablesorter). Both my sql and jquery fail unless I move all the files and code they are dependant upon to the php page i echo the table on. This is now making my pages a mess. So what is the best way to refresh and manage a results table with ajax and where should dependant files/code be located?
cheers
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php');
setInterval(refreshTable, 5000);
}
</script>
Related
I'm developing app using Fullcalendar v1.
I successfully integrate connection to mysql database so my events are loaded from db as json array. But my app are going to use more than 2 people in one moment so i need automatically refresh after my db changes. If one user remove event, calendar refresh for all other users which see this calendar.
I have one experimenting script which i made. It works but not as well as i want.
I know, this script is completely bad but i was frustrated.
<script>
var i = setInterval(function(){
last_id = $.cookie('last_id');
$.get("foo.php", function(data) {
var id = data;
if(last_id !== id) {
$('#calendar').fullCalendar('changeView', 'month');
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');
$('#calendar').fullCalendar( 'rerenderEvents');
last_id = $.cookie('last_id', data);
}
});
},500);
</script>
It works pretty simple ... foo.php loads number of rows. If this number is other than last number saved in cookies, calendar will be refreshed.
This method has tons of disadvantages and mistakes. It works only for deleting and creating events. Not for moving etc. And it is slowing app by getting results every 500ms ..
Have you better solution for this ?
I have the similar structure.. get data from DB as JSON...
I make a modal for change a event...
When i press the button who calls my db to update the event..
I use behind... a function on jQuery called ( .trigger('click') ) so..
$('.fc-prev-button').trigger('click');
$('.fc-next-button').trigger('click');
//Hide Modal.. button have a data-dismiss="modal"
$('#closeEdit').trigger('click');
That's my solutions because when load fullCalendar this call events.. param who get data from my db... so when you change the month this is called again for reload the data and don't load the full month with data..
Sorry for my english and i hope to help you, Happy Coding !!
I have a webpage that run a query on a db and reports the results. Currently the page auto refreshes itself every 10 seconds in order to display (almost) real-time data.
This is probably a very inefficient way of accomplishing this but as of right now I'm not really sure what alternatives there are.
What options do I have to present real-time data on a php webpage?
you can use node.js and socket.io. This is great example to get you started:
http://book.mixu.net/ch13.html
or you can use ejabberd and strophe js library.
I used both of that solution for real time stuff and I found node.js and socket.io much easier to implement.
Depending on what your data is for and how you are using it, ive recently started putting data display functions into seperate pages and then using jquery to load those pages into dives on my main page at page load and then reloading the divs on a timer and on a reload function if the refresh is needed sooner, that way your whole page does not refresh making it flash and go blank but instead the data just gets nicely updated.
var paused = false,
auto_refresh = setInterval(
function()
{
if (paused) return false;
$('#mot').fadeOut('slow').load('motview.php?view1=$dayd&viewdate=1').fadeIn('slow');
$('#work').fadeOut('slow').load('workview.php?view1=$dayd&viewdate=1').fadeIn('slow');
$('#motday').fadeOut('slow').load('motdaylist.php? view1=$dayd&viewdate=1').fadeIn('slow');
$('#notelist').fadeOut('slow').load('notelist.php?dayd=$dayd').fadeIn('slow');
}, 60000);
$(document).ready(function(){
$('#mot').load('motview.php?view1=$dayd&viewdate=1');
$('#work').load('workview.php?view1=$dayd&viewdate=1');
$('#motday').load('motdaylist.php?view1=$dayd&viewdate=1');
$('#notelist').load('notelist.php?dayd=$dayd');
});
function reloaddivs()
{
$('#mot').load('motview.php?view1=$dayd&viewdate=1');
$('#work').load('workview.php?view1=$dayd&viewdate=1');
$('#motday').load('motdaylist.php?view1=$dayd&viewdate=1');
$('#notelist').load('notelist.php?dayd=$dayd');
};
the above im using to display 4 lots of data on one page that all updates nicely on a timer or after ive interacted with a page by calling reloaddivs
Inspect your page carefully to identify exactly what is the data which is to be updated every 10 seconds - chances are it will not be the whole page (menus, navigation, headers, footers).
Cache all that data say, every 10 minutes, or every hour - especially if data driving any of those elements are being dragged from databases.
Then include the panel containing the dynamic data.
Better yet might be to load the dynamic data using Ajax to refresh every n seconds.
I'm learning to use mysqli and AJAX and building a simple application using AJAX to insert data into a database and display data in a table from the database. The table should display current information at the time that the webpage is loaded and then update anytime a record is added to the database using the HTML form. I'm having a couple ofissues.
Thus far, the form works from my main HTML file, except that it leaves the page and opens addActorInfo.php, instead of just refreshing the main page.
I have the table working when I open the getActorInfo.php file in a browser, but it is not being pulled into the main page.
Any suggestions would be appreciated.
EDIT INFORMATION: I solved problem number 1 and have updated the HTML code to reflect changes. Currently, I believe I have a bug somewhere in my drawTable() function that is preventing the table produced by the PHP GET FILE from being returned back to the main page. I've tried using the statement "document.getElementById("actor_display").innerHTML=xmlhttp.responseText;", but it's still not showing up.
Main HTML
Why not use jQuery on the ajax?
var data = $('#yourdatainsertionform');
$.ajax({
data:data,
method:'POST', //Or get
url:'yourphp.php',
success:function(result){
$('#actor_display').html(result);
},
error:function(){
alert("Something went wrong");
});
By using jQuery, you would make your life easier. No more hair ripping moments with IE, and so easy ajax requests & form validation. Basically, what you can do with javascript, you do it easier with jQuery.
The usage is so simple, just include
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
on your page before loading the files you will be using jQuery.
Hi there Everybody!
I am facing a little issue.
I have a DIV where I need to show the count of rows from the database.
The problem is that when the page refresh the count is not still updated because the database mySQL takes a while, so I have to refresh the page again.
Do you know how can I show the count of the rows maybe with javascript? In a way that the count of the rows will be continuosly checked and updated without page reloading..
If I need jQuery for this, just to let you know I am on version 1.3.2
Let me know!
Thanks so much!
yea sure, ajax it... first, it does sound odd that when u refresh the page the database isnt ready, but lets assume there is a sync issue where db gets updated out of sync with the current page... the solution is ajax
function doCountUpdate(){
$.get("url_to_return_count",function(data){
assuming the returned data is a number
$("#myDiv").text(data);
setTimeout(doCountUpdate, 1000);
}
}
I think at page load, You can do that by simply a ajax call to a function and return the row and display it on a DIV.
$(document).ready(function() {
// put all your jQuery goodness in here.
$.ajax({
url: "somepage.php",
success: function(data){
$('#div_id').text(data);
}
});
});
I've a page that show data inserted in a mysql db; I'd like (if it is possible) that this view page automatically update when a record is added to the db (data are not inserted from the same page or may be inserted from another user).
thanks in advance
ciao h.
First way (easiest but annoying):
Add a meta refresh to the page and the full page refreshes every x amount of time.
Second way (AJAX):
I'm assuming this is what you want.
Load default HTML page etc... lets call it index.php
On above page create a <div> element with style display:none like this
<div id="mydata" style="display: none;"></div>
Create a PHP page that retrieves and formats the database data and prints it out in x format, i.e a table or p tags. no headers or page specific stuff just data and simple tags
On index.php put something like this
<script type="text/javascript">
function update() {
$.ajax({
url: 'http://www.example.com/getData.php?q=latest',
success: function(response) {
$('#mydata'.html(response);
}
});
}
// .ready function
$(function() {
// do setup stuff here, I think there is a refresh timer or something
// that you'd use to trigger it every x amount of time
// i.e something like this
update();
});
</script>
EDIT: AJAX HTTP streaming forces data out to users
I know sure on the best method to do this, but and quick-and-easy solution would be to get the total number of rows in your table on page load. Then every x seconds use an AJAX script to re-check that table's row count. If it has changed you could have extra logic that then fetches the new rows.
I was thinking about this last night and realized that node.js (http://nodejs.org/) might be perfect for this if you're looking for an event driven system. There is a good tutorial on getting started using node.js at http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/.