I building a site for a client that will allow her customers to "build a sketch" of the dress they want to order. You can view the page here.

Basically, I am filling the combo boxes with data from a DB using ajax... it seems to work just fine in FireFox, but in IE7, it fails but with no errors. Ive spent the last two hours researching this problem and have tried a few solutions (such as moving the callback function between the open/send calls and testing for an activeX before the XMLHTTPRequest) that I found and am still in the same spot I was earlier. It appears this is common problem since IE7 now say it using the native XMLHTTPRequest... but I cant find a solution.

Here is the Ajax function:

function doAjax(url,params,id)
{
    var xmlHttp = null;

    if (window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    }
    else if (window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    } 
    else 
    {
        alert("Please update your browser!");
        return false;
    }
    
    xmlHttp.open('post',url,true);
        

    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");


    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
          {
              document.getElementById(id).innerHTML=xmlHttp.responseText;
          }
        else
        {
              document.getElementById(id).innerHTML='<option>Loading...</option>';
        }
    }
      
    xmlHttp.send(params);
    
    return true;
}

I am not returning XML, but rather a list of options:

PHP Code:

        $item = $this->input->post('item');
        $fabricOptions = '<option value="none">Select Fabric</option>';
        
        if ($item == 'none')
        {
            echo '<option value="none">Choose a Base<option>';
            return;
        }
        
        $item    = $this->my_sketch->getData('styles',array('item'=>$item),'item');
        
        $fabrics = !empty($item->fabric_ids)?explode(',',$item->fabric_ids):array();

        for ($i=0;$i<count($fabrics);$i++)
        {
            $fabric = $this->my_sketch->getData('fabrics',array('item'=>$fabrics[$i]),'item');
                
            $fabricOptions .= '
            <option value="'.str_replace (" ", "", $fabric->item).'">'.$fabric->name.'</option>
            ';
        }
        
        if (!empty($fabricOptions))
        {
            echo $fabricOptions;
        }
        else
        {
            echo 'No Items';
        } 


Any suggestions would be helpful... thanks ahead of time


Sam

Sorry to say that but with the coding below its hard not to get into trouble.

First of all AJAX is called like that X stays for XML, thats why it response must be a valid XML. Of course it might work without it in some browsers but I suggest u to do your code properly. Its simple just create XML as a response

<?xml version="1.0" encoding="UTF-8"?><myroot><content><![CDATA[
your HTML is here
]]></content></myroot>

Second issue never do what u did
document.getElementById(id).innerHTML='<option>Loa ding...</option>
as I understand your response is a complete <select><option ... right?

In this case if u innerHTML whole Select object it should be fine. If u need to paste just OPTION do it dynamically, create that option with Javascript.

ANy questions, let me know.

First of all AJAX is called like that X stays for XML, thats why it response must be a valid XML.

Nonsense. AJAX responses may be anything, from XML, to regular HTML, to JSON

Thanks for the replies... I will try to return the request as xml and see if that fixes the problem.

Originally Posted by svirid

Second issue never do what u did
document.getElementById(id).innerHTML='<option>Loa ding...</option>
as I understand your response is a complete <select><option ... right?

In this case if u innerHTML whole Select object it should be fine. If u need to paste just OPTION do it dynamically, create that option with Javascript.

What is the best option for creating the options dynamically using javascript? Each option is taken from the database and there can be any number of options.... I will do a little looking into this, but if you have a solution, let me know

Thanks

Sam

Ok, I tried changing things around a little bit, but it seems I am missing something since the XML isn't getting returned or something (the xml variable gives an errors saying it has no properties)

Here is the doAjax() function (It will now return the xml so I can call this function from another function that creates the options):

