I have two text files that are being display on a web page through ajax. I need these two files to update as soon as more text is added to the text file. When I completed this script I tested it on my localhost and all was working properly. Now I have attempted to get it to work on my web host and the text is displaying, but when it is time to update the files nothing updates.
I tried disabling the caching of the ajax response, but the files still do not update.
Here is the code:
<html>
<head>
<script>
$.ajaxSetup ({
cache: false
});
function UpdateDAU()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("UpdateD").innerHTML=xmlhttp.responseText.split('\n').join('<br/>';
}
}
xmlhttp.open("GET","../logs/dau.txt",true);
xmlhttp.send();
}
function UpdateFireBox()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("UpdateF").innerHTML=xmlhttp.responseText.split('\n').join('<br/>');
}
}
xmlhttp.open("GET","../logs/firebox.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<script type="text/javascript">
UpdateDAU();
</script>
<div id="UpdateD">No Logs</div>
<script type="text/javascript">
setInterval("UpdateDAU", 1000);
</script>
<script type="text/javascript">
UpdateFireBox();
</script>
<div id="UpdateF">No Logs</div>
<script>
setInterval("UpdateFireBox", 1000);
</script>
</body>
</html>
Is there something that needs to be changed on the server or is this an issue with my code?What am I doing wrong?
After researching for the past week I finally have the display updating properly.
I could not get the files to update from the text file, so I had to echo the files from a php file before the ajax displayed it.
This is the code that is working on multiple machines:
<html>
<head>
<script>
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
function UpdateDAU()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("UpdateD").innerHTML=xmlhttp.responseText.split('\n').join('<br/>');
}
}
xmlhttp.open("GET","getdau.php",true);
xmlhttp.send();
setTimeout(function() {
UpdateDAU();
}, 1000)
}
function UpdateFireBox()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("UpdateF").innerHTML=xmlhttp.responseText.split('\n').join('<br/>');
}
}
xmlhttp.open("GET","getfirebox.php",true);
xmlhttp.send();
setTimeout(function() {
UpdateFireBox();
}, 1000)
}
</script>
</head>
<body>
<script type="text/javascript">
UpdateDAU();
</script>
<div id="UpdateD"><p class="text-warning">If there is no page...<br> Then the guards have not started there rounds.</p></div>
<script type="text/javascript">
UpdateFireBox();
</script>
<div id="UpdateF"><p class="text-warning">If there is no page...<br> Then the guards have not started there rounds.</p></div>
</body>
</html>
Here is the PHP files used to diplay files:
<?php
$file = file_get_contents('../logs/dau.txt', true);
echo $file;
?>
and second PHP file is the same:
<?php
$file = file_get_contents('../logs/firebox.txt', true);
echo $file;
?>
Using this code the logs inside txt files are updated and displayed every second without refreshing the page.
If there is a way to use these same steps but with only 1 php file instead of 2 show me and I will delete my answer and select yours.
Related
My problems is how can I make my java script run on the elements that returned by AJAX. The javascript does not work on the that returned by AJAX. In my script it suppose to pop out a dialog box with "Hello" but its not. How can I make it works or there are another ways for this? Thanks for the advice.
The below is my code...
index.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#box_1").on("click", function() {
alert("Hello!");
});
changeDisplay();
});
function changeDisplay() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("text").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajaxHandling.php",true);
xmlhttp.send();
};
</script>
</head>
<body>
<h1>Ajax Test</h1>
<div id="text">
</div>
</body>
</html>
ajaxHandling.php
<?php
echo '<div id="box_1" class="box">Click me</div>';
?>
A common problem, you need to use the correct on() syntax for future elements by binding it to a parent of the future element that exists at the time the script runs.
$(document).on("click", "#box_1", function() {
alert("Hello!");
});
I've used document, but using the closest existing parent is better. Example:
$("#wrapper").on("click", "#box_1", function() {
alert("Hello!");
});
My short answer is that you need to bind the click event slightly differently, using jQuery.on:
$('#text').on('click', '#box_1', function() {
alert('Hello!');
});
This binds the click event dynamically to any item within the #text element (or that is added later to the #text element) that matches your #box_1 selector.
My long answer is that if you are using jQuery, you should also take advantage of its AJAX library rather than roll your own.
$.ajax({
url: '/ajaxHandling.php',
}).done(function ( data ) {
$('#text').html(data);
});
I have a simple form that that when changed includes a php file in a div. For some reason jquery will not load when placed in that included file? Can someone tell me why this doesnt work.
<select name='make' onChange='show(this.value)'>
<option value='some-file.php'>the file</option>
</select>
<div id="make">Where the file is loaded and where jquery wont work</div>
<script type="text/javascript">
function show(str)
{
if (str=="")
{
document.getElementById("make").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("make").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","include/some-file.php?q="+str,true);
xmlhttp.send();
}
</script>
Then some-file.php
$models = mysql_query("SELECT model, id FROM model where make like '%".$q."%' order by model asc") or die(mysql_error());
//Puts it into an array
$count = 1;
$max = 3;
while($model = mysql_fetch_array( $models ))
{
if($count%20==1)
echo '</ul><ul style="float:left; padding:0; margin-right:10px;" class="makesModels">';
echo "<li style='padding-right:5px; display:block;'><font color='#fe9000'>".$count.".</font> ".$model['model']." <a class='delete-model".$model['id']."'>x</a></li>";
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.1.min.js'></script>
<script type='text/javascript'>
$(docuument).ready(function() {
$(".delete-model<? echo $model['id'];?>").click(function() {
alert("delete");
});
});
</script>
$count++;
}
?>
i've had the same exact problem ...
to solve this all you need to do is edit the ajax from using normal JavaScript to $.ajax so use jQuery to handle it .. and it will work ..
$.ajax({
url: "include/some-file.php?q="+str,
type: "GET",
datatype: 'html',
success: function(e){
$('#make').html(e);
}
});
I'm not sure about it, because the code is not complete, my guess would be that on someotherphpfile that you are importing you use document.ready function which is not calling because you load the file using ajax.
scripts loaded with ajax or in general a script string injected in the DOM will not execute for security reasons
you can use eval to get it working although i must warn you that you could be opening a can of worms..
after document.getElementById("make").innerHTML=xmlhttp.responseText; add this..
var parent = document.getElementById('make');
var myScript = parent.getElementsByTagName('script');
for(var i=0,len=myScript.length; i<len; i++){
executeScrpt(myScript[i]);
}
then the execute function...
function executeScrpt(scrpt){
if(scrpt.innerHTML != ""){
eval("("+script.innerHTML+")");
} else {
if(scrpt.src != ""){
var myScrpt = document.createElement("script");
myScrpt.src = scrpt.src;
document.head.appendChild(myScrpt);
}
}
}
I am getting an undefined index error message on server side when i am trying to send a value selected from a dropdown box on client side (javascript/AJAX) to server side (php). I have a feeling that the GET on the client side is not sending the url correctly or if it is it is sending the value as null.
Does anyone have any idea how to solve this issue.
The code on the client is:
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.getJSON("process.php", function(fileName)
{
for(var i in fileName)
{
fileName[i] = fileName[i].split("../Test/").join("")
fileName[i] = fileName[i].split(".xml").join("")
document.dropDown.file[i]= new Option(fileName[i],"../Test/"+fileName[i]+".xml", false)
}
});
});
var xmlhttp;
function getFile(str){
alert("xmlprocess.php?filename="+str);
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange= response(file);
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlprocess.php?filename="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name = "dropDown">
<Select name = "file" onclick = "getFile(str1)" onchange = "str1 = this.options[this.selectedIndex].value"></Select>
</form>
<div id="txtHint"></div>
</html>
and the code on the server side is :
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
$br = "<br>";
$filename = $_GET["filename"];
echo $filename;
?>
Ok guys ive found the answer
i had to change the onreadystatechange to be equal to a function on client side as shown below
xmlhttp.onreadystatechange= function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML= xmlhttp.responseText;
}
};
I am currently trying to build an Ajax / PHP grid based on a dropdown selection.
Firstly on the page I have a dropdown select box, on selection a variable is passed to a PHP page which executes a select statement, and I echo a table grid out to the page.
I have been using the library jquery / jquery.dataTables.js to make the table sortable and easy to navigate. The table / grid is outputted but sorting the columns and paging is not working can anyone help Ps. I have tried other grid libraries as well and the do not work????
Please see the code below thats being used:
<script type="text/javascript" src="/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('table#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
</script>
<script type="text/javascript">
function selMetal(str,str2){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sql.php?m="+str+"&s="+str2,true);
xmlhttp.send();
}
</script>
Then the php script echos the table out inbetween
Thanks for you help in advance.
You need not use detect browser and make ajax call. Just use .ajax() method. You should use this code:
<script type="text/javascript">
function selMetal(str,str2){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
$.ajax({
url: "sql.php",
data: {m:str, s:str2},
success: function(data) { $("#txtHint").html(data); },
dataType: "html"
});
}
</script>
Not sure this will solve your problem or not. Give a try :-)
I'm using Ajax in a HTML page to get a URL from a PHP file. I want to use the obtained URL to show with Colorbox.
Index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
{
xmlhttp=new XMLHttpRequest();
}
else // code for IE6, IE5
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) // 4- Peticion completada
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
Livesearch.php
<?php
$variable = $_REQUEST['q'];
$response = "";
if(strcmp($variable,"taj")==0)
{
$response = "<p><a href='http://www.viajes-blog.com/wp-content/uploads/taj-mahal-agra-india.jpg' rel='example1' title=''>Taj Mahal</a></p>";
}
else
{
$response = "no picture found";
}
//output the response
echo $response;
?>
I'm able to get the URL but not able to open the image with Colorbox.
Perhaps is a CSS problem but I can't find the error.
Thanks in Advance
$.colorbox({href:Livesearch.php,innerWidth:560,innerHeight:400, open:true});
http://api.jquery.com/load/
It is more intuitive than native JS )