Dojo ready function is not getting called in ajax response

Question

I have two forms which are defined in this way

Home.jsp:-

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">
 @import "../Script/dojo-1.10/dijit/themes/claro/claro.css";
 </style>    
 <script type="text/javascript">
 dojoConfig = {
    isDebug: true,
    parseOnLoad : true
 }
 </script>
 <script type="text/javascript" lang="JavaScript" src="../Script/dojo-1.10/dojo/dojo.js"></script>
 <script type="text/javascript">
 require(["dojo/parser","dijit/form/Button",      
 "dojo/domReady!"],function(parser){
  //parser.parse();
  alert("From Require");
  });
  function getWelcomeJsp(){
  var loadResponse = dojo.byId("loadResponse");
   dojo.xhrPost({
        url:"Welcome.jsp",
        handleAs:"text",
        load:function(data){
        dojo.style(loadResponse,"display","block");
        loadResponse.innerHTML = data;
        return data;
    },
    error:function(err){
        alert("error"+err);
    }
    });
    }
    </script>
    </head>
    <body class="claro">
   <table>
   <tr><td valign="bottom">
   <a href="Welcome.jsp">This Is Hyperlink</a>
   </td></tr>
   <tr>
   <td>
   <label for="empId">EmpId:</label>
   <input id="empId" data-dojo-type="dijit/formTextBox"         
   type="text"/>
   </td></tr><tr><td>
   <button data-dojo-type="dijit/form/Button" id="buttonId"   onclick="getWelcomeJsp();">Send</button>
   </td></tr></table>
   <div id="loadResponse"></div>
   </body></html>

Welcome.jsp:-

   <!DOCTYPE html>
   <html><head>
   <style type="text/css">
      @import "../Script/dojo-1.10/dijit/themes/claro  /claro.css";</style> 
   <script type="text/javascript"  lang="JavaScript"          src="../Script/dojo-1.10/dojo/dojo.js">   </script>
    <script type="text/javascript"  lang="JavaScript">
    require(["dojo/parser","dojo/ready"],function(parser,ready){
    dojo.ready(function(){
        parser.parse();
        alert("From Ready");
    });
    });
   function myfunction(){
        alert("from welcomedd JSP");
   }
   </script></head>
   <body class="claro" onload="myfunction();">
   This Is Welcome JSP
   <button id="responseButton" data-dojo-type="dijit/form /Button" onclick="myfunction();">Response Button</button>
   </body></html>

Yes,when am clicking on the hyper link in Home.jsp using dojo 1.9 version, Then Welcome.jsp is getting populated very well and the ready function in Welcome.jsp is also getting called and all dojo widgets are getting compiled .

Here comes the problem when am trying to load the Welcome.jsp through an ajax call from Home.jsp .

Welcome.jsp is getting loaded but ready function and onload function in Welcome.jsp is not getting called what can be the problem in ajax response. Am just unable to understand problem that am facing here please let me know any solution for this.

score 1 · Accepted Answer · edited May 23 '17 at 12:21

For security reasons, scripts are not evaluated by the web browser when you add them by using AJAX and set the content as inner HTML.

You have a few options to get around that:

If you only need some widgets to load, you can use the dijit/layout/ContentPane widget and set the href property. This will retrieve the content using AJAX and parse all widgets automatically.
If you really want to execute scripts on the page, you will have to use eval(), check this answer for more info: Can scripts be inserted with innerHTML?
What it actually means is that you have to loop through all scripts on the dynamic content and use eval() on them
An easier way to execute script on the page and parse all widgets onto it as well is by looking at the dojox/layout/ContentPane module. It works similar to the dijit/layout/ContentPane module, but with one difference; it adds a property executeScripts which you can use to evaluate scripts onto the page. For example:

<div id="loadResponse" data-dojo-type="dojox/layout/ContentPane"
    data-dojo-props="href: 'welcome.jsp', executeScripts: true"></div>

Thanks For the Nice Expalnation, Is it possible to execute scripts when we are loading jsp through an ajax call dynamically by an onClick event ? — user3763620, Jul 17 '14 at 09:11
You can set the `href` property of a contentpane dynamically (when an event occurs), by using the `dijit/registry` module to retrieve the contentpane and the `dijit/layout/ContentPane::set()` function to set the property. — g00glen00b, Jul 17 '14 at 09:43

score 0 · Answer 2 · answered Jul 18 '14 at 04:54

0

I had another solution to solve this problem.

Initially remove all the script,css related code in welcome.jsp and in body tag also
In getWelcomeJsp() function,after setting the data to the div by innerHML,call parser.parse(); and write all the components used in welcome.jsp in require.

If u want to call any any event like keyup,click ..........use this code

 on(domNode,"click",function(event){
//logic to implement
});

write this below code after parser.parse();

answered Jul 18 '14 at 04:54

user1885418

41
5

Hi,As i have written a separate function getWelcomeJsp() it is throwing an error saying parser is not defined. And in other scenario on(domNode,"click",function(evnt){ }); it is throwing on is null can u please elaborate your example. – user3763620 Jul 18 '14 at 06:08
require(["dojo/request","dojo/parser"], function(request,parser){ request.get(url, { query: { parameter: "xyz" } }).then(function(data){ //after setting data parser.parse(); }); }); – user1885418 Jul 18 '14 at 06:22
What does this request.get will do in dojo is is an ajax call. If it is like a ajax call how to call it based on a event like onclick – user3763620 Jul 18 '14 at 06:31
Done it bro Thanks for The Suggestions.But now am facing this issue id is already registered what can be the solution for this. – user3763620 Jul 18 '14 at 10:05
try{ dijit.byId(_8.id).destroyRecursive(); }catch(e){ //alert("Error in registry.js ........customized by us"); } – user1885418 Jul 18 '14 at 10:14

Dojo ready function is not getting called in ajax response

2 Answers2