I want to implement twitter like user flow interface, i.e. when user goes to
http://twitter.com/#!/abc the page is loaded.
I have tried to implement this at:
http://forum.abhibhatia.co.cc/ajax/
What I try to do is that as soon as page loads, the url is splitted by "#!/" and secon part is loaded so that http://forum.abhibhatia.co.cc/ajax/posts.php can be accessed at http://forum.abhibhatia.co.cc/ajax/#!/posts.php . The problem I am facing is that the page does not change after I redirect user using window.location
it does not work. I have not tried any other way to redirect users yet.
here is the javascript function used:
function geturl(){
var url=window.location.toString();
var a=url.split("#!/");
if(a.length==1)
a[1]='data.php';
return a[1];
}
function fetchPage(){
var url=geturl();
var xmlhttp;
if (url.length==0&&m==1)
{ url='data.php';
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==1) document.getElementById("data").innerHTML="Loading...";
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var file=xmlhttp.responseText;//alert(file);
var contents=file.split("<head>");//alert(contents[0]);
var useable=contents[1].split("</head>");
var head=useable[useable.length-2];//alert(head);
var body=useable[useable.length-1].split("</body>");
document.getElementById("data").innerHTML=body[0];
document.head.innerHTML=document.head.innerHTML+head;
//document.getElementById("data").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
fetchPage();
look closer at the window.location object you can use window.location.hash but as mentioned before hashbangs are a bit old these days I'd be much more inclined to use the html5 state management with standard hashes # as a fallback.
some further reading:
https://developer.mozilla.org/en/DOM/window.location
http://www.adequatelygood.com/2010/7/Saner-HTML5-History-Management
If you really want to make a twitter style interface you should look to put the whole app on a framework which does all of this for you like backbone.js which will mean that you just need to use a REST/CRUD style data source and then will implement all of the state managemet and hash fallbacks for you.
Related
I find google bots cannot reach my web. In google webmaster tools, it said Truncated Response. I try to find reference in google about this but no other alternatives way to handle it. Then I try use ajax to load my part of web (content.php). I found this script in w3school:
<script>
$(document).ready(function(){
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)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","content.php",true);
xmlhttp.send();
});
</script>
content.php contains to display article from database.
I dont have some $ to buy dedicated server. please let me know how to minimize if you have other method.
So I have this code :
function checkStatus()
{
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)
{
if (xmlhttp.responseText == "1") {
document.getElementById("maincontent").innerHTML = '<br/><br/><center>Please refresh the page to continue.</b></center>';
}
}
}
xmlhttp.open("GET","file.php?id=1",true);
xmlhttp.send();
}
and I'm wondering about the last 2 lines (xmlhttp.open and xmlhttp.send) , what is the function of these ? also when i go to file file.php?id=1 using the browser it only displays "0" whereas the the general function of the code is to redirect me to a website after i do a specific action and i believe the data is stored on file.php?id=1 but how can i see it from browser ?
Note: I'm not HTML/PHP programmer but i recognize the basics
The lines before xmlhttp.open() just create the XMLHttpRequest object that will handle the AJAX connection. Calling xmlhttp.open() is necessary to actually open the connection and xmlhttp.send() to send the request. Only after the request is sent, a response can be received and handled by the onreadystatechange handler.
This code looks rather obsolete, however. I would recommend not using XMLHttpRequest directly but rather use a library for it - see jQuery, for example.
I am trying to get data back from a PHP file assigned with GET parameters in an AJAX request:
xmlhttp.open("GET","getMyData.php?name="+name+"&email="+email,true);
Can I call the getMyData.php like that, or it has to be in the root of the project? Now is in the same directory as the javascript file.
Also, if possible, a small example of how to insert the returned data into an input field.
Thanks a bunch!
Here the example
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//xmlhttp.responseText; //content
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //write inside myDiv
}
}
xmlhttp.open("GET","getMyData.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+name+"&email="+encodeURIComponen(email));
xmlhttp.send();
}
Look here get more information and example
Have a look at relative and absolute paths. You will understand how the /, ../ etc. work. You will also see that your example is correct if the PHP file is in the same folder as your web page where the javascript is executed.
About the last part, I'm cutting off a little bit the code (that you can find fully here for example), but here is the point:
if (xhr.readyState === 4 && xhr.status === 200) {
// The datas returned by PHP are in the variable 'xhr.responseText' or 'xhr.responseXml'.
// In this case you can add straight the HTML into a DIV, but you usually have datas in JSON.
// To "transform" your JSON string into a javascript object, use the following:
// var obj = JSON.parse(xhr.responseText)
document.getElementById("myDiv").appendChild(xhr.responseXml) // Don't use 'innerHTML', it is evil.
}
I am going to bed soon, so I will not be on until the morning, but I have been struggling with trying to find a javascript/jquery method that solves my problem. I am trying to make a chat box feature where once a post is submitting it is then echoed back out and users on both ends can see it. I know that I need to use javascript and or jquery. Right now I am using a very inefficiency system:
<script language='javascript' type='text/javascript'>
setInterval( function() {
$('#responsechat').load('echogetconversation.php?username=<?php echo $username; ?>&otherchatuser=<?php echo $otherchatuser; ?>');
}, 100);
</script>
The only reason that I am using it is because it is the only way I know how to project new posts to both users. I was wondering if someone knew a way to do this. Once a post is submitted, it fades into a div and both users can see it, not only the user who submitted it, so it is like a facebook chat in a way. I have no idea about any possible solutions, and have done research, but I could not find any that i could get to work. Any help and/or insight to what I should do next would be appreciated.
What you are looking for is ajax long pulling, also called Comet (it's a silly pun). The basic idea is simple--instead of polling the server, you send your ajax request and the server blocks on it until it gets a new message.
"Blocking" here simply means it does not send a response. You get your request then first up a thread (is that what you would do in PHP? I've only ever used node.js for this) and wait until something changes before sending the response back to the client.
Once the client has a response, it sends another request immediately.
There is one other trick: requests can time out. This means that the server should send a response back after a certain time even if nothing has updated.
This methodology is good if you have to support older browsers; if you can ignore those and stick to newer ones, you can use "websockets".
There are libraries that help you use websockets or fall back on Comet. I think the most popular one is socket.io.
Coincidentally, if you're not tied to PHP, I really suggest using a different server. node.js is a great option--it is a natural fit for this sort of problem and you can write the server-side code in JavaScript, which you already know. Even Facebook--the bastion of PHP--used a different language (Erlang) for their chat backend.
So, in summary: use socket.io. If you can, try using a different backend, although PHP is fine too.
If you don't want to use another language you can simply do it by AJAX..
Just set an interval and update the PHP-generated div's html.. and when you send a message then the reply would be the updated div -html so that both you and the user can assure that their message is posted successfully.. There's a snippet of my own chat system code : look:
function updMsg() {
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()
{
var objDiv = document.getElementById('chatwid');
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("chatwid").innerHTML=xmlhttp.responseText;}
}
xmlhttp.open("GET","Msg.php?pg=1",true);
xmlhttp.send();
}
function sendMsg()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
msg=document.getElementById('msgfrm').value;
sender='<?php echo $name;?>';
xmlhttp.open("GET","Msg.php?msg="+msg+"&sender="+sender+"<?php if(isset($_GET['a']) && $_GET['a'] = 1) { echo "&a=1"; } ?>" ,true);
xmlhttp.send();
document.getElementById('msgfrm').value="";
xmlhttp.onreadystatechange=function()
{
var objDiv = document.getElementById('chatwid');
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("chatwid").innerHTML=xmlhttp.responseText;}
}
}
function interval() {
updMsg();
t=setTimeout(interval(),500);}
interval();
This code is actually only PHP and Javascript. It's not sufficient to include the whole jQuery Library just for using the AJAX capability. right?
I have an embedded XMLHttpRequest problem;
The flow of data should go like this:
Interface.php uses modifyRecords.js (XMLHttpRequest) to call information from modifyRecords.php, which in turn uses showRecords.js (XMLHttpRequest) to call information from showRecords.php.
If I could somehow accomplish this, it would save a ton of code copying and/or rewriting.
When I backtrack to find where the errors are, there doesn't appear to be any problem showRecords.php and modifyRecords.php both load fine individually, just when AJAX calls another AJAX it totally breaks.
The nitty gritty is this:
My user interface is calling modifyRecords.js which is as follows;
function modifyRecords(cell,report,column,oldValue)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(cell).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","modifyRecords.php?report="+report+"&column="+column+"&oldValue="+oldValue,true);
xmlhttp.send();
}
modifyRecords.php is calling another AJAX function called showRecords.js;
function showRecords(str,column,nextDiv,oldValue)
{
if (str== null)
{
document.getElementById(nextDiv).innerHTML="----------------------------------------";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(nextDiv).innerHTML=xmlhttp.responseText;
document.getElementById(nextDiv).value = oldValue ;
}
}
xmlhttp.open("GET","showRecords.php?"+column+"="+str,true);
xmlhttp.send();
}
The problem is that each one of these works in isolation, however, when I use one AJAX function to call a page that is dependent on the second AJAX function, the records do not load.
I know this has something to do with synchronicity, because my only guess is that the referenced page has not finished loading when the referencing function is calling it.
I have tried setting the parameters to "false" for synchronous, instead of the usual asynchronous, however that breaks either function.
What would be the best solution?
I have considered combining all my AJAX functions, which would require a ton of rewrite to make them more generic, and functional for both environments.
Unless I'm much mistaken, you are trying to call your second AJAX script by setting the innerHTML of an element with the first?
Scripts aren't executed when added with innerHTML. Don't know why, it's been an annoyance to me, but you'd probably be better off separating HTML and JS, then putting the HTML in the innerHTML, and eval'ing the JS.