php and ajax

[psuplat]

Hi all,

I've started playing around with ajax. Using few web tutorials I've managed to create few nice real-time info update. However the code will only work on IE browsers. When tried on FF or Chrome nothing happens.

I'm attaching one of the non-working examples. 1st is the HTML login form:

<div><br/><b>You are required to log in to access this section</b><br/><br/>
<form name="loginForm">
<b>Login</b><br/>
<input type="text" name="login" value=""/><br/>
<b>Password</b><br/>
<input type="password" name="pass" value="" /><br/><br/>
<div class="buttons">
    <button type="submit" name="submit" onclick="login();">
        Login <img src="assets/images/login_in.png"/>
    </button>
</div>
</form>
</div><br/>
<div id="process_login" style="clear:both;"></div>
<div id="actions" style="color:blue;"></div>

2nd is the javascript function called with onclick event of submit button

function login(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    var u = document.getElementById("login").value;
    var p = document.getElementById("pass").value;
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser doesn't support AJAX requests!");
                return false;
            }
        }
    }

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        document.getElementById("process_login").innerHTML = ajaxRequest.responseText;
        loginActions(u,p);
    } else {
        document.getElementById("process_login").innerHTML='<img src="assets/images/loader.gif" alt="Loading"/> Authenticating...';
    }
}
ajaxRequest.open("GET", "includes/functions.php?login="+u+"&pass="+p, true);
ajaxRequest.send(null); 
}

and finally php function, located in the functions.php file mentioned just above, that authenticates user agains ad domain (ldap)

function ldapLogin($u, $p, $d) {

// where's the server?
$ad = ldap_connect("myadserver01");

//Set some variables
ldap_set_option($ad, LDAP_OPT_PROTOCOL_VERSION, 3);
ldap_set_option($ad, LDAP_OPT_REFERRALS, 0);

//Bind to the ldap directory  with my user name and pass
$bd = @ldap_bind($ad, $u . '@my.groupdomain.net', $p);
if ($bd) {
    $attributes = array(
        "displayname",
        "description",
        "mail",
        "department");
    $filter = "(&(objectCategory=person)(sAMAccountName=$u))";

    $result = ldap_search($ad, "ou=Users,ou=" . $d . ", dc=my,dc=groupdomain,dc=net", $filter, $attributes);

    $entries = ldap_get_entries($ad, $result);

    if ($entries["count"] > 0) {
        session_start();
        $_SESSION['clock'] = $entries[0]['description'][0];
        $_SESSION['name'] = $entries[0]['displayname'][0];
        $_SESSION['email'] = $entries[0]['mail'][0];
        $_SESSION['department'] = $entries[0]['department'][0];

        require_once('WH/SystemComponent.php');
        require_once ('WH/dbConnector.php');
        // Create an instances of classes
        $connector = new DbConnector();
        $system = new SystemComponent();
        $settings = SystemComponent::getSettings();
        $clock_no=$entries[0]['description'][0];

        $result = $connector->query("SELECT * FROM users WHERE login='$u'");
        $row = $connector->fetchArray($result);
        $exist = $connector->getNumRows($result);

        if ($exist != 0){
            $_SESSION['group']= $row['groupID'];
            $_SESSION['login']= $row['login'];
        }
        echo '<br/><span id="notice_ok" style="color:green;"><img src="assets/images/apply2.png"/> Authorization succesfull</span>';
    }
    ldap_unbind($ad);
} else {
        echo '<br/><span id="notice_failed" style="color:red;"><img src="assets/images/cross.png"/> Authorization failed!</span>';
    }
}

as mentioned before all of this works like a charm in IE, no errors or exceptions, nothing. FF an Chrome - no action 🙁

Any help welcomed

[johanafm]

Have you checked where things go wrong in for example Firefox? Does it send a request? Does it get a response? What does the response contain? What's the conten type of the response? Are there any errors or warnings?

[bradgrafelman]

Also, any reason why you don't want to simplify things immensely and just use a library like jQuery?

[Bonesnap]

bradgrafelman;10996731 wrote:

Also, any reason why you don't want to simplify things immensely and just use a library like jQuery?

I love jQuery to death, but I think it's perhaps better to learn how to do things "manually" first and understand what's happening, and then move onto having things done automatically. When I started playing with AJAX I used the "manual" way first, though I don't recall writing as much code.

But yes, jQuery would complete this very quickly and easily.

[Derokorian]

The thing about jQuery is, its already built to work in most common browsers, and to me the hardest part about JS is getting it to work in most / all browsers so using a framework like jquery which handles that for me was the only way I ever really got into JS it just frustrated me before because it would work in FF but not IE or chrome, or it would work in IE but not ff or chrome... now I type a couple lines of jquery and it works in most browsers right off the bat! Of course thats my experience maybe I just fail at JS 😛

[bradgrafelman]

Derokorian;10996737 wrote:

Of course thats my experience maybe I just fail at JS 😛

