0

I am firing an ajax call to get json response which I am populating in the dropdown.

Code is:

var ajaxURL = "abc.ajax";
var fireAjax = new Request.JSON({
    url: ajaxURL,
    method:'GET',
    onSuccess:function(resultjson){

                if(resultjson.length!=0){
                    var elSelect = new Element('option',{'html':'First component','value':'All'}).injectInside($('vehicletype'));
                    resultjson.each(function(vName){

                    var elOptions = new Element('option',{'value':vName,'selected':'selected' }).setHTML(vName).injectInside($('vehicletype'));


                    });

                    sschecker[0].registerAnotherElement($('vehicletype'));


                }

            }


}).send();

This is working fine in IE8, firefox, etc.

Nag
  • 1,438
  • 1
  • 11
  • 39
alen alexander
  • 1
  • 1
    it seems, does not support ie6 and ie7 [1]:http://mootools.net/docs/core/Browser/Browser – Balaswamy Vaddeman Jan 31 '12 at 12:14
  • What Mootools version are you using? What `registerAnotherElement`, `setHTML` and `injectInside` methods are? – lorenzo-s Jan 31 '12 at 12:44
  • these are 1.12 though he's using the 1.2+ request api so I would say `registerAnotherElement` is a custom prototype. there are inherent cross-browser issues with injecting child nodes in a select – Dimitar Christoff Jan 31 '12 at 12:46
  • @DimitarChristoff I never used 1.12. Are these ` – lorenzo-s Jan 31 '12 at 13:14
  • i don't think they are solved, as such - to my knowledge. iirc the recommendation was to use `new Option()` and `select.options.add` but thats like 3 yrs ago... – Dimitar Christoff Jan 31 '12 at 14:38

1 Answers1

0

There is no reason why it shouldn't work on IE7 (even IE6).

I've tested it (and changed a few things) of your code:

var ajaxURL = "/echo/json/";
var fireAjax = new Request.JSON({
    url: ajaxURL,
    method:'POST',
    data: {
        json: JSON.encode({
            opt1: 'option 1',
            opt2: 'option 2'
        })
    },
    onSuccess:function(resultjson){
                if(resultjson.length!=0){
                    var elSelect = new Element('option',{'html':'First component', 'value':'All' }).injectInside($('vehicletype'));
                   Object.each(resultjson,function(value,key){
                       new Element('option',{'value':key,'html':value}).inject($('vehicletype'));
                       //sschecker[0].registerAnotherElement($('vehicletype'));
                   });

                }
            }
}).send();

I've changed the method to POST and added the data.. just to be able to test it in jsfiddle http://jsfiddle.net/F7G9Y/2/.. its working on IE7 (don't have IE6 sry)

in my opinion (and my experience), it's usually due to a malformed JSON, most of the time because of an extra coma. So json strings like this :

{ 
  'foo':'Foo',
  'bar':'Bar', //<-extra coma here
}

will be ok in Firefox, Chrome but not on IE

Hope this helps

pleasedontbelong
  • 19,542
  • 12
  • 53
  • 77
  • hi, Thanks a lot for your effort. But this dint work for me. You can observe the same if you are using mootools 1.1.2 in JsFilddle. the dropdown just vanishes. (Try NOT to keep any tags in HTML) – alen alexander Feb 02 '12 at 05:30