Superposición de sólo una parte de una página externa con jQuery

Question

¿Cómo puedo cargar una parte de una página externa con superposición de jQuery?

Tengo un aspx llamar TipoFactor.aspx wich tiene un div dentro de una contentplaceholder como esto:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <br />
        <div id="DivGeneral" runat="server" class="tablaPaddingFiveCeleste">

Como se puede ver el "DivGeneral" es el que yo quiero cargar en la superposición, cosa que se define así:

<a href="TipoFactorSeleccion.aspx" rel="#overlay">
                <button type="button">
                    Pagina Externa</button>
            </a>
            <!-- overlayed element -->
            <div class="apple_overlay" id="overlay">
                <!-- the external content is loaded inside this tag -->
                <div class="contentWrap">
                </div>
            </div>
            <script type="text/javascript">
                $(function() {
                    // if the function argument is given to overlay, 
                    // it is assumed to be the onBeforeLoad event listener 
                    $("a[rel]").overlay({

                        expose: 'darkred',
                        effect: 'apple',

                        onBeforeLoad: function() {

                            // grab wrapper element inside content 
                            var wrap = this.getContent().find(".contentWrap");

                            // load the page specified in the trigger 
                            wrap.load(this.getTrigger().attr("href"));
                        }

                    });
                });
            </script>

Como lo es ahora su carga toda la página en la superposición y eso no es bueno para mí porque es inherites de la misma masterpage como el otro. Necesito mantener que masterpage, ya que tiene algunas funciones aplicacion importante.

¿Qué puedo hacer yo?
Muchas gracias.

Answer 1

Suponiendo he entendido bien, cuando se utiliza el jQuery "load ()" API puede colarse en una expresión selector de jQuery en su cadena URL:

$('#loadDestination').load('http://some.where/content #onlyThisPart', function() { ... });

que dice jQuery para buscar '#onlyThisPart' en el cuerpo de la respuesta, y eso es todo lo que se suma a su documento principal.

Así que le cambie su código de algo como esto:

// ...
wrap.load(this.getTrigger().attr("href") + ' #divGeneral');

o lo que sea el valor "id" es que las marcas donde iniciará su contenido.