1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Rep Power

    Question JavaScript fails to fire after innerHTML change is made in document?


    just a quickie .. i am adding some very quick drop down filtering for a
    job I'm on .. rather than make an extra round trip each time one drop
    down changes I am trying to do it all client side by using IE's
    innerHTML property (see code below) .. it works just fine until after
    its fired to first time then the code doesnt fire at all .. I am
    guessing I maybe need to move the script into the head or something (as
    if its in the body and I change the body with client side dhtml it
    invalidates the code .. dunno tbh .. and am hoping someone here has a
    quick solution for my furrowed brow ..

    <script language="javascript">
    function filterRoles()
        var selIndex = document.forms['submit_search'].mapid.selectedIndex;
        var sel =
        var opt = "";
        var roles = [
        ["Biomedical Data Sciences", 1], 
        ["CDMA TA Representative", 2], 
        ["CPDM", 2], 
        ["CRF developer", 1], 
        ["CSR Contributing Authors", 1], 
        ["CSR Contributing Authors", 2], 
        ["CSR Coordinating Author", 1], 
        ["CSR Coordinating Author", 2], 
        ["CSR Lead Author", 1], 
        ["CSR Lead Author", 2], 
        ["Centrally based monitor", 1], 
        ["Clin. Ops. Monitoring staff", 1], 
        ["Clinical Matrix Team", 1], 
        ["Clinical Matrix Team Leader", 1], 
        ["Clinical Publishing", 1], 
        ["Clinical Publishing", 2], 
        ["Clinical Study Manager", 1], 
        ["Clinical Study Manager", 2], 
        ["Clinical Trial Supplies", 1], 
        ["Commercial Matrix Team Leader", 1], 
        ["Commercial Matrix Team Leader", 2], 
        ["Contractor/CRO may perform task", 1], 
        ["Contractor/CRO may perform task", 2], 
        ["Contractor/CRO to Attend Meeting", 1], 
        ["Contractor/CRO to Attend Meeting", 2], 
        ["Contractor/CRO would perform task", 1], 
        ["Contractor/CRO would perform task", 2], 
        ["Country Medical Department", 1], 
        ["DMPK/Biomet", 2], 
        ["External Process", 1], 
        ["GCSP", 1], 
        ["GCSP", 2], 
        ["GHO, CPDM, Genetics, Epidem.", 1], 
        ["GHO, CPDM, Genetics, Epidem.", 2], 
        ["GRGC", 1], 
        ["GRGC", 2], 
        ["Global Clinical Supplies Director", 2], 
        ["Global Resourcing Grants & Contracts", 1], 
        ["Global Study Manager", 1], 
        ["Investigator", 1], 
        ["Monitor", 1], 
        ["Monitor's supervisor", 1], 
        ["Monitor's supervisor", 2], 
        ["NA Clinical Operations rep. on Clinical Matrix Team", 1], 
        ["NA and Canada Clinical Operations staff", 1], 
        ["NPS Matrix Team Leader", 2], 
        ["Project Manager", 2], 
        ["Project Statistician", 1], 
        ["Project Statistician", 2], 
        ["Project Statistician Leads", 1], 
        ["Project Statistician Leads", 2], 
        ["Protocol Review Group", 1], 
        ["Protocol Writer", 1], 
        ["Regional Clin. Ops. rep.", 1], 
        ["Regional Monitoring Leaders", 1], 
        ["Regional Resourcing Contact", 1], 
        ["Regional Resourcing Head", 1], 
        ["Regional Study Manager", 1], 
        ["Responsible Parties identified at Startup meeting", 1], 
        ["Responsible Parties identified at Startup meeting", 2], 
        ["Safety Assessment", 2], 
        ["Safety Board", 1], 
        ["Sponsor Signatory", 1], 
        ["Study Manager (US)", 1], 
        ["Study Managers", 1], 
        ["Study Monitor", 1], 
        ["Study Monitor", 2], 
        ["TA Study Management Head", 1], 
        ["Technical Approver", 1], 
        ["Territory Development Leaders", 1], 
        ["Virology", 1], 
        ["Virology", 2]    ];
        var _index = 0;
        var _count = roles.length;
        while (_index < _count)
            if (roles[_index][1] == sel || sel == "--all--")
                opt += "<option value='" + roles[_index][0] + "'>" + roles[_index][0]
    + "\n";
        var list = "<select name='mapid'>\n" + opt + "</select>\n";
        roles_div.innerHTML = list;
        document.forms['submit_search'].mapid.onchange = filterRoles;
    cheers muchly

    Antony Gorman
    Technical Lead
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Seattle WA
    Rep Power
    Programatically changing the innerHTML won't trigger an onchange event. You need to call the event handler manually. Same for the value of form elements or anything else. You can not trigger an event by manipulating the properties of the element in a script, save for calling the event handlers themselves. This prevents endless loops.
  4. #3
  5. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Sacramento, CA
    Rep Power
    What does your html look like?

    I can't tell if you're replacing the original <select>, or it you're adding a new one. If you're adding a new one, make sure it doesn't have the same name as the original. That will break the script.
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Rep Power
    Hmm...that's a novel approach to dynamic selects...no reason why it shouldn't work, although it might be the long way around. No way to debug it though, unless you post the HTML for the initial drop-down so the effect of the function can be noted. This is typical:

    if (roles[_index][1] == sel || sel == "--all--")

    How are we supposed to evaluate that?
  8. #5
  9. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Sacramento, CA
    Rep Power
    Well, I did get an example working, but I'm not sure if the html I came up with is what is supposed to be there.

    But ya, to code works fine. The only thing I had to change was that role_div is undefined in the code snippet.

IMN logo majestic logo threadwatch logo seochat tools logo