DOJO : How do you reinitiate form elements after ajax call ?

Question

I'm trying to do a couple of things using Zend Framework & Dojo Toolkit, and any help would be appreciated. Here's the problem:

I have a form that is rendered with the Zend Framework form class, which has an ajax radio button selection. Clicking one of these radio buttons will send an ajax request to another controller, which has no layout, just a rendered form. The ajax request will then populate a div with the new form options.

Problem is, when I replace the innerHTML of the div with the ajax response, all the form inputs and elements are not inheriting the same Dojo styling and form validation.

I was wondering if there is a way to reinitate form elements after an ajax call?

I have tried to use the code attached which I found and modified slightly for this example, however it did not work. If I use the line dojo.parser.parse( div ); nothing changes (rg_adress in the example is the ID of a form element that is placed on the DOM). Here is the console.log of rg_address:

 <input type="text" dojotype="dijit.form.ValidationTextBox" 
   required="1" invalidmessage="The first name of the recipient"
   value="" name="rg_address" id="rg_address" class="textbox"/>

  onClick='

  dojo.xhrGet( {
    url: "/transfer/newrecipient/",
    handleAs: "text",
    timeout: 10000, // Time in milliseconds

    // The LOAD function will be called on a successful response.
    load: function(response, ioArgs) {
  $("#newRecipient").html(response);
      $("#newPayMethod").html("");
  $("#newPayDetail").html("");

  var div = dojo.byId("rg_address");
  console.log( div );
  dojo.parser.parse( div );

  return response;
    },

    // The ERROR function will be called in an error case.
    error: function(response, ioArgs) {
  $("#newRecipient").html("Error loading registration form");
  $("#newPayMethod").html("");
  $("#newPayDetail").html("");
  return response;
    }

  });'

Thanks, Dural

Answer 1

I have the same question and I found a possible answer:

http://o.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dijit-parse-after-ajax-call-again

From what I understand, you'd need to do something like this in your function than is called to handle the data received from the ajax call:

function updateform(data)
{
    var targetNode = dojo.byId(\"step2\");
    targetNode.innerHTML = data;
    dojo.parser.parse(targetNode);
}

This works with:

Zend_Dojo_View_Helper_Dojo::setUseDeclarative();

But I'd like to use programmatic. I'll post a question about that.