I have my site on index.html made in html+css., at my index.html i have this div id "content", where you put in main content to the page, and there's a link at the menubar that src to page2.php. When you press on the link it goes to the page2.php, but i want it to display inside the < div "content".
In page2 i have Hello this is a test, in a echo..
I dont want to use frames.. should i split up my design on index.php, and then on page2.php include top & footer? or is there another way
function test() {
var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readystate==4 && xhr.status=200)
document.getElementById('content').innerHTML = xhr.responseText;
};
xhr.open("GET", "start.php", false);
xhr.send(null);
}
Hjem |
<div id="content" ></div>
Use AJAX to post a HTTP GET request to page2.php and display the result(echo) in the div container.
Somewhat like following, (will not work in IE)
<script>
function test(){
var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readystate==4 && xhr.status=200)
document.getElementById('content').innerHTML = xhr.responseText;
};
xhr.open("GET", "page2.php", false);
xhr.send(null);
}
</script>
Try AJAX online
Like you suggested in your question, you should look into splitting the index.html into a header and a footer. This will allow your site to work without javascript, and you may find that it is easier or makes more sense.
There's some quite good tutorials around, such as this one, but googling for php header footer returns plenty of options.
You can use XMLHttpRequest() and not only "Hello this is a test", but you can also set any data from your MySQL database to <div id="content"> innerHTML.
Related
I'am using Yii framework, I want to reload this div:
<div class="likes" id="likes">
<?php
echo $model->likes." ".CHtml::imageButton($src.'like.png', array('value'=>'like', 'width'=>'25px', 'height'=>'20px'));
?>
</div>
by using this ajax function that is written in a js file in the extensions folder:
$(document).ready(function(){
$("#like").click(function(){
$("#likes").html("result reloaded successfully");
});
});
but their is nothing happened when I clicked the button, can you help me?
this may help someone
$("#reload").click(function(){
$("#like").load(location.href + " #like>*", "");
});
without page refreshing refresh particular div or any tag
Create a new file called reload_likes.php with the following code:
<?php
echo $model->likes." ".CHtml::imageButton($src.'like.png', array('value'=>'like', 'width'=>'25px', 'height'=>'20px'));
?>
then on your javascript file put:
function FreloadDiv(){
var request = new XMLHttpRequest();
request.open('GET', 'http://yourdomain.com/reload_likes.php', false);
request.send(null);
if (request.status === 200) {
document.getElementById('likes').innerHTML = request.responseText;
}
}
Finally add onClick='FreloadDiv();' to your button
because you call by the wrong way I think. your id is likes and you are writing like instead of likes. Check it first after that I will check next coming error..
Hello I was thinking about making a shoutbox for my site. I don't want to use any others because it doesn't fit in well with my pre-existing members database. I thought of some ideas but I'm not really sure on a better way of doing this. I want to submit a form and without 'GET' send a shout. I also can't re-load the page. That's where AJAX comes in :p
I thought of setting up the form on my webpage as:
<form method="post" onsubmit="return sendShout()" >
<input type="text" name="Shout" id="Shout" />
</form>
With my javascript being the following:
<script>
function sendShout()
{
if(ShoutTime == 0)
{
var http = new XMLHttpRequest();
http.open("GET", location.href+"?shout="+encodeURIComponent(document.getElementById("Shout").value)+"&name="+encodeURIComponent(document.getElementById("username").value), true);
http.send();
ShoutTime = <?php echo $shoutWait;?>+1;
ShoutWait();
unidle();
document.getElementById("Shout").value='';
}
else
{
ShoutWaitNote();
getLogs();
}
return false;
}
</script>
then on the page I could put into the databse like $_GET['shout']... etc.
Now is there a better way to use ajax to send a shout to a mysql database without having the shout as a GET in the url?
I suspect there are bigger problems at hand here, but you can do a POST with XMLHttpRequest like so:
var http = new XMLHttpRequest();
http.open("POST", location.href);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send("shout=something&name=something");
As opposed to the GET version:
var http = new XMLHttpRequest();
http.open("GET", location.href + "?shout=something&name=something");
http.send();
You'll want to apply URL encoding in both cases. Good luck.
I'm displaying the cotntent of a text file on web page(say between <div id='text'></text>)
this file's content is edited by any user who view the page, I already use ajax to write to the file and display to the current user, but if there are any users browsing the page at the same moment they have to refreh the page to see the new edited content.
I want to know how to use ajax to make the part that contain the file content remain updated continmuosly without refreshing the page
<script type='text/javascript'>
function change(){
if (window.XMLHttpRequest) xhr=new XMLHttpRequest();
else xhr=new ActiveXObject("Microsoft.XMLHTTP"); //IE5
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
if(xhr.responseText=="empty") return;
document.getElementById("space").innerHTML=xhr.responseText;
}
}
var str=document.getElementById('msg').value;
document.getElementById("msg").value="";
xhr.open("GET","response.php?q="+str,true);
xhr.send();
}
</script>
<center>
<div id='space'>nothing</div>
<input type='text' name='msg' id='msg'>
<input type='button' onClick='change()' value='Click'>
</center>
The simplest way to accomplish the "server push" effect is through polling.
In your case, you can add this functionality by adding a simple Javascript statement:
window.onload = function()
{
setInterval("change();", 5000);
};
This code will call change(); every 5000 ms.
You could use setInterval() to perform a periodic AJAX query to check for updates. Then, if needed,update the content on the page.
I have the following code generating content on my site:
<div class="content" id="links">
<?php displayTitle("Links"); ?>
<?php displayContent("Links", $isLoggedIn); ?>
</div>
The content has a button that calls a Javascript function 'addLink()' to edit itself. Here is the Javascript with an Ajax call to change the content:
function addLink(){
var ajaxRequest; // The variable that makes Ajax possible!
if(window.XMLHttpRequest){
ajaxRequest = new XMLHttpRequest();
}
else{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxRequest.onreadystatechange = function(){
alert(ajaxRequest.readyState);
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('links');
ajaxDisplay.innerHTML = "<?php displayTitle('Links'); ?><?php displayContent('Links', $isLoggedIn); ?>"
}
}
var imgURL = document.getElementById('links_img').value;
var linkURL = document.getElementById('links_link').value;
var queryString = "?imgURL=" + imgURL + "&linkURL=" + linkURL;
ajaxRequest.open("GET", "addLink.php" + queryString, true);
ajaxRequest.send(null);
}
'addLink.php' adds things to a table, theoretically allowing the content function 'displayContent()' to show the new entries in the table ('displayContent()' queries a table).
The PHP call works fine, but I have to refresh the page to see the changes.
Is there some problem with how I am doing this? Possibly because there are already PHP calls in the inner HTML when the page is loaded in the first place?
Any help is appreciated, I'm a bit of a beginner with Ajax.
ajaxRequest.onreadystatechange = function(){
alert(ajaxRequest.readyState);
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('links');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
Sorry a little correction. You are attempting to access the pre-ajax php scripts inside ajax callback function. That's not how it works. You want the data that is retrived after-ajax call. Ajax retrives the output from the GET request, and store in ajaxRequest.responseText. Try replacing that and then see what you get.
In your addLink.php you should add the link and then echo out the data that you wish to display as the responseText. What had happened is that you inject the data VIA addLink but you never actually display it on the client side VIA ajax correctly. However, when you refresh the page, the script retrives what has been injected and display it accordingly.
I have an HTML document, which loads content from a PHP file using an AJAX call. The important bit of my code is below:
default.html :
/*more code above*/
var PHP_URL = "content.php";
var Content = document.getElementById('Content');
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange =
function() {
if(ajaxRequest.readyState==4) {
if (ajaxRequest.status==200)
Content.innerHTML = ajaxRequest.responseText;
else
Content.innerHTML = "Error:<br/>unable to load page at <b>"+PHP_URL+"</b>";
Content.className = "Content Solid";
}
}
ajaxRequest.open("GET",PHP_URL,true);
ajaxRequest.send();
/*more code below*/
Is it possible for the file at 'content.php' to detect that it has been called from 'default.html', or a different calling document as necessary?
Most well-known Ajax frameworks like jQuery and mooTools add a specific header which you can check with PHP:
if (strcasecmp('XMLHttpRequest', $_SERVER['HTTP_X_REQUESTED_WITH']) === 0)
{
// Ajax Request
}
I guess the best would be to set a request header in your AJAX call, such as
st.setRequestHeader('X-Sent-From','default.html')
then in content.php,
$sentFrom=$_SERVER['HTTP_X_SENT_FROM']; // outputs default.html
$_SERVER['HTTP_REFERER'] might be what you want
Reference
http://php.net/manual/en/reserved.variables.server.php
It is not possible to simply detect that a request came from an AJAX call on the server. You could, however, add a parameter that you send when requesting it via AJAX that indicates it is coming from an ajax call.
For example:
/*more code above*/
var PHP_URL = "content.php?mode=AJAX";
var Content = document.getElementById('Content');
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange =
function() {
if(ajaxRequest.readyState==4) {
if (ajaxRequest.status==200)
Content.innerHTML = ajaxRequest.responseText;
else
Content.innerHTML = "Error:<br/>unable to load page at <b>"+PHP_URL+"</b>";
Content.className = "Content Solid";
}
}
ajaxRequest.open("GET",PHP_URL,true);
ajaxRequest.send();
/*more code below*/
If simply detecting that the call came from default.html is enough (and not distinguishing between an AJAX call or a clicked link), then checking the Referrer header will do the trick, as suggested by #Jamie Wong.