I have a question, and I'm hoping one of you will know the answer.
I am running a sql query from php fro a certain bit of information. I am then pulling that info into script and plugging it into an api. I want the api to have access to up to date info every 30 seconds. However, obviously, although the script can run again every 30 seconds ... the php cannot, thus the info is the same.
Is it possible therefore to have the php that runs the sql query refresh once every 30 seconds without refreshing the entire page?
Or ... is there a better way to be doing this. I believe it is no a good idea to be accessing the database from javascript?
Thanks in advance.
You're looking for AJAX. There are plenty of tutorials on the net explaining how to create simple pages powered by AJAX.
A quick example can be found here.
(function() {
setInterval(function() {
$.ajax({
async: true,
dataType: 'json',
type: 'GET',
url: '/echo/json',
success: function(data) {
// You'd use data variable here, but JSFiddle doesn't return anything
$('#test').html(Math.floor(Math.random()*100)-1); // Changes randomly after every fetch
}
});
}, 200);
}());
ajax is wath you are looking for,
ajax allows u to make a call to ur server whitout reloading your page.
i will recomend creating a page that only contains your data, then, on your aplication page load it into a div like
<div id="yourData"></div>
u can use James answer to load it, change '#test' for '#yourData' on any id u have on the div.
if u are using jquery u can use .load() also, for me is more clear, http://api.jquery.com/load/
$('#yourData').load('YourAplication/YourDataGeneratorPage.html');
Related
I have a counter that takes a sum from a database column and updates on every page load. I need to convert this to a live counter that updates without page load.
It's on a WordPress site, and I'm hoping not to have to create a separate page outside of WP in order to send the JSON array.
1) Is there any way to use the current page to submit/receive the POST data?
2) What's the best process for converting a simple 'SELECT * FROM' to something dynamic. Is ajax/jQuery the right choice?
Thanks!
Use the following to update the value every 5 seconds
window.setInterval(function(){
$.getJSON('/getLatestCount.php', function(data) {
$('#id_of_element_where_it_needs_to_be_put').html(data.count);
});
}, 5000);
if the query needs to have the contents of a form, use:
window.setInterval(function(){
$.getJSON('/getLatestCount.php', $("#my_form_id").serialize(), function(data) {
$('#id_of_element_where_it_needs_to_be_put').html(data.count);
});
}, 5000);
This doesn't use POST but GET but that shouldn't be a problem i think. In the http file use $_GET['my_field_name'] to access the form values.
You can output the json data in php through echo json_encode()
Looking at your question and that you're asking something for wordpress i'm not sure you know how to do this all though so i won't start going into depts about polling and websocket. This is the easiest way to do it.
Any recommendation or better a good script to add/remove items from a list and then saving the changes to MySQL?
Here is the think, in my web page I ask my users how many languages do they speak, I have a textfield and a add button, any time the user hits add, the language written in the textfield has to appear in a list, and it also needs to be removable. When the user finish the work, he hits a send button that do a simple POST/GET action to a PHP script.
This is 90% front-end work, and I'm not a front-end developer (I'm a PHP dev). I know that using some JavaScript/jQuery this can be done, but I don't have any idea of how to handle this.
I tried for a long time, searching some tutorials on internet, but I didn't find anything good. So, if you can provide me some help/tutorial/script I will appreciate it.
You don't really need ajax for this if you are adding the languages all in one go. You can just add hidden form fields to a list when the user clicks the add button and then remove them if they click remove. This will make the interface much more responsive as well. I threw together a quick example here:
http://jsfiddle.net/wnFsE/
There really isn't much to the code to accomplish your goal.
The best way to do this would be an AJAX call to your PHP file that would actually be editing your database. I would also include some sort of visual device to indicate if the database is being changed and once the changes have been saved.
The below example assumes this is being done via JSON.
function saveChanges() {
var inputData = $('#your-input').val();
$.ajax({
type: "POST",
data: inputData,
url: '/file.php',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function ajaxSuccess(response) {
// let the user know their changes are saved
},
failure: function ajaxFailure(response) {
// let the user know something went wrong
}
});
};
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 thought I was doing great with this web app I'm working on, but alas.. I'm starting to think I designed it poorly, even though I started over like 6 times while learning the CI framework.
The application is here and my problem is as follows: when you go to, for example, december 31 2011 (by pressing the right arrow then clicking on the 31st), you get some red errors and my table headers (second part of the page) go crazy. After doing that, you should try going back to say.. april 1, you'll see that my headers go even more crazy, looping through some stuff that I don't know where it's coming from. If you go to april 2nd then, you'll see it still loops through that stuff, even though it shouldn't.
I'm not sure how to debug this, I don't even know where the problem lies: in my AJAX call or my PHP code.
My source code can be found here. The files involved are:
/logic/controllers/planner.php
/logic/models/planner_model.php
/logic/views/planner/days_content.php
/logic/views/planner/detail_content.php
Would anyone be so kind to look at this and help me find the problem here? I'm honestly not sure where to look for the solution to this issue. I can provide more information about how my application works if necessary.
I basically store everything in an array, and pass that to the view. When I do an AJAX call, I update the array and load the view again, after which I pass it into my page using .html().
Thanks a lot.
You can use firebug for firefox to debug ajax/javascript. When I click on a date there are multiple ajax calls. I think its happening because you have the js click handler inside dates_content.php which gets loaded every time you click right/left arrow. So your dates have multiple click handlers associated with it.
$("#day_list li").live("click", function() {
$(".selected").removeClass("selected");
var day = $(this).attr('value');
$(this).addClass('selected');
$.ajax({
type: "POST",
url: "/planner/change_detail",
data: { day: day, month: current_month, year: current_year },
success: function(data)
{
$("#detail_content").html(data);
}
})
});
I am talking about the above code you have
I have a PHP page with a mysql connection, a select query and then i'm building a table using PHP. If i wanted to use jQuery AJAX to refresh the data on a setInterval, on the same page, how would i go about doing that? (by the way i can do it to another PHP page but i've never done it if the PHP stuff is on the same page)
If you want to keep making ajax calls i suggest you do long polling, which basically means you have a script that is requesting content via ajax every given time, and it will verify every time if the content has been modified, if not it will wait again and make another call.
I used jQuery Periodical updater for a chat box and it worked perfectly.
If you wnat to learn more about how jQuery and AJAX work, check out this Nettus article
You set the param in request, for instance file.php?ajax=1
The, depending on its value, you render full html or just the necessary elements for ajax
in php:
if($_GET['ajax']) renderAjax();
else renderFullHTML();
in js:
$.get('file.php?ajax=1', function(data) {
$('.result').html(data);
});