Ajax & FireFox [Archive] - Web Hosting Talk

latheesan

08-19-2006, 09:34 PM

please delete, problem solved!

channelmaster

08-21-2006, 01:30 AM

it would be much better if you would post ur answer and ur question again - this webhostingtalk forum lives because there's a huge amount of questions and answers which can be searched through google and through the search in this forum.

latheesan

08-21-2006, 05:49 AM

Oh im sorry, i'll edit the first post with my problem.

latheesan

08-21-2006, 06:32 AM

Okay, i couldnt edit the first post or my previous one due to the 15 minute restriction. I might as well post it as a new post.

My problem was (and is now) is that my ajax isnt properly working in firefox. These are my scripts:

ajax.js
var xmlHttp

function showServer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request. Get FireFox or IE7.")
return
}
var url="getserver.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

getserver.php
<?php
$server = $_REQUEST["q"];
if($server == "1")
{
?>
<form action="index.php?server=1" method="post">
// server 1
</form>
<?php
}
else
if($server == "2")
{
?>
<form action="index.php?server=1" method="post">
// server 2
</form>
<?php
}
?>

index.php
<html>
<head>
<script src="ajax.js"></script>
</head>
<body>
<form action="index.php" method="post">
<select onChange="showServer(this.value)">
<option>Select Server</option>
<option value="1">Server 1</option>
<option value="2">Server 2</option>
</select>
</form>
<p>
<div id="txtHint"></div>
</p>
</body>
</html>

Now when i load the index.php, it should show me a drop down list and when i select either of the server, it should show the form for the selected server. Now the problem is that, when i select either of the server, nothing happens on firefox browser. On the other hand, if i do this in internet explorer 6 or 7 beta 3, i can see it working fine.

How can i make my coding work cross-browser? Please advice. Where im i going wrong?

nsvr

08-21-2006, 07:02 AM

This should work for IE and browsers that work like Firefox:

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

In the first part it tests for IE with the try catch method which version of the active x it can use (Msxml2.XMLHTTP or Microsoft.XMLHTTP).

If it failes it will try for other browsers like Firefox (new XMLHttpRequest())

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

latheesan

08-21-2006, 08:49 AM

Thanks for the reply, but where should i put that? When i put that on the end of the javascript file, ajax.js nothing works. even on the internet explorer -_-

nnormal

08-21-2006, 11:10 AM

try this..

filename is ajax.php

<? if ( (isset($_GET['p'])) && ($_GET['p'] == 'info') ) {phpinfo(); die();} ?>
<html>
<head>
<script>
var xmlreq; // i hold the request object
var dataframe; // i hold the id of the dataframe

function callback() {
var e;
if (xmlreq.readyState == 4) {
e=document.getElementById(dataframe);
if (!e) return false;
// update the HTML DOM based on whether or not message is valid
if (xmlreq.status == 200) e.innerHTML=xmlreq.responseText;
else e.innerHTML='Error - '+xmlreq.statusText;
}
}

function request(url,toframe) {

dataframe=toframe;
if (window.XMLHttpRequest) xmlreq = new XMLHttpRequest();
else if (window.ActiveXObject) xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
else return false;
xmlreq.onreadystatechange = callback;
xmlreq.open("GET", url, true);
xmlreq.setRequestHeader("Content-Type", "text/html");
xmlreq.send("");
}

</script>
</head>

<body>
<div id="dataframe">

</div>

<script>
request('ajax.php?p=info','dataframe');
</script>
</body>
</html>

latheesan

08-21-2006, 03:12 PM

Thanks allot for that real nice suggestion. Sadly, thats not the type of ajax i am looking for. However, i might use that later on.

Well, im not sure how to explain it, since i've only started ot learn to use ajax recenty.

What i want is to show a drop down list of two servers. When u select "Server 1" for e.g. i want a dynamic form to login to server 1 appear, WITHOUT reloading the entire website, hense the use of ajax. How can i modify my current script i posted earlier to work on cross-browser?

nsvr

08-22-2006, 09:59 AM

Your example works for me in Firefox and IE. You have them both defined in your ajax.js. The one for Internet explorer, but only 1 version of the active x:

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

And the one for Firefox, Safari, Opera and IE7:

objXMLHttp=new XMLHttpRequest()

So it might be your firefox not working correct :crap:. Try the Javascript console from firefox to show errors.

Or the last thing i can think of is that your ajax.js is scripted poor. I don't see once that you close the end of the line with ;

latheesan

08-22-2006, 10:05 AM

Thanks for that suggestion. I used the JavaScript Console and this is what i found:

Error: showServer is not defined
Source File: http://localhost/test.php
Line: 1

How can i "define" showServer ? is it var showServer; ?

nsvr

08-22-2006, 10:19 AM

You can try that, but i dont have any errors in my console.

latheesan

08-22-2006, 10:21 AM