function doAjax(url,params)
{
    // Create the ajax object    
    var xmlHttp = null;
    var xml;

    if (window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest(); 
    } 
    else 
    {
        alert("Please update your browser!");
        return false;
    }
    
    xmlHttp.open('post',url,true);
        
    //Send the proper header information along with the request
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");

    // See if the process is complete
    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
          {
            xml = xmlHttp.responseXML;                
          }    

    }
    xmlHttp.send(params);
    return xml;    
}

Now, here is the function that returns the xml:

PHP Code:

function getColorOptions()
    {
    
        header('Content-Type: text/xml');
        
        $this->output->enable_profiler(FALSE);
        
        # Item number to get color options for
        $item = $this->input->post('item');
        

        echo chr(60).chr(63).'xml version="1.0" encoding="utf-8" '.chr(63).chr(62);
        echo '<select>'; // root
        echo'<option value="none"><name>Select Color</name></option>';

        # If there is no item...
        if ($item == 'none')
        {
            # Return an empty option
            echo '<option value="none"><name>Choose a Base</name></option>';
        }
        
        # Get item data
        $item    = $this->my_sketch->getData('styles',array('item'=>$item),'item');
        
        # Get individual colors data
        $colors = !empty($item->color_ids)?explode(',',$item->color_ids):array();
        for ($i=0;$i<count($colors);$i++)
        {
            $color = $this->my_sketch->getData('colors',array('item'=>$colors[$i]),'item');
                
            
            echo '<option style="background-color: '.$color->hex.';color: '.$color->hex.';" value="'.str_replace (" ", "", $color->name).'">';
            echo '<name>'.$color->name.'</name>';
            echo '</option>';
        }
        echo '</select>';
        
        return;
    } 


Sorry about the sloppy code. I know I am missing something, but after taking a few days off, Im not quite back in the game... that and a combined lack of sleep to help throw me off! lol

Thanks for your help

Sam

Looking at your code that generates XML its really hard to say if XML is ok.
Why dont u use
http://www.w3schools.com/php/php_xml_dom.asp

its way easier. Try it. Second of all, I do not see any root node in your XML, and if you insert html in your node make node type CDATA.

ALso I am not sure if u are using firebug, try it install this extension for Firefox it gives u an ability to see all the requests and responses.

When u output XML on your page, make sure u strip all the white spaces before it and after, also if u paste your request with all the parameters into the url it will show u XML, check it in IE, it should give u no XML parsing error, this way u know XML is valid.

One more thing, if u are new in AJAX, I would suggest u to use 'prototype' free AJAX library to start, later when u become more pro u can start writing your own.

This is not a nonsense. AJAX will work if you are passing HTML, JSON or simple text. What I mean is when u are a novice developer in this area, u have to obey the standards, and XML gives u this possibility, it will throw parsing error if u did something wrong and u can easily fix it. With HTML in IE u can just forget about it, u will get regular error message if u are passing an unwanted characters. For sure he can use JSON but its just an alternative method to transfer data, I prefer standards.

One more thing to test, before u do anything, try to just create myoption.xml file with the select box content and make it work first, later u can figure out how to generate XML

Thanks for the quick response!

Originally Posted by svirid

Looking at your code that generates XML its really hard to say if XML is ok.
Why dont u use
http://www.w3schools.com/php/php_xml_dom.asp its way easier. Try it.

I will give that a try.. I rather work that way anyhow... I don't like the look of all the echos.... it doesnt go with my coding style! lol

Originally Posted by svirid

Second of all, I do not see any root node in your XML, and if you insert html in your node make node type CDATA.

Does the root node need to be named root? I was using <select> as my root node... do I need to wrap <root> around it?

Originally Posted by svirid

ALso I am not sure if u are using firebug, try it install this extension for Firefox it gives u an ability to see all the requests and responses.

I am using LiveHTTP Headers... but it only shows requests... I will try firebug... I hear is it pretty good.

Originally Posted by svirid

also if u paste your request with all the parameters into the url it will show u XML, check it in IE, it should give u no XML parsing error, this way u know XML is valid.

Will this work if I am using the post method?

