1

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 (=

user1322801
  • 839
  • 1
  • 12
  • 27
  • be more specific about what source of scripts is in the other file and where the script tags are located in other file – charlietfl Jun 19 '12 at 21:23
  • 1
    This might help you: http://stackoverflow.com/questions/510779/calling-a-javascript-function-returned-from-a-ajax-response – Amar Jun 19 '12 at 21:24
  • And also http://stackoverflow.com/questions/4900460/how-to-run-jquery-in-ajax-response-page/4901322#4901322 – j08691 Jun 19 '12 at 21:25
  • try `$.getScript()` which gets and executes js files through ajax. – Ram Jun 19 '12 at 21:25
  • the external HTML would contain a simple label and there should be a script in there called "UpdateData" that receives some string and inserts it to the label on the fly (I have to use an external html file otherwise it would have been a piece of cake) – user1322801 Jun 19 '12 at 21:48
  • I think that the "getScript" might be what i was looking for, the problem that will occur when i will use it is that i will have to use it more then once on several files that each one of them would contains a function with the same name, is it possible? – user1322801 Jun 19 '12 at 22:13
  • If multiple .js files define a function by the same name, then the last one overrides the others. However, you wouldn't have to include the files multiple times, since you can copy the function to a different name before calling the second file. – Brilliand Jun 20 '12 at 01:39

1 Answers1

0

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thanks guys but it is not what i was looking for. I will have about 3 or 4 external html files that i will need to load into different divs... each one of them would contain a function with the same name ("Update"). I would like to have to ability to call the update function per html - lets say that i will load html #1 into div #1, and also html #2 into div #2 I need to have the ability to call my Update function for html #1 only (the parameters and the inner functions in those htmls could be and would be different from each other) I hope that my problem is clearer now – user1322801 Jun 21 '12 at 07:36
  • that's easy to do inside success of ajax...use the context of the element you are loading into and only look at the html in that context when you run your code `$('#div1').load( url, function(){ update(this) }) – charlietfl Jun 21 '12 at 07:55