Dynamically adding dijit on button click programatically...how?

Question

Hi,

I've got a problem with another dojo enabled form that I am working on. A user can enter details onto the page by entering the data using a dialog box, which in turn updates the database and then displays the user data entered on to the form.

Each element added consist of 2 x Validation Text boxes 1 x FilteringSelect. When it's added to the page they are added as simply text boxes.

I've tried just adding as standard strings but that means the dojo.parse() does not run on the code. I've also tried programmatically adding the elements but that just displays the element object as a string to the page. So far I have:

var xhrArgs = {
    url: url,
    handleAs: "text",
    preventCache: true,
    load: function(data){

        var idResult = parseInt(data);

        if(idResult > 0){


            var divStr = '<div id="employ_' + idResult + '" style="float:left;width:100%;">' +
             '<table width="300">' +
                '<tr>' +
                    '<td height="29"><Strong>' +
                            '<input type="text" dojoType="dijit.form.ValidationTextBox ' + 
                                'change="markEmploymentForUpdate(); ' +
                                'id="cmpy_'+ idResult +'" '+
                                'required="true" ' +
                                'promptMessage="Please enter a valid company name" ' +
                                'invalidMessage="please enter a valid company name" ' +
                                'trim="true"' +
                                'value="'+ companyname +'"/>' +
                    '</td>' +
                    '<td height="29"><input dojoType="dijit.form.FilteringSelect" store="rolestore" searchAttr="name" name="role" onchange="markEmploymentForUpdate();" id="roleInput_'+ idResult +'" value="'+ jobrole +'" ></td>' +
                    '<td height="29">' +
                        '<input type="text" dojoType="dijit.form.ValidationTextBox" onchange="markEmploymentForUpdate();"' +
                            'id="jtitle_'+ idResult + '"' +
                            'required="true"' +
                            'promptMessage="Please enter your job title"' +
                            'invalidMessage="Please enter your job title"' +
                            'value="'+ jobtitle + '"/>' +
                    '</td>' +
                    '<td height="29"><img src="/images/site/msg/small/msg-remove-small.png" border="0" onmouseover="this.style.cursor=\'pointer\';" onclick="removeEmployer(\'employ_'+ idResult +'\', '+ idResult +')" /></td>' +
                '</tr>' +
            '</table>' +
        '</div>'; 

            dijit.byId('companydetails').hide();
            dijit.byId('employername').setValue('');
            dijit.byId('jobtitle').setValue('');
            dijit.byId('jobrole').setValue('');

            dojo.byId('data-table').innerHTML += divStr;

            dojo.byId('companydetails').hide(); 


        }else{

            dojo.byId('add-error').innerHTML = '<div class="error">Unable to process your request. Please try again.</div>';

        }



    }       
};

var deferred = dojo.xhrGet(xhrArgs);

This is displaying text boxes as the dojo.parse isn't running on this. If I replace the ValidationTextBox with:

var textbox = new dijit.form.ValidationTextBox({
   id:"cmpy_" + idResult,
   required:true,
   trim:true,
   "change":"markEmploymentForUpdate();",
   promptMessage:"Please enter a valid company name",
   value:companyname
});

I just get the object printed to the page.

Any ideas how I can added this to my page and maintain the dojo component rather than it defaulting to a text box?

Many thanks.

Answer 1

dojo.parser.parse(dojo.byId('data-table')); after you set it's innerHTML