I have a < div> with < asp:ListView>- with results of searching. I want to hide this div, and show it when ListView will be full (or better - when this part of code will be completed)
lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
How can I do this? Meanwhile when this < div> with listview will be not visible, I want to show another div with information "Loading". When ListView will be ready, < div> with results will show up, and < div> with "loading" will be hidden.
If you are using an Update panel you can acheive with code similar to below. This will show a modal panel over the page while it is updating.
You could modify the start and end request methods to also hide / show the div containing the list view
note this uses jQuery.
<div id="workingDialog" style="display: none" title="Please wait">
<p>
Loading Data
</p>
</div>
<div id="listViewDiv" style="display:none">
//List View
</div>
<script>
var _workingDialog;
//Page Load event
function pageLoad(sender, args) {
//Register events
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
_workingDialog = $('#workingDialog');
}
function beginRequest(sender, args) {
$(_workingDialog).dialog({ modal: true });
$('#listViewdiv').hide();
}
function endRequest(sender, args) {
$(_workingDialog).dialog('close');
$('#listViewdiv').show();
}
</script>
http://wraithnath.blogspot.co.uk/2011/12/showing-modal-dialog-while-page-is.html
Declare your divs like:
<div id="searchResultDiv" runat="server" visible="false">...</div>
<div id="loadingDiv" runat="server">...</div>
The runat="server" makes them accessible in your asp.net code behind.
Then in your code you can change their properties, in this instance change the Visibility:
lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
searchResultDiv.Visible = true;
loadingDiv.Visible = false;
depending on your list you can make a method that ads 2 css classes, one for when the list is full and one for the other case. so in one css you will have display: none; and in the other display: inline-block;
From my understanding you could use css? and set display:none and when your condition is met change display to block/show?
Hope this helps: http://webdesign.about.com/od/dhtml/a/aa101507.htm
add runat="server" to the div, then you can set visible = false/true
Use runat="server" attribute in your div
Then depending on any condition you can show or hide div
<div runat="server" id="myDiv">
var result = getSearchResult();
if(result!= null){
myDiv.Visible = true;
lvSearchResult.DataSource = result;
lvSearchResult.DataBind();
}
Use AJAX with UpdatePanel , no? that will work..
Related
I have a user control that has a text box and a button. I have repeated this user control n times using for loop in my main.aspx page
for (int i = 0; i < 5; i++)
{
testcontrol newControl = (testcontrol)LoadControl("~/testcontrol.ascx");
newControl.ID = "myControl-" + i.ToString();
HtmlButton btnGenerateReport =newControl.FindControl("btnGenerateReport") as HtmlButton;
btnGenerateReport.ID = "button_generate-" + i.ToString();
btnGenerateReport.ServerClick += BtnGenerateReport_Click;
}
my testcontrol.ascx looks like this
<div class="row">
<div class="col-md-8 blockMe">
<input runat="server" class="form-control" />
</div>
<div class="col-md-4">
<button type = "button" id="btnGenerateReport" class="btn btn-default btnGenerateReport" aria-label="Left Align" runat="server">
<span class="fa fa-cog" runat="server" id="gennerateReportSpan" aria-hidden="true"></span>
</button>
<br />
</div>
On ButtonClick I am trying to show spinning icon so that i can do some background process. I have subscribed to the HtmlButton OnServerClick method in mainpage.aspx
private async void BtnGenerateReport_Click(object sender, EventArgs e)
{
System.Web.UI.HtmlControls.HtmlControl tt = ((System.Web.UI.Control)sender).Parent.FindControl("gennerateReportSpan") as System.Web.UI.HtmlControls.HtmlControl;
tt.Attributes.Clear();
tt.Attributes.Add("class", "fas fa-spinner fa-spin");
Task taskA = Task.Factory.StartNew(() =>
{
Task.Delay(5000).Wait();
}).ContinueWith((x) =>
{
tt = ((System.Web.UI.Control)sender).Parent.FindControl("gennerateReportSpan") as System.Web.UI.HtmlControls.HtmlControl;
tt.Attributes.Add("class", "fa fa-cog");
});
}
I am trying to achieve the spinning effect by changing the attributes of the htmlelement. I am able to set new class i.e spinning but I am not able to reset it once the task is done. Is there any better way to do it ?
This way you can never make it back to non-spinning because when your thread is finish you don't have no way to inform the client the way you make it.
I can think and suggest two ways
first way - the ajax call
Ok, this is the most common way, to make an ajax call to a aspx file and wait for the return. You can find many example for this...
second way - your way
You make your calculations call inside the page with a flush just before the long running function - when the calculations finish the page will continue to render the rest of it and change back the icon.
Here is a working example.
On aspx page
<form id="form1" runat="server">
<div>
<h1 id="changeme" style="color:blue">Header Test</h1>
</div>
</form>
<%Response.Flush();%>
<%GenerateReport();%>
<script>
document.getElementById("changeme").style.color = "red";
</script>
on page behind
public void GenerateReport()
{
// simulate the delay
Thread.Sleep(5000);
}
Last words
avoid the async on this web pages, is not desktop programming that you don't want to hold the render of the user interface. Here the user is on another computer and the call to you its a new thread by default, a thread to another computer. So all that is done with out any extra new thread creation.
In the design of web form I have four divs
divGeneralDetails
divLanguageDetails
divLinkDetails
divOperationalDetails
Divs mentioned above are displayed vertically in the form.
My question is.
Depending on value in query string, i will have to change the order in which divs are displayed.
In my Page_Load event
string FirstDiv = Request.QueryString["id"];
if value of FirstDiv is equal to "General"
then order should be
- divGeneralDetails
- divLanguageDetails
- divLinkDetails
- divOperationalDetails
if value of FirstDiv is equal to "Operational"
then order should be
- divOperationalDetails
- divGeneralDetails
- divLanguageDetails
- divLinkDetails
How do I set this in Page_Load event. Any help will be highly appreciated.
Thanks
You can use Panel.
Example:
<asp:Panel ID="panelMain" runat="server">
<asp:Panel ID="divGeneralDetails" runat="server"></asp:Panel>
<asp:Panel ID="divLanguageDetails" runat="server"></asp:Panel>
<asp:Panel ID="divLinkDetails" runat="server"></asp:Panel>
<asp:Panel ID="divOperationalDetails" runat="server"></asp:Panel>
</asp:Panel>
And then rearrange it add code behind:
panelMain.Controls.Clear();
panelMain.Controls.Add(divOperationalDetails);
panelMain.Controls.Add(divGeneralDetails);
panelMain.Controls.Add(divLanguageDetails);
panelMain.Controls.Add(divLinkDetails);
If you want to do it server-side, then for good working of ViewState (if it is being used) the Divs would have to be added in the desired order using Page.Controls.Add() in the PreInit event of the Page. Any later may throw off ViewState.
A totally different approach would be to use jQuery in the browser to manipulate the Divs, see the snippet below for one way to achieve this:
function moveOperationalToTop() {
var specialId = "divOperationalDetails";
var $main = $("#divMain");
var $divs = $main.find('div');
$main.empty();
$divs.each(function() {
if (this.id == specialId) $main.append($(this));
});
$divs.each(function() {
if (this.id != specialId) $main.append($(this));
});
}
#divOperationalDetails {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divMain">
<div id="divGeneralDetails">divGeneralDetails</div>
<div id="divLanguageDetails">divLanguageDetails</div>
<div id="divLinkDetails">divLinkDetails</div>
<div id="divOperationalDetails">divOperationalDetails</div>
</div>
<button onclick="moveOperationalToTop()">Move Operational to top</button>
I have a 2 pages.
Master Page
Default page (inherited from master page)
I have a menu in the master page & I need to click some menu item & when it's clicked I need some element (span) to be visible in default page.
There's no error in below code, but the expected result did not happen.
MasterPage:
<li id="lgbtn" style="float:right">Login</li>
<script>
$('#lgbtn').live('click', function (e) {
$('span4').show();//<-- this span is in Default page
});
</script>
Default.aspx:
<div class="span4" style="visibility:hidden">
<form name="form-area" class="form-area" runat="server">
//Some content here
</form>
</div>
In JQuery if you want to get element based on class then you have to write syntax like below
$('.ClassName')
and to get element based id then
$('#ControlId')
Jquery's .show is the same as saying display: block;
In order to solve this you could change it using
$('.span4').css("visibility" , "visible");
Or you could change the html to be as follows:
<div class="span4" style="display: none;">
<form name="form-area" class="form-area" runat="server">
//Some content here
</form>
</div>
1)you missed dot for class
2)you visiblity style so show didn't work in that case so please use css style visibility visible
$('.span4').css("visibility" , "visible");
try this
$('#lgbtn').live('click', function (e) {
if($('.span4').is(":visible")){
$('.span4').css("visibility" , "hidden");
}
else{
$('.span4').css("visibility" , "visible");
}
});
another way
<div class="span4" style="display:none">
$('#lgbtn').live('click', function (e) {
if($('.span4').is(":visible")){
$('.span4').show();
}
else{
$('.span4').hide();
}
});
simplest way to do you also change in html
<div class="span4" style="display:none">
$('#lgbtn').live('click', function (e) {
$('.span4').toggle();
});
first you know about what is the difference between visibilty and display in css
visibility: hidden hides the element, but it still takes up space in
the layout.
display: none removes the element completely from the document. It
does not take up any space, even though the HTML for it is still in
the source code.
You can see the effect of these style properties on this page. I
created three identical swatches of code, and then set the display and
visibility properties on two so you can see how they look.
Try to use that code:
$('#lgbtn').live('click', function (e) {
$('.span4').show();//<-- this span is in Default page
});
use
like
<script>
$('#lgbtn').live('click', function (e) {
$('.span4').css("visibility" , "visible");
});
</script>
DEMO
UPDATED DEMO WITH toggle()
For toggle() use
toggle
html
<li id="lgbtn" style="">Login</li>
<div class="span4" style="display:none">asds</div>
JS
$( document ).ready(function() {
$( "#lgbtn" ).click(function() {
alert("clicked");
$('.span4').toggle();
});
});
so I am using javascript to validate an address field simply to pull the zip code off the end.
I have two asp:Labels that I show and hide to inform the user. It works great, the labels show when needed and the validation works how I want it, the problem comse when I try to hide them. One of the labels shows and hides just fine, but whenever I try to hide the other the script breaks
<script>
function isvalid()
{
var zip = MainContent_tbx_Appt_Address.value.slice(-5);
if (zip == "") {
MainContent_lbl_Add_validate2.hidden = true;
MainContent_lbl_Add_Validate.hidden = false;
}
else if (!zip.match('[0-9]{5}')) {
//MainContent_lbl_Add_validate.hidden = true;
MainContent_lbl_Add_validate2.hidden = false;
}
else
{
//MainContent_lbl_Add_validate.hidden = true;
MainContent_lbl_Add_validate2.hidden = true;
}
}
</script>
<asp:Label ID="lbl_Add_Validate" style="z-index:100;" Name="lbl_Add_Validate" DataPoint="dp_Add_Validate" runat="server" hidden="true" Text="Address is required"></asp:Label>
<asp:Label ID="lbl_Add_validate2" style="z-index:100;" Name="lbl_Add_Validate2" DataPoint="dp_Add_Validate2" runat="server" hidden="true" Text="Invalid address format"></asp:Label>
<br />
<asp:TextBox ID="tbx_Appt_Address" onblur="isvalid()" style="z-index:100;" Name="tbx_Appt_Address" DataPoint="dp_Appt_Address" runat="server" Rows="4" TextMode="MultiLine" Height="65px" Width="200px" value="Address" onFocus="if (this.value == this.defaultValue) { this.value = ''; }" placeholder="Address">Address</asp:TextBox>
this is my code in my asp file and when it hits the client side it spits out this
<span id="MainContent_lbl_Add_Validate" name="lbl_Add_Validate" datapoint="dp_Add_Validate" hidden="true" style="z-index:100;">Address is required</span>
<span id="MainContent_lbl_Add_validate2" name="lbl_Add_Validate2" datapoint="dp_Add_Validate2" hidden="true" style="z-index:100;">Invalid address format</span>
<br/>
<textarea name="ctl00$MainContent$tbx_Appt_Address" rows="4" cols="20" id="MainContent_tbx_Appt_Address" datapoint="dp_Appt_Address" value="Address" onfocus="if (this.value == this.defaultValue) { this.value = ''; }" placeholder="Address" onblur="return isvalid()" style="height:65px;width:200px;z-index:100;">Address</textarea>
everything else works as long as I have MainContent_lbl_Add_validate.hidden = true; commented out, but if I have ether of them run it breaks
In aspx pages if you are not using jQuery, try to get elements using document.getElementById('MainContent_tbx_Appt_Address'), and if you are using microsoft ajax frameworks you can use $get('MainContent_lbl_Add_validate'), these are the right ways to refer elements on DOM.
Editing: ok, looking your code with more accuracy I saw that you made a mistake on span ids, specifically at 'V' char. Check the case on ids and your script will run.
If you hide an element that has "runat=server", you might think that ASP will render the control styled so that it is invisible-- meaning you can later unhide it using Javascript. That's not how it work. If you set hidden=true, the element isn't rendered at all. Your Javascript is gagging on the reference to the missing element and halting execution, so your valiator code doesn't ever get a chance to run.
To render a hidden element, mark it up like this:
<asp:Label ID="lbl_Add_Validate" style="z-index:100;" Name="lbl_Add_Validate" DataPoint="dp_Add_Validate" runat="server" style="visibility: hidden" Text="Address is required"></asp:Label>
Personally I would let JQuery handle this, which you can do in .aspx:
$(function () {
$('#tbx_Appt_Address').blur(function(){
var text_input = $('tbx_Appt_Address').val();
//additional logic with conditions
if (text_input=='')
{
$('lbl_Add_Validate').show();
}
//etc etc
});
});
I am using asp.net ajax control toolkit 1.0 on vs 2005. I am using the collapseablePanel and AlwaysVisibleControlExtender control. When I use these, I notice that it my panel flashes for a few seconds before it is hidden.
To avoid this, I have decided to place it in a div to make it hidden.
I want it shown when I use the control.
Here is what I have:
<div id="menuContent" style="display:none">
<asp:Panel ID="pnlAddNewContent" runat="server" Width="300px">
....//the panel stuff here
</asp>
</div>
and the javascript for this in the header is:
function showdiv() {
if (document.getElementbyId) {
document.getElementbyId('menuContent').style.visibility = 'visible';
}
}
(its for IE 6 for I don't care about compatability)
and body onload=onLoad="showdiv();"
It correctly hides upon load, but I cannot get it to show again. Does anyone have solutions?
You are trying to show it by setting the visibility but you hid it using display.
You actually want something like this:
document.getElementbyId('menuContent').style.display = 'block';
Maybe this is what you're looking for
Javascript function:
function showHide(descriptor)
{
var layer = document.getElementById(descriptor);
if (layer != null) {
if (layer.style.display != 'none') {
layer.style.display = 'none'; //hide layer
} else {
layer.style.display = 'block';//show layer
}
}
}
HTML:
<img id="imgInfo" src="info.gif" border="0" />
<div style="display: none;" id="divInfo">some info</div>
Basically had to use Visibility hidden and visible attributes as these work best on a collapsePanel