Well, i tried that and still no luck :(

nsvr

08-22-2006, 10:29 AM

try this for ajax.js:

var xmlHttp;

function showServer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request. Get FireFox or IE7.");
return;
}

var url="getserver.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

return xmlHttp;
}

nnormal

08-22-2006, 01:56 PM

What i want is to show a drop down list of two servers. When u select "Server 1" for e.g. i want a dynamic form to login to server 1 appear, WITHOUT reloading the entire website...

you dont need ajax for that. simple DHMTL will work...

<script>
function show(n) {
if (n==1) document.getElementById('form'+2).style.display='none';
else document.getElementById('form'+1).style.display='none';
document.getElementById('form'+n).style.display='block';
}
</script>
<select>
<option onclick="show(1)">server1</option>
<option onclick="show(2)">server2</option>
</select>

<p>

<div id="form1">
<form action="asdf">form1</form>
</div>

<div id="form2" style="display:none;">
<form action="asdf">form2</form>
</div>

latheesan

09-11-2006, 05:36 PM

nnormal, thanks allot for that prompt reply (even tho my reply of thanks is late).

I've just started to use this example you provided - http://webhostingtalk.com/showpost.php?p=4061160&postcount=7

Just one question. Using the example coding you provided, how can i handle <forms></form> within a page that is inside the dataframe?

nnormal

09-12-2006, 09:47 AM

an html form can be used with show/hide dhtml or retrieved through an ajax request the same way as any other html... unless i am not understanding your question.

tobiasly

09-13-2006, 11:18 AM

Just a couple high-level suggestions.. first of all, get the Firebug extension for Firefox. It has a JavaScript debugger, AJAX inspector, DOM inspector, JavaScript real-time console (makes debugging using alert() commands a thing of the past!) and tons more stuff.
http://www.joehewitt.com/software/firebug/

The other suggestion is to not bother figuring this stuff out yourself and use a pre-existing JavaScript AJAX framework instead. Not only have they already figured out all the cross-browser quirks, but they use dynamic capability detection instead of parsing version numbers, which makes your scripts more future-proof. For example IE7 has a "native" JavaScript XmlHttpRequest object, instead of requiring an ActiveX object, so you definitely want to use the native one instead. Scripts that rely on detecting browser versions would probably use the ActiveX one.

Dojo Toolkit is a good one but has lots of stuff you might not need. Sarissa is a pretty good lightweight toolkit that aims to simply "smooth out" the inconsistencies between browsers, so doing things like creating an XmlHttpRequest object is much easier.

latheesan

09-17-2006, 11:43 AM

no...

Im trying to do this.

index.php
<html>
<head>
<script>
var xmlreq;
var dataframe;
function callback()
{
var e;
document.getElementById('loading').style.visibility="visible";
if (xmlreq.readyState == 4)
{
e=document.getElementById(dataframe);
if (!e) return false;
if (xmlreq.status == 200)
{
document.getElementById('loading').style.visibility="hidden";
e.innerHTML=xmlreq.responseText;
} else {
e.innerHTML='Error - '+xmlreq.statusText;
}
}
}
function request(url,toframe)
{
dataframe=toframe;
if (window.XMLHttpRequest) xmlreq = new XMLHttpRequest();
else if (window.ActiveXObject) xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
else return false;
xmlreq.onreadystatechange = callback;
xmlreq.open("GET", url, true);
xmlreq.setRequestHeader("Content-Type", "text/html");
xmlreq.send("");
}
</script>
</head>
<body>

<a href="javascript:void(0);" onclick="request('page1.php','dataframe');">Page 1</a>
<br>
<br>
<div id="loading" style="visibility:hidden;"><img src="loading.gif"></img></div>
<div id="dataframe"></div>

</body>
</html>

page1.php
<?php

$word = $_POST['word'];
echo 'The new word is: <b>' . $word . '</b><br><br>';

?>
<form onsubmit="request('page1.php','dataframe');" method="post">
<input name="word" type="text" id="word" />
<input type="submit" />
</form>

So, when im on the index.php and click page 1 link, the contents of page1.php should be displayed. This worked fine.

But, when i tried to enter a word and click submit, it didnt get processed, thus form processing is not working. Where im i going wrong....?

tobiasly

09-17-2006, 11:31 PM

Probably because the form submission proceeds as usual (with the POST method) after the request() function is called without waiting for your callback. The onsubmit method should return false in order to tell the browser not to go ahead with form submission:

<form onsubmit="request('page1.php','dataframe'); return false;" method="post">
However it's probably better to just not use a submit button since you don't actually want the form to submit; instead just use a button element with an onclick event:

<input type="button" onclick="request('page1.php','dataframe');" />

latheesan

09-17-2006, 11:36 PM

ehh, thanks allot for your reply, however i found a long-winded solution. But it works, so im not too bothered about it.