I have had a website running using a textbox, autocomplete extender, and autocompletedropdownpanel. Basically when a user starts typing a name into the text box the results appear in a few seconds. Since there can be hundreds of rows I need a scroll bar. Then the use just selects the name. For some reason, it is now broken (maybe update with IE? as it works fine in Chrome) Now when a user uses the scroll bar it automatically closes the results and is unable to make a selection. I have not been able to find a solution on the web for this. Is there an updated ajax kit I need to use? If so how do I go about replacing it? Or is there something to my code I can add or change?
Update: I found that this issue only appears on Surface Pro tablets. So something with IE11 and being a tablet causes this. Even though the tablet is docked with a normal keyboard and mouse.
Is it possible to use a cancelBubble function for a dropdownpanel with scroll bars? I have an issue where when clicking on the scroll bar to scroll threw rows once the mouse is released the results close. From reading I think I need some sort of cancelBubble event or stop propagation
<asp:Panel ID="autocompleteDropDownPanel" runat="server"
ScrollBars="Auto" Height="200px" Font-Size="Medium"
HorizontalAlign="Left" Wrap="False" />
<asp:AutoCompleteExtender ID="AutoCompleteExtender" runat="server"
DelimiterCharacters="" Enabled="True" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList" TargetControlID="DoctorNameTextBox"
UseContextKey="true" ContextKey="StateDropDown"
CompletionListElementID="autocompleteDropDownPanel"
onclientitemselected="getSelected"
ShowOnlyCurrentWordInCompletionListItem="True" CompletionInterval="100"
MinimumPrefixLength="2">
</asp:AutoCompleteExtender>
Just edit the css of the class.
Overflow: Auto;
Height: 60px;
If this doesnt work , then try following:
Set AutoPostBack=false.
If the AutoCompleteExtender functionality is gone by setting AutoPostBack=false , then by Using the OnClientItemSelected property I could call a javascript function that triggered a postback.
Related
First off, jQuery is not an option at this particular time in this project or I would just utilize that type of password strength option.
Currently I have an Ajax control toolkit control (PasswordStrength) setup to work with a textbox. The control is inside the table row/cell next to the textbox itself in which it validates. It is also setup to be a bar-type indicator that is displayed on the Right side of the textbox through the DisplayPosition property.
The strength meter appears fine in IE, Firefox and Opera ... Right next to the password field textbox and this is great. Now, in Chrome and Safari, the indicator appears at a random place on the page and if you continue typing the indicator actually moves up and down the page randomly, nowhere close to the right side of the password textbox. The indicator is technically correct on the x-axis, meaning it is "beside" the textbox, but the y-axis is sporadic and moves up and down the page, nowhere near the textbox. The behavior is the same in Chrome and Safari.
Any ideas? It's making me a bit nutty as I've tried wrapping divs, positioning, moving the control, adjusting properties etc.
Any help is greatly appreciated.
Here is the textbox and control itself as it is currently setup:
<asp:TextBox ID="txtPassword" Width="150px" runat="server"
Style="text-align: left" TextMode="Password" </asp:TextBox>
<asp:PasswordStrength ID="PS1"
runat="server"
TargetControlID="txtPassword"
DisplayPosition="RightSide"
StrengthIndicatorType="BarIndicator"
PreferredPasswordLength="16"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="1"
MinimumLowerCaseCharacters="1"
MinimumUpperCaseCharacters="1"
RequiresUpperAndLowerCaseCharacters="false"
CalculationWeightings="50;15;15;20"
TextStrengthDescriptionStyles="barRed;barYellow;barBlue;barGreen"
Enabled="true"
BarBorderCssClass="barBorder"
BarIndicatorCssClass="barInternal">
</asp:PasswordStrength>
Any help or suggestions would be greatly appreciated!
This problem is relevent apperantly to IE6 and maybe to newer versions im not sure. when you put a linkbutton inside an updatepanel like so:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:LinkButton runat="server">Test</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
You run it and then play around with ctrl+mouse wheel and change the size of the site. Then click the linkbutton. It changes the size of the text of the website again to somekind of deffault size... Im wondering if someone knows how to fix this. And what is causing this problem
Edit: the problem was with a few users clicking the link and suddenly all the text on the page became very small and unreadable
You have nothing to fix here, this is a browser behavior.
But if you have a custom behavior that you change the text size, then you need to take care to save the last setting somewhere and then get the last setting and use it.
I have an ASPxPopupControl. The html code is:
<dx:ASPxPopupControl ID="MKRPopup"
Width="900px"
ClientInstanceName="MKRPopup"
HeaderText="MKR
Ekleme" Modal="true"
runat="server"
AllowDragging="true"
AllowResize="true"
AutoUpdatePosition="false"
CloseAction="CloseButton"
ShowFooter="false"
PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="Above"
EnableViewState="false">
This popup is shown with choosing a row in a gridview and clicking an AddMKR button below it. However, the problem is, when I make the modal true, the popup goes really below the page so it can't bee seen and the scrollbar on the actual page disappears. So, the only way to see the popup is to zoom out the page. Then I can see it there below. Can you think of a reason? I thought maybe thats because it goes to the server side, because some fields have to be filled. But, when I change the Modal to false, it is shown the way it should be. I really can't figure this out.
I have 2 sections of my website I am developing, a reference box that has a fixed width and a working box that has the same height as the content. I am trying to make it so the user can swap the content between the two boxes. I have the following type of setup in the aspx page:
<asp:panel id="pnlReference" runat="server" CssClass="referencePanel" >
<asp:panel id="pnlsection1" runat="server" >
Content....
</asp:panel>
</asp:panel>
<asp:linkbutton id="lbtSwapPanels" runat="server" />
<asp:panel id="pnlWorking" runat="server" CssClass="workingPanel" >
<asp:panel id="pnlSection2" runat="server" >
Content....
</asp:panel>
</asp:panel>
What I am trying to have occur is when I press the lbtSwapPanels linkbutton, it moves pnlSection1 into pnlWorking and pnlSection2 into pnlReference. The code I used to do this in the OnClick method was:
Control pane1, pane2;
pane1 = pnlWorking.Controls[0];
pane2 = pnlReference.Controls[0];
// Remove them from their respective panels
pnlWorking.Controls.Remove(pane1);
pnlReference.Controls.Remove(pane2);
// Add them to the opposite pane
pnlWorking.Controls.Add(pane2);
pnlReference.Controls.Add(pane1);
Unfortunately, this does not work. When I click the linkbutton, nothing happens. If I then do something to perform another postback the reference and working panels become empty. I assume this has to do with the change not being saved into Viewstate but I don't know how to get around that.
Does anyone have any ideas on how to do this?
Update: It seems that moving objects around with Jquery is causing issues with asp.net postbacks as well as making my asp.net ajax tabcontainer completely fail to function. After 2 swaps and postbacks, further postbacks cease to function at all. Here's the new code
<div id="referencePane">
<asp:panel id="pnlsection1" runat="server" >
Content with tab container
</asp:panel
</div>
Swap Panes
<div id="workingPane">
<asp:panel id="pnlsection2" runat="server" >
Content
</asp:panel>
</div>
Here's the javascript:
function SwapPanes() {
var pane1, pane2;
pane1 = $("#workingPane").html();
pane2 = $("#referencePane").html();
$("#workingPane").empty();
$("#referencePane").empty();
// Add them to the opposite pane
$("#workingPane").prepend(pane2);
$("#referencePane").prepend(pane1);
}
First postback causes the tabcontainer to fail (javascript exceptions claiming it's trying to create a tab container with teh same ID (only one exists in the original aspx page). Postbacks then proceed to do wierd stuff.
Have you thought about keeping the controls in the panel but just swapping the position of the panels? You can do this pretty easily in JQuery although you'll be using DIVS instead of ASP.NET panels. This is, again, quite easy since Panels just translate to DIVS in the end. I did this recently for a wizard-style questionnaire (moving from panels to divs) and I was surprised how easy it was.
Update: Note that, when you swap the div positions, you can change the style as well (again, easy in JQuery) so that the user won't have a jarring "why did these two things change position" experience.
The bottom line, really, is that I think you are trying to use a hammer to drive a screw. JQuery is the screwdriver you are looking for and learning it is very much worth your while!
Look into ASP.Net web parts. That will manage the whole thing for you in a dynamic and responsive way.
I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !