Question

I am using the following way in order to insert an external html page into my div:

      $.ajax({
          url: "myHTML.html",
          method: 'GET',
          success: function (data) {
              $("#outputDiv").html(data);
          },
          Error: function (err) {
              alert("ERROR: " + err);
          }
      });

which works fine,
the issue is that I would like to run some JavaScript functions that are located in the “myHTML.html” file,
Is there a way to do something like that?

Thanks (=

Answer 1

It’s often much easier to keep scripts in the page you are loading the content into. This is especially true if you have a group of files that all use the same ajx to load, and all call the same functions. This alleviates need to change multiple files with code revisions.

$.ajax({
      url: "myHTML.html",
      method: 'GET',
      success: function (data) {
          $("#outputDiv").html(data);
          /* new html exits so can run code here that affects it*/
          newHtmlAdded();
      },
      error: function (err) {/* note typo on capital "E" fixed*/
          alert("ERROR: " + err);
      }
  });

  function newHtmlAdded(){
       fixmFormStyle();
       addMyValidation(); 
      doSomethingElse();
  }

Otherwise, it’s important to realize that the ready event has already occurred in page being loaded into. This means any code wrapped in ready handler will fire immediately. If the code is before the html in the remote file, it will fire before the corresponding html elements exist in the DOM…and will do nothing.

Code placed after the html in the remote file will work, since the html it refers to will have already been proceessed