Hi I have searched the web but can't get this to work. I'm trying to call the file databaseUpdated.php (placed in the same folder as the index.php file) from a function that is called every 10 seconds.
If I place the following in the index.php
<script type='text/javascript'>updateboolean();</script>;
the function is runned so thats not the problem, the problem is that the php file is not read.
the file databaseUpdated.php
<body>
<?php
echo ("<script type='text/javascript'>updateboolean();</script>;");
?>
</body>
And here is my functions in the javascript
$(document).ready(function(){
setInterval(function() {
$.get("databaseUpdated.php");//Can't get this to work any obvious reason for this (And yes I have jquery working)?
return false;
}, 10000);
});
function updateboolean(){
alert("Database updated");
document.location.reload(true);
}
Thanks in advance =)
Edit
_________________________________________________________________________________________
When I do
alert(data); in the below function I get the result as the image will show
$(document).ready(function(){
setInterval(function() {
$.get('databaseUpdated.php', function(data) {
alert('Load was performed.');
alert(data);
eval(data);
});
}, 5000);
});
But the "eval(data)"
doesn't seem to work
$.get("databaseUpdated.php"); // This will only return contents of that file The scripts in that file are not executed. To execute them you need to do eval(). So Try This
$.get('databaseUpdated.php', function(data) {
eval(data);
});
Also, may be you will require to change your php file as following:
echo ("updateboolean();");
where is your callback function for ajax
this is how it should be
$(document).ready(function(){
setInterval(function() {
$.get('databaseUpdated.php', function(data) {
alert('Load was performed.');
});
}, 10000);
});
Try this:
$(document).ready(function(){
setInterval(function() {
$.get('databaseUpdated.php', function(data) {
alert("Database updated");
// or alert(data); //in case you return data from php
document.location.reload(true);
});
}, 10000);
});
By doing $.get("databaseUpdated.php"), you request the PHP page, but ignore the return results.
Try this:
PHP
echo "updateboolean();";
JavaScript:
$.getScript("databaseUpdated.php");
try this in place of your echo
echo "<script>updateboolean();</script>";
Related
I want to load simple codeignitier controller, but no success i get 404 error.
It looks like jquery load does not support pretty/clear urls? Is it possible and how?
When i try to load some file using this same code it works perfectly, but when i try to load codeignitier controller function nope, i get 404 in Console.
<script type="text/javascript">
$(document).ready(function () {
$("#season").load('https://www.example.co/index.php/system/example');
//i already tried without 'index.php'
});
</script>
when i check does load function works using some simple file, it works perfectly:
<script type="text/javascript">
$(document).ready(function () {
$("#season").load('https://www.example.co/test.php');
});
</script>
and controller:
public function example(){
echo "EXAMPLE";
}
This link exists and is not 404 (of course without example):
https://www.example.co/index.php/system/example
Try by pass it as
window.location.href = '<?php echo base_url('controller/method'); ?>'
I solve it by adding '?' before index.php.
So this is result:
<script type="text/javascript">
var PI = {
onReady: function() {
$.ajax({
type: 'GET',
url: '/index.php?/system/getseasons/SC0',
success: function (response) {
alert('success');
$("#season").html(response);
},
error: function(xhr, textStatus, error){
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
})
},
};
$( document ).ready( PI.onReady );
</script>
I am trying to load content of a URL which is in a href of a Link using AJAX/JQUERY.
For some reason, the AJAX doesn't get executed and when i click on the Link, the URL will open in a new window!
but I need to load the content of URL on the same page that has the AJAX without opening a new window!
this is my current code:
<div id="content"></div>
<a id='listc' class='lisitem' href='file.php?id=".$id."' >".$id."</a>
and the AJAX:
<script type="text/javascript">
$("#listc").click(function() {
$("#content").load(this.href);
return false;
});
</script>
just to clarify, I do have the jquery lib included in my page header and I am using it for other stuff on the same page. so the issue is not that.
could some please advise on this issue?
Thanks
You need to prevent the default action of the link:
<script type="text/javascript">
$("#listc").click(function(e) {
e.preventDefault();
$("#content").load(this.href);
return false;
});
</script>
You need to do something with your AJAX return :
<script type="text/javascript">
$("#listc").click(function() {
$("#content").load(this.href, function(result){
alert("AJAX done");
});
return false;
});
</script>
You can change the href from the actual page, to a javascript: call. This way, you wouldn't have to concern about the default link redirect.
<a id='listc' class='lisitem' href=javascript:LoadFunction('file.php?id=".$id."'); >".$id."</a>
JS:
function LoadFunction(url) {
$("#content").load(url, function(result){
//something
});
}
Give the following a try:
document.getElementById('listc').addEventListener('click', function() {
$("#content").load(this.href);
return false;
});
UPDATE
Change:
<a id='listc' class='lisitem' href='file.php?id=".$id."' >".$id."</a>
to:
<a id="listc" class="listitem" data-id="<?= $id; ?>" href="#"> <?= $id; ?></a>
And AJAX to:
$(document).delegate('.listitme','click',(function() {
var id = $(this).data('id');
$('#content').load('file.php?id=' + id);
return false;
}
or:
$(document).delegate('.listitme','click',(function() {
var id = $(this).data('id');
$.post('file.php', {id : id}, function(answer) {
$('#content').html(answer);
});
}
Try something like that :
When you click on the link, do an AJAX call then print the result in your container.
<script type="text/javascript">
$("#listc").click(function(e) {
e.preventDefault();
$.ajax({
url: $(e.currentTarge).attr('href'),
complete: function () {
// remove loading status if neeed
},
success: function (response) {
$("#content").html(response)
},
error: function() {
//manage error here
}
});
});
</script>
I am having little problem with ajax. Here is my code what I have done so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
getLocation();
});
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position)
{
latitude =position.coords.latitude;
longitude= position.coords.longitude;
$.post({ url: 'test.php',
data : ({lat :latitude,long:longitude}),
success: function(data){
alert('done');
}});
}
What I am trying to do is call the function on document ready and trying to retrieve the value of ajax call on the same file where I did call this script. Whenever I reload the page, I don't get any value of :
print_r($_POST['lat']);
I don't know what is the actual problem,I already checked in console and didn't get any error. Please help.
To get the value you need to print it in success callback
$.post({ url: 'test.php',
data : ({lat :latitude,long:longitude}),
success: function(data){
alert(data);
}
});
and if you put
if (isset($_POST['lat']) {
print_r($_POST['lat']);
}
you will get the value in alert box.
EDIT: You can check in php if the reqest came from Ajax using this:
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if (isset($_POST['lat']) {
print_r($_POST['lat']);
}
exit();
}
if you put this at the begining you will see only that print_r from ajax call.
The value you are printing is not an array. So you have to print it like,
print $_POST['lat'];
(OR)
echo $_POST['lat'];
AND NOT
print_r($_POST['lat']);
If you want to print all post values mean then you can print it as,
print_r($_POST);
I have solved my problem by own. Here what I have done. I made one more file called test2.php and put my php script over there and call that file in my ajax call. Here the code.
Test.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
getLocation();
});
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position)
{
latitude =position.coords.latitude;
longitude= position.coords.longitude;
$.ajax({ url: 'test2.php',
data : ({lat :latitude,long:longitude}),
type: 'post',
success: function(data){
if(data=='true'){
window.location = "http://example.com";
}
}
});
}
</script>
Test2.php
//just for example
<?php
echo 'true';
?>
Hope this will help someone in future.
Here is the code that i have been working on. Apparently the #layout call is executed first for some reason and it gives undefined as the value.
$(function() {
$(".left").load("PartsList.php", function() {
alert("success");
});
$(".right").load("Custom.php", function() {
alert("success");
});
$("#layout").children().on({
click: function() {
alert($(this).attr('id'));
}
});
});
Thank you for your time :).
That's because .load() is called asynchronously.
You may bind with
$("#layout").on({
click: function() {
alert($(this).attr('id'));
}
}, '.left,.right');
instead
So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.
You'll need a getTable.php page that displays your table, and nothing else: no headers, footers, etc.
PHP (getTable.php) - this can be any server side code (asp, html, etc..)
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Then, in your JS, you can easily refresh the table by using the load() method:
HTML
<div id="tableHolder"></div>
JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
Use ajax, following example is in jQuery:
$(function() {
var prevAjaxReturned = true;
var xhr = null;
setInterval(function() {
if( prevAjaxReturned ) {
prevAjaxReturned = false;
} else if( xhr ) {
xhr.abort( );
}
xhr = $.ajax({
type: "GET",
data: "v1="+v1+"&v2="+v2,
url: "location/of/server/script.php",
success: function(html) {
// html is a string of all output of the server script.
$("#element").html(html);
prevAjaxReturned = true;
}
});
}, 5000);
});
The success function assumes that your server script outputs the html that you want to replace in the element with id 'element'.
You should have a page that return the information and pull data using Ajax / jQuery.
<div class="result"></div>
setInterval(function() {
$.get('table.php', function(data) {
$('#result').html(data);
});
}, 5000);
Here is another option for you to use. This solution is using an IIFE which is preferred over setInterval. You can read more about IIFE at the link above.
JAVASCRIPT:
var $results = $('#results'),
loadInterval = 5000;
(function loader() {
$.get('script.php', function(html){
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
HTML:
<div id="results"></div>
setTimeout(function(){
jqueryFunction(Args);
},100);
will work...
100 = 100 milliseconds
The following works with JQuery Datatables 1.10
`var tableName;
//Set AJAX Refresh interval.
$(function() {
setReloadInterval(10); //Refresh every 10 seconds.
}
//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
if(reloadTime > 0)
internalId = setInterval("reloadTable()", (reloadTime * 1000);
}
//Auto Refresh JQuery DataTable
function reloadTable() {
tableName.ajax.reload();
}
//Table defined...
$(document).ready(function () {
tableName = $('#tableName').DataTable({
"sAjaxSource": "/someUrl",
});`