I have been using asp.net programming just from few months and I have to maintain an application that is made up of many aspx webforms with updatepanels.
One of the task of the maintenance is to integrate some of the JQueryUI widgets (mostly datepicker, tabs and buttons).
I am experiencing some problems on doing this smoothly expecially when the controls are
Inside an update panel
Generally inside any templated control (e.g. Wizard control)
For example this very simple code:
<script type="text/javascript">
$(document).ready(function() {
$("#myTabs").tabs();
$("[ID$=TextBox2]").datepicker();
$("[ID$=btnOk]").button();
});
</script>
<div>
Jquery UI controls inside a div (Tabs, datepicker and buttons)
<br />
<div id="myTabs">
<ul>
<li>quick sample</li>
</ul>
<div id="p-tabs-1">
<p>In this page there are a datepicker control and a button</p>
<p>
Please select a date :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" OnClientClick="btnOk_Click" />
</p>
</div>
</div>
</div>
will immediately cease to work if placed inside an update panel.
Do there is a solution regarding this issue or I have to follow a completely differnt approach? Do I have to substitute all the updatepanels? And what is the best alternative to this easy to use control?
Thanks very much
Lorenzo
After applying Chuck suggestion I was getting a javascript error (Sys is not defined).
Googling around tooked me at this web post that solved my problem.
Now everything works! :)
See: jQuery $(document).ready and UpdatePanels?
An updatepanel destroys all javascript references, which includes jquery bindings. If it did not do this it would create a memory leak.
Related
This issue occurs in ASP.NET 4.6 and I've seen a few similar posts, but they usually referred not to the same control (built-in here) or ended up with a conclusion "just use a different/external control here: html link", which is not really an option for me.
First, some code
Site.Master
<div id="HeaderProper">
<div id="HeaderProperTitle">
<asp:Menu ID="HeaderProperMenu" runat="server" DataSourceID="HeaderProperSiteMap" Orientation="Horizontal"
BackColor="#ff2400"
RenderingMode="List"
StaticEnableDefaultPopOutImage="false"
StaticDisplayLevels="2"
StaticHoverStyle-BackColor="#000000"
StaticMenuItemStyle-HorizontalPadding="15px"
StaticMenuItemStyle-Height="42px"
DynamicHoverStyle-BackColor="#000000"
DynamicMenuItemStyle-HorizontalPadding="5px"
DynamicMenuItemStyle-BackColor="#ff2400"
DynamicMenuItemStyle-Font-Size="24px"/>
<asp:SiteMapDataSource ID="HeaderProperSiteMap" runat="server" />
</div>
SomePage.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1>Complete List</h1>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="SortOrderSelection">
Sort by
<asp:DropDownList ID="cbxSortBy" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="cbxSortBy_SelectedIndexChanged" />
</div>
<asp:Panel ID="SortedList" CssClass="top-margin five-columns" runat="server" />
<asp:Panel ID="Summary" CssClass="top-margin" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
How to reproduce:
Choose an item in the DropDownList, which causes partial postback. The menu then stops working, that is - the drop down/hover menu doesn't open, but the first level links seem to be functional. Refreshing the whole page fixes the problems (duh?).
And, contrary to what I've found:
1) Menu is NOT inside an UpdatePanel, which I acknowledge is unsupported solution
2) Menu works fine when RenderingMode is set to Table, but generates a very ugly html code, which I would like to avoid. Not mentioning additional quirks in margins that have to be adjusted with ugly fixes.
3) I tried setting z-index: 1000...0 !important as suggested by some sources (on most menu related styles), but to no avail.
I would be grateful for any suggestions how this can be resolved while still using asp:Menu control in List rendering mode, possibly with as least intervention as possible. My point here is to use built-in functionality and keep the code clean from unnecessary JS, jQuery (if possible at all; otherwise I'd rather open a Connect case for this issue).
Thank you in advance.
Putting your menu into an update panel should work because it will indicate to the server to update it after the postback. Without this, any repost can create the risk of losing some events in your element. Refreshing works because you are refreshing the whole page and not only some element of it.
Our team has a web app built on asp.net (C#) and uses some infragistics asp.net controls. I'm having serious problems (in particular) with the infragistics web dialog window (IGWD) since I started to move the html of the app to html5 and using bootstrap 3 as the css framework.
I believe that some properties like table-layout:fixed and table widths that bootstrap 3 uses are messing up the IGWD control. But if I remove those properties from bootstrap css I mess all the framework and thus, all the app.
Any ideas where I should start? Already read the infragistics documentation but is not as good as one might think and didn't help me at all on this particular issue :-(
Thanks in advance for all your help and patience.
After many attempts I'm starting to get some results - what I did was just follow the guidelines and samples of this guy = http://www.ezineasp.net/post/AJAX-Calendar-Extender-CSS-Theme.aspx and adapt his ideas to infragistics controls.
So, I created my own cssclass and contextualize all infragistics web dialog window classes under my own! But I had to go codebehind to make sure some attributes are set the way I want. For example, I had to add these lines
wdwAddCurso.WindowState = DialogWindowState.Normal;
wdwAddCurso.InitialLocation = DialogWindowPosition.Centered;
otherwise I couldn't get the window to stay where I wanted it even if I had
<ig:WebDialogWindow ID="wdwAddCurso" runat="server" Width="640px" Height="480px" InitialLocation="Centered" Moveable="true" Modal="True" StyleSetName="RubberBlack" ModalBackgroundCssClass="igdw_RubberBlackModalBackground">
<ContentPane FrameBorder="true">
<Template>
<uc1:CursosAdd01 runat="server" ID="CursosAdd011" />
<div class="text-center">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" CausesValidation="False" CssClass="button" Text="Fechar" />
</div>
</Template>
</ContentPane>
<Header>
<CloseBox Visible="false" />
</Header>
<AutoPostBackFlags WindowStateChange="On" />
</ig:WebDialogWindow>
in the aspx file.
Anyway, thanks for the answer!
The version we're using is Infragistics4.Web.v10.3, Version=10.3.20103.2217.
And the result I'm getting is this (not the final result we desire but...as I've said before, we are getting somewhere):
you can see a screenshot here
I have a question for web service. I have been testing but not sure what is causing this. I am trying to prevent my web page from flickering when there is a post back. So I used web service. It is working fine without any noticeable flickering when I put my dropdownlist on a normal page (without Master page). However, when I moved the same code to page with master page, then the flickering happens. Anyone has any ideas how to fix this please? My html mark up is as below:
<div>
<div>
<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True"></asp:DropDownList>
</div>
<div>
<asp:DropDownList ID="ddlCity" runat="server" DataTextField="city_name" DataValueField="city_id"></asp:DropDownList>
</div>
</div>
I am trying to avoid using update panel. Thanks
You will get the flikering as long as you have postback, you can use ajax call to refresh only part of page for instance drop down. One of easiest solution is to use UpdatePanel or you can use jQuery ajax. This article explains how you can make cascading dropdowns using jquery ajax with asp.net.
I am developing web applications in asp.net using c#, so I placed asp:textbox in web application. When i am loading page, i want to have default text in text box and when i place cursor on it and type the first letter, the text box become clear from textbox.
what you are asking is called watermarking. There are so many ways to do it
Third Party tools like :
a. Ajax ToolKit. you can see it in action here
b. Telerik RadTextBox Control (by setting its EmptyMessage property) .
and so many.
You can yourself build one using simple javascript like below:
<script>
$(document).ready(function() {
var watermark = 'textbox watermark text';
$('#inputTextboxId').blur(function(){
if ($(this).val().length == 0)
$(this).val(watermark).addClass('watermark');
}).focus(function(){
if ($(this).val() == watermark)
$(this).val('').removeClass('watermark');
}).val(watermark).addClass('watermark');
});
</script>
and place an input control inside your container say body
<body>
<input id="inputTextboxId" type="text" />
</body>
Also, if your entire work area resides in HTML5 supported browsers,then simply do this:
<input type="text" placeholder="Enter your name...">
and your textbox will have watermark "Enter your name..." which would disappear on focus.
Another alternative is the HTML5 Placeholder tag, although this isn't fully supported in all browsers.
I would recommend the javascript alternative #Jon Malcolm suggested.
You can do this using the AjaxControlToolkit's TextBoxWatermark extender. Add the AjaxControlToolkit to your project (using Nuget is the easiest way), and then in your markup you can specify the text to be displayed like this:
<asp:textbox runat="server" id="MyTextBox" />
<ajaxtoolkit:TextBoxWatermarkExtender runat="server" id="MyTextBoxExtender" TargetControlId="MyTextBox" WatermarkText="Default Text" />
Or you can do this with the jQuery Watermark plugin - there's details on how to implement this in the answer to this question.
Try the below mentioned following code it wil help to you to solve your problem
<asp:TextBox ID="Textbox"
CssClass="Input"
onfocus="if(this.value == 'Name'){this.value='';}"
onblur="if(this.value == ''){this.value='Name';}"
Width="300"
runat="server"
text="Name" />
I am using ASP.NET controls to fill in HTML for my jQTouch application, but I am having trouble with my hrefs ceasing to function as intended on my search page. The jQuery function for my anchor class evidently does not get called; it simply links back to the default page, even though the link is built similarly on other pages without any problems.
This is where my links are breaking:
<form id ="form1" runat="server" class="form">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<ul class="rounded">
<li><asp:TextBox ID="txtSearchString" runat="server" name="search-articles" placeholder="Search GROK"></asp:TextBox></li>
<li><asp:Button ID="btnSearch" runat="server" Text="Search" type="rounded" OnClick="btnSearch_Click"></asp:Button></li>
</ul>
<asp:Literal ID="litSearchResults" runat="server"></asp:Literal> <%--HTML for jQTouch inserted here--%>
</ContentTemplate>
</asp:UpdatePanel>
</form>
This is an example of the HTML generated by code behind.
<ul class="edgetoedge"><li class="sep">Found 101 articles</li><li>PAWS: How to Access the Sample Test Database</li><li>Mac OS X: Hardware Test</li><li>The JavaScript Test</li><li>PAWS: Emergency Text Message Test</li><li>Definition: remote digital loopback test</li><li>Definition: power-on self test</li><li>Definition: power-on self test</li><li>AVG 9.0 Free Edition: Setting Scan Process Priority</li><li>Microsoft Office 2007: Diagnostics</li><li>Moodle: Description of Aggregation Methods</li><li>AVG 9.0 Free Edition: How can I run the complete scan of whole computer?</li><li>LSU A-Z: Office of Assessment and Evaluation</li><li>Linux: sed Insert a Newline Into the RHS of a Substitution</li><li>Microsoft PowerPoint 2007: Narrating a Slide</li><li>Ubuntu: Deleting Undeletable Files In the Trash</li><li>Linux: Remove All Digits/ Input From Inputs</li><li>SQL: Create a MySQL DocDB Databse</li><li>Linux Gnome: Screens and Graphics</li><li>Linux Xfce: Adjust keyboard settings</li></ul>
jQTouch handles every other tag normally, it is just the anchors that have ceased to function as intended by being placed inside this form. Can I keep using update panels here or will it inevitably break? Is there a work-around? Or am I approaching the problem incorrectly?
Keep in mind I want to retain the AJAXical animations produced by jQTouch. If you find that I am unclear or you would like to see more code (I only included what I believe to be necessary), please let me know.
Bonus points if you can tell me how to get jQTouch to replace the ugly the ASP.NET button control with an iPhoney button. :)
I think you are going to have to do a ton of hacks to get ASP.Net working with jqtouch with update panels, as you are going to be fighting the JavaScript inserted by ASP.Net with the JavaScript that jqtouch inserts. In your example all your links are going to the same anchor (#article). To do this in a jQtouch kind of way, you would have all the the links going to '#' and handle the tap of the articleLinkClass and then adjust as you need to.
$('.articleLink').tap(function()
{
var id = $(this).val('id');
// Pseudo CODE HERE FOR Setting up the article based on id... E.g.
$.json(jsonServiceUrl, { article_id: id }, function(data)
{
$('#article data).html(data);
});
jQt.goTo('article'); // Display the article page...
});
The iPhoney buttons are created in jQtouch as 's with their class as "whiteButton", i.e.:
<a id="myTestButton" class="whiteButton">Test Button</a>
Hope this helps...