Question

I’m trying to make a piece of dojo Code work and having a bit of a hard time.
The intention behind it goes like this:

1- Have a select fire an onChange event that retrieves a list of options through dojo.xhrGet.
2- Have each one of the options retrieved get its own onclick event associated/binded to it and the function that it fires takes 2 arguments

Problem: At this point the onClick event on the options fires as soon as it is retrieved through Ajax and doesn’t pass the firt argument. The events stop firing after that (a click produces nothing).

Thank you for your feedback in advance. The Code follows

JS

function checkAvailable(i){
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+i;

    var prog = dojo.byId(id_prog).value;

    dojo.xhrGet({
        url:"ajaxCoreo.php",
        handleAs:"text",
        content: {
            programa: prog,
            item: i
        }, 
        load: function(data){
            var targetNode = dojo.byId(id_coreo);
            dojo.place(data,targetNode,"only");
            dojo.byId(id_coreo).disabled = false;
            var callback = function(evt){
                var j = evt.target.innerHTML;

                checkPack(j,i);
                console.log('write me if you fire inside first function');
            };
            dojo.query("#coreografia_1>option").connect('click', callback);
            setValor(i);
        }

    });

}



    function checkPack(j,i){
    console.log('write me if you fire inside second function');
    console.log(j);
    console.log(i);

    var num = j;
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+j;

    var prog = dojo.byId(id_prog).value;

    dojo.xhrGet({
        url:"ajaxPack.php",
        handleAs:"text",
        content: {
            programa: prog,
            coreo: j
        },
        load: function(data){

            if(data=="true"){
                dojo.query("option[value="+num+"]").forEach(dojo.destroy);
                alert('O Pack escolhido já foi encomendado previamente.');
                setValor(i);
            }

        }

    });

}

HTML

<select name="programa[]" id="programa_1" onChange="checkAvailable(1)" title="obrigatorio">
                <option value="0">Choose your program</option> 

</select>
 <select name="coreografia_1" id="coreografia_1" disabled="disabled" title="obrigatorio">
                <option value="0" selected="selected">Escolha Um Programa</option> //this is the node that is populated by the first xhrGet call
            </select>

EDIT: I’ve edited the code to reflect the changes to it and added the html

Answer 1

From my experience, if you spend more than 1 day trying to track a cross-brower issue it’s probably somewhere on your basic html knowledge or your basic Js concepts.

This one was related to the fact that only FF manages onclick events directly attached to option tag. For the rest of the gang you need to attach the onchange to the parent.

So here is the final version of the working code, in case anyone comes upon a similar issue

function checkAvailable(i){
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+i;

    var prog = dojo.byId(id_prog).value;

    dojo.xhrGet({
        url:"ajaxCoreo.php",
        handleAs:"text",
        content: {
            programa: prog,
            item: i
        }, 
        load: function(data){
            var targetNode = dojo.byId(id_coreo);
            dojo.place(data,targetNode,"only");
            dojo.byId(id_coreo).disabled = false;
            var callback = function(evt){
                var j = evt.target.value;
                checkPack(j,i);
            };
            dojo.query("#coreografia_"+i).connect('onchange', callback);
            setValor(i);
        }

    });

}



    function checkPack(j,i){
    console.log('write me if you fire inside second function');
    console.log(j);
    console.log(i);

    var num = j;
    var id_prog = 'programa_'+i;
    var id_coreo = 'coreografia_'+j;

    var prog = dojo.byId(id_prog).value;

    //Confirma Se não há encomendas previas deste pack (um máximo de 2 anteriores)

    dojo.xhrGet({
        url:"ajaxPack.php",
        handleAs:"text",
        content: {
            programa: prog,
            coreo: j
        },
        load: function(data){

            if(data=="true"){
                dojo.query("#coreografia_"+i+" option[value="+num+"]").forEach(dojo.destroy);
                alert('O Pack escolhido já foi encomendado previamente.');

            }

        }

    });
}