Home/ Questions/Q 4002056
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:58:47+00:00

I am just starting to learn jQuery, and want to load content from a

  • 0

I am just starting to learn jQuery, and want to load content from a seperate .aspx page dynamically into a div. Using example from here: http://www.asp.net/ajaxLibrary/jquery_webforms_dynamic_load.ashx?HL=var.

However it doesn’t seem to be responding and I’m probably missing some piece of this. Here is the code / script in my .aspx page: 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>       
<script type="text/javascript">

$(document).ready(function () {
    // External ASPX Page calling   
    $("#btn_Submit").click(loadDynamic);
});

function loadDynamic() {

    $("#dynamicResults").load("ResultsView.aspx", 
        {name: $("#cbox_User").val() },  
        function (content) {   
           $(this).hide().fadeIn("slow");
                return false;
        });
}  


<Header>
QUERY VIEW
</Header>

<Content>
    <div style="float:right; height:154px; width: 947px; margin-left: 0px; background-color: #E0E0E0;">
        <br />
        <asp:Label ID="Label2" runat="server" Text="Select a User:" 
                    Style="margin-left:28px" ></asp:Label>

                    <asp:ComboBox ID="cbox_User" runat="server" AutoCompleteMode="SuggestAppend">
                    </asp:ComboBox>

                <asp:Label ID="Label3" runat="server" Text="Select a Month:" 
                                Style="margin-left:28px" ></asp:Label>
            <asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
                <asp:CalendarExtender ID="CalendarExtender1" runat="server" 
                            TargetControlID="txt_Date" 
                            Format="MMMM yyyy" 
                            OnClientShown="onCalendarShown"
                            OnClientHidden="onCalendarHidden"
                            BehaviorID="calendar1" >
                </asp:CalendarExtender>
                <asp:Button ID="btn_Submit" runat="server" Text="Submit" Style="margin-left:28px" onclick="Btn_Submit_Click" />
</div>
</Content>


<Header>
RESULTS VIEW
</Header>

<Content>
    <div id="dynamicResults">
    </div>
    <div style="border-style: none; height:340px; width: 770px; position:relative; top: 10px; left: -2px;">
     <asp:GridView ID="ResultsView" runat="server" CellPadding="3" 
         ForeColor="Black" GridLines="None" AllowPaging="False" 
         Visible="False" 
         Height="318px" style="margin-left: 32px; margin-top: 2px;" Width="718px" 
         BackColor="White" BorderColor="#999999" BorderStyle="Solid" 
         BorderWidth="1px">
        </asp:GridView>
     </div>
</Content>

And in the second .aspx page, which contains I a div I just want to dynamically load: 

<html xmlns="http://www.w3.org/1999/xhtml">
   <div style="background-color:#E0E0E0; border-style: ridge none none none; border-        width: thin; border-color: #B3B3B3; height:120px; width: 770px;  position:relative;     top: 10px; left: 8px;">
          <asp:Label ID="lbl_Header" runat="server" Text="User  Information:"></asp:Label>
   </div> 
 </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at the load method.

    Here is an example from the page:

    Loading Page Fragments The .load()
    method, unlike $.get(), allows us to
    specify a portion of the remote
    document to be inserted. This is
    achieved with a special syntax for the
    url parameter. If one or more space
    characters are included in the string,
    the portion of the string following
    the first space is assumed to be a
    jQuery selector that determines the
    content to be loaded.

    We could modify the example above to
    use only part of the document that is
    fetched:

    $('#result').load('ajax/test.html #container');

    When this method executes, it
    retrieves the content of
    ajax/test.html, but then jQuery parses
    the returned document to find the
    element with an ID of container. This
    element, along with its contents, is
    inserted into the element with an ID
    of result, and the rest of the
    retrieved document is discarded.

    jQuery uses the browser’s .innerHTML
    property to parse the retrieved
    document and insert it into the
    current document. During this process,
    browsers often filter elements from
    the document such as , ,
    or elements. As a result, the
    elements retrieved by .load() may not
    be exactly the same as if the document
    were retrieved directly by the
    browser.

    Edit: Just noticed that in your function loadDynamic() you’re trying to get the value of the control cbox_User like this: 

    $("#cbox_User").val()

    But, because it’s a server-side control, you need to get the value like this: 

    $("#<%=cbox_User.ClientID%.").val()

    This is because .NET gives ASP.NET controls different id’s than what you specify.

    Hope this helps.

    • 0