Dynamic content w/ jQuery

Question

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>

Answer 1

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.

Dynamic content w/ jQuery

Question

1 answers

solution1
1 ACCPTED 2011-02-17 19:09:05

Dynamic content w/ jQuery

Question

1 answers

solution1 1 ACCPTED 2011-02-17 19:09:05

solution1
1 ACCPTED 2011-02-17 19:09:05