This project is archived and is in readonly mode.

#569 ✓resolved
Jean-Philippe Déry

getElement('#an-id') does not work using a valid ajax response while getElement('.a-class') works.

Reported by Jean-Philippe Déry | January 23rd, 2009 @ 07:44 PM | in 1.3.0 rc2 (closed)

Consider the following example :

<script type="text/javascript">
<!--
    new Request({
        'url' : 'index.html',
        'method' : 'get',
        onComplete : function(response) { 
            var div = new Element('div').set('html', response);
            console.log(div.getElement('#h1'));
            console.log(div.getElement('.h2'));
        }
    }).send();  
//-->
</script>

<h1 id="h1">H1 With Id</h1>
<h2 class="h2">H2 With Class</h2>   

The console would output :

null

h2 class="h2">....

The problem is, when you are using an ajax response which is not yet injected in the document, you cannot use the id selector ('#') because getElement will not find the element. However, it will work with classes.

See test case !

Thank you!

Comments and changes to this ticket

  • fakedarren

    fakedarren February 8th, 2010 @ 05:00 PM

    • State changed from “new” to “hold”
    • Assigned user changed from “Valerio” to “fakedarren”
    • Milestone changed from 2.0 to 1.3.0 rc2

    First sorry for the delay replying.

    Second of all there are many issues (almost all IE related :D ) with trying to traverse elements not yet present in the DOM. I am going to put this on hold. I assume this will be fixed with our new selector engine, Slick, in 1.3, and will update this issue accordingly when I know more.

  • Jean-Philippe Déry
  • Scott Kyle

    Scott Kyle February 8th, 2010 @ 08:34 PM

    • State changed from “hold” to “open”
    • Assigned user changed from “fakedarren” to “Thomas Aylott”

    Slick will/should solve this issue

  • Fábio M. Costa

    Fábio M. Costa February 12th, 2010 @ 02:48 PM

    It solves this.

    The problem is that when the element is still not in the DOM, document.getElementById() wont work to select this element, and thats the way it works on the current version of mootools.

    On Slick if it cant grab it with document.getElementById (or element.getElementById, not supported on IE) it will fallback to element.getElementsByTagName(tag || '*') and filter for the passed id.

  • fakedarren

    fakedarren February 12th, 2010 @ 02:52 PM

    • State changed from “open” to “resolved”
  • guitarsecretary

    guitarsecretary April 8th, 2010 @ 02:05 AM

    I'm stuck using an old version which exhibits this problem in all browsers, but it appears that it can be worked around using something along the lines of:

    div.getElement('*[id=h1]');
    
    I've tested it in Firefox, Chrome and IE8 and it seems to work in situations where div.getElement('#h1') does not.

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Attachments

Pages