I am trying to make a simple AJAX program, that always displays the newest text from a file.
It should be retrieving it from the file, wait 2 seconds, and if something changed, write it out.
I tried already but the code doesn't seem to work.
<html>
<head>
<script type="text/javascript">
function sleep()
{
var dt = new Date();
dt.setTime(dt.getTime() + 2000);
while (new Date().getTime() < dt.getTime());
}
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxtest.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<script>
while (0=0)
{
loadXMLDoc();
</script>
<div id="myDiv"><h2>Status</h2></div>
<script type="text/javascript">
setTimeout(loadXMLDoc(),1000)
}
</script>
</body>
</html>
How do I get it to check and update the text automatically?
Thanks!
Edit:
Here is the final code for anybody who is interested:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","status.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<script type="text/javascript">
loadXMLDoc();
</script>
<div id="myDiv">Current Status</div>
<script type="text/javascript">
setInterval("loadXMLDoc()", 2000);
</script>
</body>
</html>
I am not sure if its a typo or a thing from another language. (Like PHP)
In HTML you cannot have javascript code that goes across multiple script tags.
Also your while loop has only one = sign, would need two to be comparison.
But that being said you do want setTimeout or setInterval, because non multi-threaded javascript will just lockup, mulit-threaded ones would wasting processing time as well but not totally lockedup.
Something like
setInterval("loadXMLDoc()", 2000);
setTimeout executes the first parameter as javascript after the second parameter of milliseconds.
setInterval executes the like setTimeout except every X milliseconds.
Both setTimeout and setInterval return a value which can be used to stop the javascript from being executed again.
That value is used in clearTimeout(value) or clearInterval(value)
The body of your page would look like this:
<body>
<div id="myDiv"><h2>Status</h2></div>
<script type="text/javascript">
setInterval("loadXMLDoc()", 2000);
</script>
</body>
Related
im today stared learning some ajax technology and im done that when im pressing the button im getting text from another file with functions but they dont working.
My main file
<html>
<head>
<script>
function showHint(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "request/testa.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<button id="inp" style="background-color: #0000FF; color: #ffffff" onclick="showHint(this.value)">
Just do it!
</button>
<p><span id="txtHint"></span></p>
</html>
and in file which send me text (request/testa.php) is
test 2
<script>
document.getElementById("inp").value="You did it!";
document.getElementById("inp").style.backgroundColor="ffffff";
</script>
and tekst working fine, i got text "test 2" and script but that not works.
Writing javascript code into your page using innerHTML will not execute the script.
The easiest way around this is to use jQuery's load, which will execute the scripts for you.
You have to change something in testa.php. Put everything in a function or just remove the script tag.
function MyScript(){
document.getElementById("inp").value="You did it!";
document.getElementById("inp").style.backgroundColor="ffffff";
}
or
document.getElementById("inp").value="You did it!";
document.getElementById("inp").style.backgroundColor="ffffff";
After that you can replace the innerHTML in your showHint function for the eval function.
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
for
eval(xmlhttp.responseText);
but have in mind that the eval function opens the door for bugs or hacks.
I've created an html and a php file. The php links to a database (either my localhost or the university's database online), and the html uses AJAX to partially update a tag's content:
<html>
<head>
<title>iNote</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript">
function pullMore(){
var xmlhttp;
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome,etc.
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("more").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","1.php",true);
document.getElementById("more").innerHTML = "<p>notenter</p>";
xmlhttp.send();
}
</script>
<div id="Checklist"></div>
<div id="Note"></div>
<div id="more" onclick="pullMore()">
<p>Click to Replace Content Here</p>
</div>
</body>
</html>
However, no matter how I modified the php's content, (even when I changed it to a simple echo "<p>please show this!!</p>";), the xmlhttp.status ==200 cannot be satisfied, and "notenter" is displayed on screen.
If I quote out the condition and leaving only xmlhttp.readyState == 4, the message in <div> would be replaced, but only by blank space...and if the php code is the full one for accessing database, EVERYTHING after echo, including all the codes and brackets, would be outputted...
Can anyone help me? I've been debugging for hours and still can't figure out where's the problem...Thank you so much!
I know that these kind of questions pop up a lot on here. I usually am not the type to ask questions but this time I could not find a solution through searching.
I have boiled down my problem to a very small and simple environment:
I have 3 files:
Index.php:
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="javascript.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div>
<input type="button" value="Show" onclick="show('content','content.php');">
<script type="javascript/text">
show('content','content.php');
</script>
<br>
<div id="content"></div>
</div>
content.php
<div>CONTENT</div>
<input type="checkbox" id="checkbox" onclick="checkbox();">
<input type="text" id="textfield">
And javascript.js
function show(divcontainer,file){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(divcontainer).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", file);
xmlhttp.send();
}
function checkbox(){
if(document.getElementById('checkbox').checked){
document.getElementById('textfield').value = "checked";
}
else{
document.getElementById('textfield').value = "unchecked";
}
}
When I press the button in index.php it loads the file content.php into the div container "content" via an ajax call. The file content.php has a checkbox and a textfield. When the checkbox is checked and unchecked it executes a javascript function that puts checked/unchecked in the textfield.
Simple enough and everything works fine.
Now what I want to do is to call the function checkbox() the moment that content.php is loaded. In this example it would mean that the textbox would already have the value "unchecked" and not only after the checkbox has been checked and unchecked again.
Putting the javascript code into the file content.php didn't do anything.
Somehow I feel that there must be a simple solution to this. I'm still pretty new to javascript though so I don't know the in and outs yet.
Any help would be greatly appreciated
Many thanks!
Try this
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(divcontainer).innerHTML=xmlhttp.responseText;
checkbox();
}
if you´re new to JS you should definitely have a look at jQuery. Makes AJAX alot simpler.
$.ajax({
url: youURL,
success: function (){
//or whatever function you want to be called after success :)
}
});
I'm trying to make an HTML page that displays another html file in an alert; but it's not displaying when the triggering button is pressed.
<html>
<head>
<script>
var xmlhttp=new XMLHttpRequest();
function pop() {
xmlhttp.open("GET","content.html",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readystate==4&&xmlhttp.status==200) {
alert(xmlhttp.responseText);
}
}
}
</script>
</head>
<body>
<input type="button" name="test" value="push" onclick="pop()">
</body>
</html>
Here is the content of content.html
<html>
<body>
Hi!
</body>
</html>
In fact it's readyState. JavaScript is case-sensitive.
Also, it might be better to send after setting up everything.
Lastly, you have a missing }.
var xmlhttp=new XMLHttpRequest();
function pop()
{
xmlhttp.open("GET","content.html",true);
xmlhttp.onreadystatechange=function()
{ if(xmlhttp.readyState==4&&xmlhttp.status==200)
{alert(xmlhttp.responseText);}
}
xmlhttp.send();
}
Yep, i'm counting three opening braces ({) but only two closing braces (}). Check your browser's error console to spot such errors.
Check Below: Closing bracket is missing.
var xmlhttp=new XMLHttpRequest();
function pop()
{
xmlhttp.open("GET","content.html",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readystate==4&&xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
}
I am trying to get the javascript function in ajax call. My code works fine and returning back my javascript code but there is a problem in my received javascript function. Here is my code for Ajax..
function media_type(id)
{
var xmlhttp;
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)
{
eval(document.getElementById("asad").innerHTML=xmlhttp.responseText);
}
}
xmlhttp.open("GET","video/media_type.php?cat_id="+id,true);
xmlhttp.send();
}
And her is the code where i am returning a simple hello world alert box.
if($num_rows==0)
{
//echo("Sorry no record found.");
echo'<script type="text/javascript">
alert("hello World");
</script>';
}
I am receiving the code back exactly but code is not executing. Please tell me how i can fix this issue. Thanks in advance.
Can I ask why you need to return JavaScript from the server? How about you return a simple response (string, boolean, number) from the server, and execute something that already lives on the client based on the return value? Much safer and easier. It may not be the solution you are looking for, but your js-fu will be much stronger for it.
Just return the JS that you want to execute (alert("hello World");) and make an eval. Remove <script type="text/javascript"> and </script>
eval(xmlhttp.responseText);
will be:
eval('alert("hello World")');
i will try with this
if($num_rows==0)
{
//echo("Sorry no record found.");
echo'<html><script type="text/javascript">
alert("hello World");
</script>
</html>';
}
i think this line is creating problem
eval(document.getElementById("asad").innerHTML=xmlhttp.responseText)
that is
eval(document.getElementById("asad").innerHTML='<script>alert("Hi");</script>';)
getting converted to
eval(document.getElementById("asad").innerHTML='< script > alert("Hi");</script>';)
I had this issue the other day...
you have to set your header in the php page to Content-Type: text/javascript; charset=utf-8
Here is the Entire Code to make this work
For your php file
<?php
header("Content-Type: text/javascript; charset=utf-8");
echo'<script type="text/javascript">
alert("hello World");
</script>
';?>
and here is the Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$.ajax({
type:'POST',
url:'toget.php',
success:function(d)
{
$(document).append(d);
}
});
</script>
//try using this
<?php
if($num_rows==0)
{
//echo("Sorry no record found.");
?>
<script type="text/javascript">
alert("hello World");
</script>
<?php
}
?>