Originally Posted by svirid

One more thing, if u are new in AJAX, I would suggest u to use 'prototype' free AJAX library to start, later when u become more pro u can start writing your own.

I am somewhat new at AJAX... I figured it would be better to learn from scratch rather than from a framework/library... but if I can't find a solution, I will give prototype a try. Are there any good classes that implement prototype using php? (I've seen one somewhere, but I cant remember where).

Thanks

Sam

1. sorry I did not realize <select was your root node, not it does not have to be 'root', u can use any name. I would not use select, try something more root_select, the reason is that u might get into the reserved word and u can spend hours looking for an error. SO make it as a rule, creating variables names.

2. No your request will not work using post, but u can use get for now to valid xml.

its very easy to do with Firebug, open console there and u will see all the requests, click right button on it and COPY WITH PARAMETERS, paste it into the broweser url.

3. I started like u creating it on my own, but to tell u the truth creating this library its not a big deal, most important thing in ajax is to understand how its really working and the power of it. Also I would say most important is to professionally work with DOM.
Prototype: http://www.prototypejs.org/

4. this one is one of my last websites I designed and built, its 100% ajax, www.turnit.ca use firebug to see how the requests come and go. I built my own libaries but it was after I worked with the AJAX for many years.

Ok, I installed firebug and here is the response I am getting:

<?xml version="1.0" encoding="utf-8" ?><root_select><option style="background-color: #000000;color: #000000;" value="Black"><name>Black </name></option><option style="background-color: #330099;color: #330099;" value="Blue"><name>Blue</name></option><option style="background-color: #FF00FF;color: #FF00FF;" value="HotPink"><name>Hot Pink</name></option><option style="background-color: #33CC00;color: #33CC00;" value="NeonGreen"><name>Neon Green</name></option><option style="background-color: #FF9900;color: #FF9900;" value="Orange"><name>Orange</name></option><option style="background-color: #990066;color: #990066;" value="Purple"><name>Purple</name></option><option style="background-color: #CC0000;color: #CC0000;" value="Red"><name>Red</name></option><option style="background-color: #9999FF;color: #9999FF;" value="SkyBlue"><name>Sky Blue</name></option><option style="background-color: #00CCFF;color: #00CCFF;" value="Turquoise"><name>Turquoise</name></option><option style="background-color: #FFFFFF;color: #FFFFFF;" value="White"><name>White</name></option><option style="background-color: #FFFF00;color: #FFFF00;" value="Yellow"><name>Yellow</name></option></root_select>

So, it looks like it is sending back valid xml... the problem is somewhere in my doAjax() function... its not storing it in my xml variable...

Yes I see the problem in your code, what happens is when u do AJAX request is u are sending request to the server via XMLHttp objext in your browser. It does not return to u anything, u have to pass name of the function u want to run oncomplete and pass your xml there. Remember when u do Alert in javascript everything stops till u click OK, in AJAX u do request, life goes on, it might take 5 minutes for request to come back. It does not go to the same place it fired, u have to tell it where to go.
Just to test, create a new function call it onComplete

onComplete = function(xml, text) {
alert(text)
}

and fire it here

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
onComplete.apply(this, [xmlHttp.responseXML,
xmlHttp.responseText])
}

}

remove return xml; completely, remember what I told u, system does not stop, so u are getting to return xml, before response comes back.

Ok.. that worked... it does show the xml in the alert. Do I return the xml from there? or should I call another function from there to edit the options? Thanks for the help so far...I really appreciate it

u can see that onComplete function has 2 parameters, xml and text. XML is an object and u have to actually work with it. text I personally use just for debugging purposes but basically if u pass pure HTML as u were doing at the beginning u can use it for innerHTML or other things as it was said by wayfarer07 but I do not practice that. For me its only XML.

How to work with XML object its another issue, search for the 'javascript get xml node value'. Good luck

Thanks for taking the time to help me out... Sam