[web2py] Using components breaks javascript?

[Luther Goh Lu Feng]

This problem might be related to the one at
http://groups.google.com/group/web2py/browse_thread/thread/1eead541f574a77d#

The view console.html has two drop down selects. The 1st dropdown
select (id="worksheet-list") activates loads a component via
javascript when changed. The second dropdown select will trigger an
alert dialog when changed.

When the page is freshly loaded, the second dropdown works as
expected. After a fresh reload, the 1st dropdown works as expected
too. If the 2nd dropdown is immediately triggered after the 1st
dropdown, the 2nd dropdown fails, ie no dialog box appears. And there
are no errors in the javascript console.

I did a diff of the source code when the 2nd dropdown was working
after a fresh reload, and when it fails, and found very very small
differences in the source: http://tinypic.com/r/muzcyh/7

I hope someone can aid me in explaining the cause of these
observations and help me debug this. Thanks in advance.


#console.html

        <select id="worksheet-list">
        {{ for wk in worksheets: }}
                <option value="{{=wk.id}}">{{=wk.subject}}: 
{{=wk.name}}</option>
        {{ pass }}
        </select>

        <script>
        <!-- Load comment component based on dropdown selected -->
                $(document).ready(function(){
                        
$('select#conversation_dropdown_text').change(function(){
                                alert('meow');
                        });

                        $('select#worksheet-list').change(function(){
                                
web2py_component("/roverus/comment/conversation_dropdown.load/" + $
('#worksheet-list').val(),"sidebar-header")

                        });
                })
        </script>

        <h1>Conversation</h1>
        <div id="sidebar-header">
        {{ block sidebar-header }}
                {{=LOAD('comment', 'conversation_dropdown.load',
args=[request.args[0]], ajax=False)}}
        {{ end }}
        </div>



==============================================

#comment.py

def conversation_dropdown():
        '''This action returns a dropdown component'''

        # Pull the worksheet requested
        w = db.worksheet(request.args(0))

        # Create the manage the conversation selector dropdown
        conversation_dropdown = SQLFORM.factory(
                Field('text', label='Select a conversation',
requires=IS_IN_DB(db(db.question.worksheet==w), 'question.id',
'question.text', orderby='question.id')), _id='conversation_dropdown',
table_name="conversation_dropdown")

        #hide the submit button
        submit = conversation_dropdown.element('input',_type='submit')
        submit['_style'] = 'display:none;'

        #process form dropdown
        if conversation_dropdown.accepts(request.vars, session):
                 current_conversation = request.vars.text
        elif conversation_dropdown.errors:
                 response.flash = 'Form has errors'

        return {'conversation_dropdown':conversation_dropdown}