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>
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.
Related
This is the problem I am having:
How my page looks on firefox
and How my page looks on chrome
What I want to do is get reserve form and data source forms side by side. I have already set a class using the fieldset method but can't figure out what to use to have it side by side.
Using this for data sources form
.tables
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
and using this for Reserve Form
.mreg
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
Just want two get the two forms side by side.
Edit -
Asp.net coding for Reserve Form:
<asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<fieldset class="mreg">
<legend>Reserve </legend>
<asp:Label ID="Label2" runat="server" Text="Reserve ID" Font-Bold=true></asp:Label>
<br />
<asp:TextBox ID="txtRID" runat="server" Height="18px" Width="213px"></asp:TextBox>
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLID" ErrorMessage="Loan ID Required"></asp:RequiredFieldValidator>--%>
<br />
<br />
<br />
</fieldset>
Coding for data source form:
fieldset class="tables">
<legend>Data Sources </legend>
<asp:Label ID="Label6" runat="server" Text="Reservation Table" Font-Bold=true></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
DataKeyNames="Reservation_ID" DataSourceID="SqlDataSource1" BorderStyle="Dotted">
</asp:SqlDataSource>
</fieldset>
</asp:Content>
Is there anything wrong with the code?
You should give float:left to float to the left of screen and get side by side. Also it is not a good practice to give width as px as screen sizes vary.
.tables
{
width:48%;
border-color:Black;
float:left;
display:block;
height:500px;
}
.mreg
{
width:48%;
border-color:Black;
float:left;
display:block
height:500px;
}
You have multiple css options that you could use. As one:
float:left;
...will allow the divs to effectively "float" to the left side of their container, which will solve your problem. However, floats are problematic for a number of reasons, and there are often better options. For example, you can consider taking advantage of the "display" css property, such as:
display: inline-block;
This would also display your divs in a horizontal fashion, and tends to behave more consistently and with fewer problems. There are more options for the "display" property, though, which is worth looking into -- a good overview of some of the options can be found here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
So i have a div with a textbox inside and for some reason i can't make the textbox wider than 50% of the div width. I tried to set the width manually in pixels but it will never grow more than that. In the design interface it grown normally but when i run the project it doesn't. Tried in all browsers, always the same result.
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<asp:TextBox ID="TBDes" runat="server" Height="25px" Width="100%"></asp:TextBox>
</div>
The width attribute on an input element is only used for images.
You have to apply the width as a style.
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<asp:TextBox ID="TBDes" runat="server" Height="25px" style="width: 100%"></asp:TextBox>
</div>
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<input type="textBox" ID="TBDes" runat="server" Height="25px" style="width: 100%" />
</div>
On the W3 Input Attribute Chart you can see what attributes apply to which type of input.
Ok so basically i was using a MS Template and in the css page Site.css was this
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
I have below code:
<fieldset id="preFacts">
<div id="divstructures" runat="server" style="width: 100%;">
<div id="divleft" runat="server" style="width: 48%; float:left">
<label>Desk:</label>
<asp:TextBox ID="txtDesk" runat="server"> </asp:TextBox>
<label>Desk2:</label>
<asp:TextBox ID="txtDesk2" runat="server"> </asp:TextBox>
</div>
<div id="divright" runat="server" style="width: 48%; float:right">
<label>Desk3:</label>
<asp:TextBox ID="txtDesk3" runat="server"> </asp:TextBox>
<label>Desk4:</label>
<asp:TextBox ID="txtDesk4" runat="server"> </asp:TextBox>
</div>
</div>
</fieldset>
CSS:
fieldset#preFacts label
{
width: 20em;
}
now in c# if condition = true i want to display divright(new controls) along with divleft(existing controls) or if condition = false then i want to display divleft(existing controls) always in center using above css(fieldset#preFacts label).
how can i set width: 10em;(fieldset#preFacts label) when the condition is true in c#(dynamically) so that both div's display properly left and right.
fieldset is not a control but an HTML tag. You can use
<fieldset id="preFacts" runat="server">
to make it visible to ASP.NET.
You could implement a multiview or set the CSS in your code-behind when the page is loaded.
Also, you could take divright in your code-behind and set its style to display:none; When your condition is met. See here https://www.google.com/url?sa=t&source=web&rct=j&url=https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style(v%3Dvs.110).aspx&ved=0CB8QFjABahUKEwjptP3HlcfHAhWG1RoKHclpDV8&usg=AFQjCNEJS7adTj2Jh1eFqMPU0IcmOa8qNw
Yet, you might consider to move your intention away from server side code. Processing your requirements via client code is the better approach today.
First off, I'd avoid your inline styles. They will generally take precedence over any other class you apply, which makes it more difficult to work with. Also note that the IDs you're setting on server controls may change unless you also set ClientIDMode="Static", which might prevent your CSS from being applied correctly.
I'm not completely sure what you're trying to achieve, but here's one approach to make the 'left' side take up the whole fieldset if your condition is false, or half the width if true:
CSS:
Here, I'm setting a few classes, rather than depending on IDs.
.divstructures { width: 100%; }
.divfalse { width: 100%; }
.divleft { width: 48%; float: left; }
.divright { width: 48%; float: right; }
ASPX:
This is using an asp:Panel control instead of the inner divs. There are many other approaches you could take:
<fieldset id="preFacts">
<div id="divstructures" runat="server" style="width: 100%;">
<asp:Panel id="divleft" runat="server">
<label>Desk:</label>
<asp:TextBox ID="txtDesk" runat="server"> </asp:TextBox>
<label>Desk2:</label>
<asp:TextBox ID="txtDesk2" runat="server"> </asp:TextBox>
</asp:Panel>
<asp:Panel id="divright" CssClass="divright" runat="server">
<label>Desk3:</label>
<asp:TextBox ID="txtDesk3" runat="server"> </asp:TextBox>
<label>Desk4:</label>
<asp:TextBox ID="txtDesk4" runat="server"> </asp:TextBox>
</asp:Panel>
</div>
</fieldset>
C#:
Here the panel style and visibility is set based on your condition:
...
bool condition = true; // or whatever way you need to set this value
...
divright.Visible = condition;
divleft.CssClass = condition ? "divleft" : "divfalse";
...
You may need to tweak the CSS to get the exact effect you're looking for.
<asp:Panel ID="EditPanel" runat="server" BackImageUrl="~/Light-Gray-Suede1.jpg"
CssClass="style10" Visible="True" Style="position: absolute; left: 503px; top: 1681px;
width: 411px; height: 280px; margin-right: 0px;">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txt_EditExpiresBy" runat="server" ></asp:TextBox>
<asp:TextBox ID="txt_EditTitle" runat="server" ></asp:TextBox>
<asp:Button ID="btn_EditSave" runat="server" Text="Save" onclick="btn_EditSave_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
In the grid view I have this button, when the user clicks on the edit button the panel pops up and it has to have expireby and respondby date from the same row.
<asp:ImageButton ImageUrl="~/Styles/Images/Edit.jpg" CommandName="Edit" runat="server"
ID="btnEdit" ToolTip="Edit Message" />
<asp:PopupControlExtender ID="Edit_PopupControlExtender" runat="server" DynamicServicePath=""
Enabled="True" ExtenderControlID="" TargetControlID="btnEdit" PopupControlID="EditPanel">
</asp:PopupControlExtender>
For redirect I pass the value like this <%# Eval("Email", "SendMessage.aspx?Email={0}") %>. And using that value I do the server side code. But how this can be done in client side. Thanks
Here is work around for displaying selected row's data in popup (i did it with repeater for one of my web project):
javascript to set textboxes with selected row data and then show popup by calling .show()
<script type="text/javascript">
function showPopupWithRowData(expiryBy, respondBy)
{
var txtExpiryBy = $get('<%= this.txt_EditExpiresBy.ClientID %>');
var txtRespondBy = $get('<%= this.txt_EditTitle.ClientID %>');
txtExpiryBy.value = expiryBy;
txtRespondBy.value = respondBy;
$find('<%= this.Edit_PopupControlExtender.ClientID %>').show();
return false;
}
</script>
markup to call javascript showPopupWithRowData() when clicked on button inside Grid
<!-- Note: Replace ColumnNameExpiry and ColumnNameRespond with the original column names -->
<!-- Also note return, since our javascript method always returns false, it will prevent a postback when the image button is clicked -->
<asp:ImageButton ImageUrl="~/Styles/Images/Edit.jpg" CommandName="Edit" runat="server" ID="btnEdit" ToolTip="Edit Message" OnClientClick="javascript:return showPopupWithRowData(<%#Eval("ColumnNameExpiry")%>, <%#Eval("ColumnNameRespond")%>);" />
I'm having a problem with the AjaxControlTollkit Tabs. I want to remove the borders of the tabs since I do not really need them (display reasons). Here is a simplified sample of my code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default-Defaut.aspx.cs"
Inherits="TinTan._Default" MasterPageFile="~/CLF20.Master" Culture="auto"
UICulture="auto" EnableEventValidation="false" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentMain" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
EnablePageMethods="True" CombineScripts="True">
<Services>
<asp:ServiceReference Path="AutoComplete.asmx" />
</Services>
</asp:ToolkitScriptManager>
<div>
<!--tabs in which all the options will be avaible (using AJAX for faster respone)-->
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
<Triggers>
<asp:PostBackTrigger ControlID="btnPostBack" />
</Triggers>
<ContentTemplate>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="CheckActiveTab" OnActiveTabChanged="TabContainer_ActiveTabChanged"
BorderWidth="0px" >
<asp:TabPanel ID="tabAddTan" runat="server" Visible="false">
<HeaderTemplate>
Add Tan (Admin)
</HeaderTemplate>
<ContentTemplate>
<div class="divTable">
<div class="divRow">
<asp:Label ID="lblAddTanTitle" runat="server" Text="Add TAN" Font-Bold="true" Font-Size="Large"></asp:Label>
</div>
</div>
<asp:UpdatePanel ID="pnlAddTan" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="divTable">
<div class="divRow">
<asp:AsyncFileUpload OnUploadComplete="UploadComplete" runat="server" OnUploadedComplete="UploadComplete"
ID="AsynchAddTan" />
</div>
<div class="divRow">
<asp:Button ID="btnAddTanClick" runat="server" Text="Upload File" OnClick="UploadComplete" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Here is what I tried and the results:
Using the BorderWidth="0px", BorderStyle="none", BorderColor="white" properties: it did not work, the borders were unchanged
adding a CSS class and linking it the the TabContainer with the CssClass property: It removed ALL the style of the tabs, the tabs Header were only plain text. The borders were not there thought
Here is the CSS I used:
<style type="text/css">
.AjaxBorder .ajax__tab_body
{
border:0;
}
.AjaxBorder .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Tabs/tab.gif) repeat-x;
}
</style>
It is situated in teh master page. When I was trying to link it to the AjaxTabContainer with CssClass, the .Ajaxborder class was in the choices VS2010 was offering me.
Using the style property and putting border:0 none white; in it: same result as the 1st try, there was no changes to the ajax tabs.
The closest I have been to my goal was the 2nd option. But I do not understand why it removes all the style of the tabs when I am only telling him to remove the borders. I also do not understand why the other options do not do a single thing to the tabs.
Thanks
Hugo
In application i applied the CSS in the following way
add one dummy tabcontainer after script manager
Styles used
.ajax__tab_xp .ajax__tab_tab
{
height: 21px;
}
.ajax__tab_xp .ajax__tab_header
{
border:0;
border-top:0;
border-top-color:White;
}
use cssclass="ajax__tab_xp" for tabcontainer..It works for me
Also please go through this link if it is useful http://forums.asp.net/t/1300660.aspx/1
use
outline-style:none;
to remove the box on the active tab
or
outline-color:Blue;
to get a blue color, not that nasty brownish with blue on ajaxcontroltoolkit demo
... .ajax__tab_active .ajax__tab_tab {background:url('tab-active-verticalleft_b.gif') repeat-x; outline-style:none}
add !important
<style type="text/css">
.AjaxBorder .ajax__tab_body
{
border:0 !important;
}
.AjaxBorder .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Tabs/tab.gif) repeat-x;
}
</style>
Simply set outline to 0;
This is how I do it
.MyTabStyle .ajax__tab_active .ajax__tab_tab
{
outline:0;
}