CODEWITHSUNDEEP
javascriptajaxjspdojo
user3763620
user3763620

Reputation: 5

Dojo ready function is not getting called in ajax response

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.

Upvotes: 0

Views: 1079

Answers (2)

user1885418
user1885418

Reputation: 41

I had another solution to solve this problem.

  1. Initially remove all the script,css related code in welcome.jsp and in body tag also
  2. 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();

Upvotes: 0

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

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:

  1. 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.

  2. 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

  3. 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>

Upvotes: 1

Related Questions