Question

I have an ASP.NET MVC3 application, and I have the task to insert some HTML code (some form) and Javascript code (mostly jQuery validation for the inserted form) into the DOM of a web page – the HTML and the Javascript code are both returned via Ajax calls:

         var id = jQuery(this).attr("data-id");
         var querystring = "id=" + id;
         jQuery.ajax({
             type: "GET",
             url: "Home/GetEditViewHTMLById",
             data: querystring,
             dataType: "html"
         }).done(function (msg_html) {
             jQuery.ajax({
                 type: "GET",
                 url: "Home/GetEditViewJavascriptById",
                 data: querystring,
                 dataType: "script"
             }).done(function (msg_javascript) {
                 jQuery("#content").html(msg_html); // inserting the HTML

                 var script = document.createElement("script");
                 script.type = "text/javascript";
                 script.text = msg_javascript;
                 document.body.appendChild(script); // inserting the Javascript - doesn't work
                 Edit(); // <- this function would be in the inserted Javascript code
             });
         });

The “msg_javascript” variable contains the Javascript code, if I call alert, I can see the result of the Ajax call:

       function Edit(){
          jQuery("#plugin").validate( { errorElement: 'div' } );
          jQuery("#sum1").rules("add", { required: true, messages: { required: "!" }  });
          jQuery.validator.addMethod("regex_sum1",
                  function (value, element, regexp) {
                      var check = false;
                      var re = new RegExp(regexp);
                      return re.test(value);
                  },
                  "Wrong number format!");
          jQuery("#sum1").rules("add", { regex_sum1: "^[1-9][0-9]*$" });
          jQuery("#sum2").rules("add", { required: true, messages: { required: "!" }  });
          jQuery.validator.addMethod("regex_sum2",
                  function (value, element, regexp) {
                      var check = false;
                      var re = new RegExp(regexp);
                      return re.test(value);
                  },
                  "Wrong number format!");

          jQuery("#email").rules("add", { required: true, messages: { required: "!" }  });

          jQuery.validator.addMethod("regex_email",
                  function (value, element, regexp) {
                      var check = false;
                      var re = new RegExp(regexp);
                      return re.test(value);
                  },
                  "Wrong e-mail format!");
          jQuery("#email").rules("add", { regex_email: "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$" });
          jQuery('input').blur(function(){
                          if(!jQuery(this).valid()){
                             return false;
                         }
                      });

          function calculate(){
               return (Number(jQuery('#sum1').val())*(Number(jQuery('#sum2').val())+0.5));
          }
          function getFields(){
               return ["sum1","sum2"];
          }
          function validateRange(value){
               return 1000 <= value && value <= 10000;
          }}

If I return the following function from server:

          function Edit(){ 
                alert("okay");
          }

• everything is okay, and the alert executes.
  If I return that Javascript function above, the function doesn’t execute, and I can’t see the script tag in the Firebug neither, so I don’t really know how to debug this problem.
  What did I do wrong? Please, any help is appreciated.

Answer 1

Javascript doesn’t run in a returned variable, you must execute it:

eval(msg_javascript);