Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Loading JSONView select options in Internet Explorer

  1. #1
    Sencha User
    Join Date
    Aug 2007
    Posts
    84
    Vote Rating
    0
      0  

    Default Loading JSONView select options in Internet Explorer

    This problem is specific to Internet Explorer as the following code works in Firefox, Opera, Safari, and Flock on Windows and Firefox and Safari on MacOS.

    The basic premise of this implementation is to have a SELECT box populated via a JSON data structure upon the selection of an element in another select box (although any event trigger would work just as well [or as poorly in Internet Explorer I might add]). In this example I am trying to select a state from a list in a select box, and then the list of cities will automatically populate in the cities select box. I would also like to disable specific options that are not currently available in the DOM object that is to be inserted (which can be seen in this example) and this does work in all browsers with the exception of Internet Explorer. This is not critical to the implementation, and should not be considered part of the problem (it can be removed if that makes solving this any easier).

    The URL called in the load function for the view is a PERL script that generates JSON data such as the example shown below.

    Ext version + build no.?

    Ext 1.1
    (not sure what build number, but I just downloaded the most recent stable release again)

    ext-base.js / ((yui / prototype / jquery) + build no. + corresponding adapter)?

    (yui 2.2.2 + adapter)
    Yahoo! UI (.12+)
    -------------------------------------------------------------------
    yui-utilities.js
    ext-yui-adapter.js
    ext-all.js (or your choice of files)

    Operating System(s)

    Windows XP and Vista

    browser + build no.
    Internet Explorer 6.0.2900.2180 And Internet Explorer 7.0.6000.16512

    code snippet

    Code:
    <script type="text/javascript" src="/scripts/ext/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="/scripts/ext/adapter/yui/ext-yui-adapter.js"></script>
     <script type="text/javascript" src="/scripts/ext/ext-all-debug.js"></script>
    <script>
    var tpl = new Ext.Template('<option {disabled} value="{value}">{value}</option>');
    function dd(target)
    {
        var view = new Ext.JsonView(target, tpl, { multiSelect: true });
        view.load({
      url: 'listing.pl?cmd=json&view='+target+"&state="+document.getElementById('state').options[document.getElementById('state').selectedIndex].value
        });
    }
    </script>
    ...
    <select name="state" id="state" onchange="dd('city');">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
    ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    ...
    <select name="city" id="city"></select>
    The JSON data returned from the PERL script for the state of Illinois (url: 'listing.pl?cmd=json&view=city&state=IL') is
    Code:
    [{'value':'Chicago','disabled':''},
    
    {'value':'Buffalo Grove','disabled':'disabled="disabled"'},
    
    {'value':'Urbana','disabled':''}]
    FireBug stacktrace + line no. where error occurred / error msg if any? (using ext-all-debug.js, not ext-all.js)

    FireBug stacktrace is not available because this is only a problem in Internet Explorer.
    Executing this script in Internet Explorer 6 or 7 renders an error on line 12121 (in ext-all-debug.js, 105 in ext-all.js) indicating that the Object doesn't support this property or method. Debugging this in the Microsoft Script Debugger pinpoints the problem with the execution of the statement:
    ns[i].nodeIndex=i;
    as found in
    updateIndexes:function(_1a,_1b){var ns=this.nodes;_1a=_1a||0;_1b=_1b||ns.length-1;for(var i=_1a;i<=_1b;i++){ns[i].nodeIndex=i;}}
    which is part of the Ext.View=function(_1,_2,_3){...} function as far as I can tell.

    screenshot?

    I do not think it will really help with this, but I can produce whatever is necessary upon request.

    I really hope that I have followed all of the friendly advice and provided all of the information necessary. Thank you for all of your assistance, and for a wonderful product in ExtJS.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    404
      0  

    Default

    Try to check your js code on http://www.jslint.com to find out if there is no extra comma or reserved word issue; the most common causes of "doesn't work in IE".
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #3
    Sencha User
    Join Date
    Aug 2007
    Posts
    84
    Vote Rating
    0
      0  

    Default JSLint Results

    When I paste the whole code in JSLint as follows:
    Code:
    <script type="text/javascript" src="/scripts/ext/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="/scripts/ext/adapter/yui/ext-yui-adapter.js"></script>
     <script type="text/javascript" src="/scripts/ext/ext-all-debug.js"></script>
    <script>
    var tpl = new Ext.Template('<option {disabled} value="{value}">{value}</option>');
    function dd(target)
    {
        var view = new Ext.JsonView(target, tpl, { multiSelect: true });
        view.load({
      url: 'listing.pl?cmd=json&view='+target+"&state="+document.getElementById('state').options[document.getElementById('state').selectedIndex].value
        });
    }
    </script>
    I get
    Error:

    Problem at line 1 character 9: Unrecognized tag '<script>'.

    <script type="text/javascript" src="/scripts/ext/adapter/yui/yui-utilities.js...

    Problem at line 1 character 9: Stopping, unable to continue. (0% scanned).



    and when cutting out the HTML tags as follows

    Code:
    var tpl = new Ext.Template('<option {disabled} value="{value}">{value}</option>');
    function dd(target)
    {
        var view = new Ext.JsonView(target, tpl, { multiSelect: true });
        view.load({
      url: 'listing.pl?cmd=json&view='+target+"&state="+document.getElementById('state').options[document.getElementById('state').selectedIndex].value
        });
    }
    I get
    Error:

    Implied global: Ext, document
    Global tpl, dd

    3 dd(target)
    Variable view
    Global Ext, document, tpl

    /*members JsonView, Template, getElementById, load, multiSelect, options,
    selectedIndex, url, value */

    I am fairly certain that this is not the issue because the code snippet posted here is in fact the entirety of the JavaScript code on the page (there is no more), and there do not appear to be trailing commas in either of the two statements where there is the possibility for such.

    In an effort to exclude the possibility of a reserved word issue I have also attempted the code as follows (with the same results):
    Code:
    var tplTHISISONLYATEST = new Ext.Template('<option {disabled} value="{value}">{value}</option>');
    
    function ddTHISISONLYATEST(targetTHISISONLYATEST)
    {
        var viewTHISISONLYATEST = new Ext.JsonView(targetTHISISONLYATEST, tplTHISISONLYATEST, {
        multiSelect: true
        });
        viewTHISISONLYATEST.load({
      url: 'listing.pl?cmd=json&view='+targetTHISISONLYATEST+"&state="+document.getElementById('stateTHISISONLYATEST').options[document.getElementById('stateTHISISONLYATEST').selectedIndex].value
        });
    }
    Is there a way to test JSLint with Ext sources (I also tried pasting the text of the three imported files into JSLint, but there were two many errors in the first file and it stopped)? Is there any other information I can provide?

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    404
      0  

    Default

    The only thing I can see above is missing type attribute of the script tag. Maybe IE thinks it's VBScript.

    That's last what comes to my mind not being IE expert. Maybe somebody else knows better.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #5
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by ohhowihateie View Post
    When I paste the whole code in JSLint as follows:
    Code:
    <script type="text/javascript" src="/scripts/ext/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="/scripts/ext/adapter/yui/ext-yui-adapter.js"></script>
     <script type="text/javascript" src="/scripts/ext/ext-all-debug.js"></script>
    <script>
    var tpl = new Ext.Template('<option {disabled} value="{value}">{value}</option>');
    function dd(target)
    {
        var view = new Ext.JsonView(target, tpl, { multiSelect: true });
        view.load({
      url: 'listing.pl?cmd=json&view='+target+"&state="+document.getElementById('state').options[document.getElementById('state').selectedIndex].value
        });
    }
    </script>
    I get
    Error:

    Problem at line 1 character 9: Unrecognized tag '<script>'.
    jslint (The JavaScript Verifier) expects and validates only javascript.

    what you pasted were html tags, which naturally killed the validation process since there's no function called <script> in js.

    you should have pasted pure js, like
    Code:
    Ext.onReady(function() {
      var tpl = new Ext.Template('<option {disabled} value="{value}">{value}</option>');
    
      function dd(target) {
        var view = new Ext.JsonView(target, tpl, { multiSelect: true });
        view.load({
          url: 'listing.pl?cmd=json' + 
                    '&view=' + target + 
                    '&state=' + Ext.getDom('state').options[Ext.getDom('state').selectedIndex].value
        });
      }
    
      Ext.get('state').on('change', function() {
        dd('city');
      });
    });
    (jslint will still complain about this code snippet though since it won't be able to find the Ext object, but you get the idea...)

    another thing, avoid inline javascript like the plague.
    using the above code snippet, your html should instead be
    HTML Code:
    <select name="state" id="state">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    
    <select name="city" id="city"></select>
    [edit 1]
    all that said and done, i'm also seeing the error you described in IE6...

    [edit 2]
    saw this in the docs for Ext.View, the superclass of Ext.JsonView
    Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to IE's limited insertion support with tables and Opera's faulty event bubbling.
    so i changed the template to
    Code:
    var tpl = new Ext.Template('<div {disabled} value="{value}">{value}</div>');
    and the html to
    HTML Code:
    <select name="state" id="state">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    
    <div id="city"></div>
    now there's no error and the json loads, but you lose all that functionality you wanted...
    probably need jack / brian to take a look at / confirm this.

    p.s. you might want to consider a ComboBox implementation for the time being...

  6. #6
    Sencha User
    Join Date
    Aug 2007
    Posts
    84
    Vote Rating
    0
      0  

    Default Root of the template

    Glad to see that you can duplicate this issue.

    When the documentation states that the root of the template must be a single node, does that apply to this situation? I thought that the <SELECT> node was the root, and that is was a single node, but perhaps I do not understand that. Is the <OPTION> node the root? I am so confused.

    By the way, thank you for the tip about avoiding inline script. That will certainly be helpful.

    I will also try the combobox method. Is there a way to add other attributes to the option tag (in this example disabled="disabled")? I would assume (if it is possible):
    Code:
    var store = new Ext.data.SimpleStore({
        fields: ['city', 'disabled', 'city'],
        data : exampleData
    });
    
    //or simply
    
    var store = new Ext.data.SimpleStore({
        fields: ['city', 'disabled'],
        data : exampleData
    });
    and then load the same JSON data?

  7. #7
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by ohhowihateie View Post
    When the documentation states that the root of the template must be a single node, does that apply to this situation? I thought that the <SELECT> node was the root, and that is was a single node, but perhaps I do not understand that. Is the <OPTION> node the root? I am so confused.
    i'm not really sure myself. i interpreted it the way you did, then this IE thingy came up, so i re-read the docs and realised it's rather ambiguous (in a way).

    p.s. i don't really understand your last question (it's getting late, i need my ), but here's a (very very) brief summary of how a combo works:
    the ComboBox (whose dropdown list is simply an Ext.View whose output is formatted by an Ext.Template) is backed by an Ext.data.Store. that's it.
    Last edited by mystix; 25 Aug 2007 at 7:12 AM. Reason: corrected typo: comb != combo

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    You can not use a template to insert into a select element. IEs select implementation is non standard and does not support it.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  9. #9
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    i guess this should specifically be mentioned in the docs then. i've added this to the doc bugs list under Ext.View.

  10. #10
    Sencha User
    Join Date
    Aug 2007
    Posts
    84
    Vote Rating
    0
      0  

    Default So is there a way to modify the Ext.Template used by the ComboBox?

    So is there a way to modify the Ext.Template used by the ComboBox?

    Am I marking this one as SOLVED now?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •