Wait for page called by $.get to finish executing before resuming execution in call back function

We want to implement an innovative UI. Effectively what we're doing is as follows:

• When the user clicks on a menu item link, a $.get(url) is invoked and we are pulling out the HTML content of the page referenced in the url.
• We then take that content and populate it in an output div and prior to population, we remove whatever content of that output div was.

This is a cut down version of what we are actually doing but it serves the purpose of illustrating what problem I am currently facing.

Effectively, when the page getting pulled using $.get(url) contains plain HTML, I have no problems. However, if the page getting pulled using $.get(url) contains Ext.NET code, then I don't get anything returned back.

What is effectively happening is that the Ext.NET code is itself calling other scripts and inserting elements in the DOM. This causes a problem because my code execution goes to the callback function before Ext.NET has had time to insert the content I'm trying to access.

So a naive attempt to resolve this problem would be to wait until Ext.NET has finished populating the page and then return code execution to the callback function. The question is how do I do this? Is there actually a better way to achieve what I'm trying 开发者_开发技巧to do i.e. ensure that $.get(url) has fully run its course so that my output div is populated properly?

I guess I could down the route of using an iFrame but I would like to avoid that if possible because it would increase the complexity of an already complicated interface.

Extracting the html generated by the rendered Ext.NET Components should be possible, although I think you'll be missing another important aspect... the DOM events attached to each of those Components.

What you'll need is any html sent in the original payload PLUS and the JavaScript used to generate the page AND you'll need to execute that JavaScript on your parent page. Just bringing over the html is not going to get you much.

If you are running Ext.NET on the parent page, you might want to investigate using the functionality available on any Container type. The base functionality of is to fetch the remote page/html + script and execute that script.

The following example demonstrates.

Example

<ext:Panel runat="server" Title="Example">
    <AutoLoad Url="example.html" /> 
</ext:Panel>

Hope this helps.

You need to use

async: false,

so do the call like this..

$.ajax({
  type: "GET", // Don't need to declare this..
  url: 'url.html',
  async: false,
  success: function(data) {
     // Do something with the returned data..
  }
});