Not in my opinion, no, because I took the same route you described.

Why start with some stone and a chisel to re-create the wheel when you can just go out and buy a tire? Sure, learning how to do it "the hard way" might at least educate you in how libraries like jQuery do it, but do you really care? (In most cases, the answer is no, not really. :p)

[Bonesnap]

bradgrafelman;10996738 wrote:

Why start with some stone and a chisel to re-create the wheel when you can just go out and buy a tire? Sure, learning how to do it "the hard way" might at least educate you in how libraries like jQuery do it, but do you really care? (In most cases, the answer is no, not really. :p)

I agree, but I think a little fundamental understanding can go a long way.

[psuplat]

I found the cause of the problem.

First of all the <form> markers should not be there is the first place.

Now, the actual problem lies in how IE understands GetElementById property.

The html code is:
<input type="text" name="login" value=""/>
<input type="password" name="pass" value="" />

The IE the will get the id property by using the name attribute of the <input />, hence:
var u = document.getElementByIdCOLOR="DarkGreen".[/COLOR]value;
var p = document.getElementByIdCOLOR="DarkGreen".[/COLOR]value;

to make this work in FF or Chrome you have to define the actual ID, so:
<input type="text" name="login" id="login" value=""/>
<input type="password" name="pass" id="pass" value="" />

will work in any browser.

[johanafm]

psuplat;10997157 wrote:

Now, the actual problem lies in how IE understands GetElementById property.

In this case, I'd rather say the problem is that you assume that getElementById should get elements by anything other than id. It's not until you start assuming that something should do what it actually is supposed to do that non-standard conformance becomes a problem.

psuplat;10997157 wrote:

The IE the will get the id property by using the name attribute of the <input />,

No, it really will not. It will assume that you want to get an element with the name attribute matching the string you specified when claiming that you wanted to get an element with a matching id attribute. But it will not get the matching element's id attribute, since that element didn't have one to begin with.

Moreover, you should put header('x-ua-compatible: ie="edge"'); in your documents to tell IE 8 and 9 to actually behave as IE 8 or 9, rather than IE6 or 7. And IE8 will not get an element by its name if getElementById('id') fails to find an element with a matching id unless the user tells it to use "compatibility mode" (which actually should be called "as far off from standards mode as Microsoftly possible).

Anyway a good way to not having to deal with these problems is starting to use jQuery. I learnt javascript before I started looking at jQuery, and it's entirely possible to both learn this way and be successful in achieving what you want. But in the beginning you will also spend a lot of time on figuring things out. First, you need to spend time on a problem before you realize it's not your code which is "wrong" (according to standard - if your code doesn't do what you want it to, it actually is wrong), but that one or more browsers is out of line and need to be accomodated. After that you need to figure out how to do this (web search is usually faster than trial and error). Then after a while, you will from time to time assume that a browser is out of line until you realize that it's your code that was wrong in the first place, thus making you lose time due to an erroneous assumption.

But if you do decide to learn javascript, at least do yourself the favor of using a browser with reasonably high standards compliance. That pretty much means any browser but IE. I havn't really had a look at IE9 (and I do not plan to, since I will use jQuery to deal with that instead), but from what I have seen, it is a lot better than earlier versions. Still, it will give you no advantage at all when it comes to the earlier versions anyway. Either IE9 has the same crap behaviour as they did, some other crap behaviour than the others, or it is following the standard which you can't assume that earlier versions would. My personal recommendation would be to use Firefox and installing the Firebug plugin. Other browsers have similar tools, but I still find Firebug easier to use. Also, Mozilla's documentation is not only the best js documentation I've found but it also often points out when other browsers need to be handled in different ways or tells you if something in FF is not following the standard or is an addition to it. Just never assume that their docs will always provide this information. You will need to test in every single browser you care to support.

But I'd still rather recommend doing it the easy way: use jQuery and avoid a whole lot of problems. Once you are comfortable with jQuery, you could of course still get around to learning core javascript, should you feel the need. But I really doubt you will. Should you ever encounter something you wish to do and it isn't possible using jQuery, it is very easy to return to core javascript. You can always turn a specific jQuery object into its corresponding DOM node using jqobject.get(0).

In this case, you'd get the same behaviour from all browsers using

var el = $('#id');

In all browsers, this would only find an element having id="id", never name="id". This would still hold if you set IE8 to compatibility mode, since

function find(f)
{
	var el = $('#name');
	var el = el.get(0);
	alert(el);
}

would show an alert with text "undefined".

And if you really want to use core javascript while talking about "making things work", you should NOT be talking about FF or Chrome at all to begin with since they allready work like they are supposed to work. What you should say is
"To make it work as it should in certain versions of IE or setting other IE versions to use compatibility mode, I need to"

var name = 'going_after_name_rather_than_id';
var el =getElementById(name);
if (el && el.id != name)
	el = undefined

since this would give you consistent and standard compliant behaviour across browsers.