I have this div which is hidden originally:
<div id="loading" class="window">
<img src="../Images/test.gif" />
</div>
How can I call this div to be shown while a thread is running
Thread thread = new Thread(test);
thread.Start()
private void test()
{
//code to see div
}
edit: I want the div to appear on top of the page so user wont be able to click on anything else
add runat="server" attribute inside div. by this div will work like server control and you can access this in code behind and add attribute
private void test()
{
loading.Attributes.Add("style", "display:block;");
}
UPDATE
Remove the display:none from the class and replace the div with an ASP.NET control:
<asp:Panel ID="loading" CssClass="window" runat="server" Visible="false">
<img src="../Images/test.gif" />
</asp:Panel>
Then:
private void test()
{
loading.Visible = true;
}
add runat="server" to your div, then access it in the code like: this.yourDivId and you can show it like this.yourDivId.Visible = true;
Related
So I have an button that generates a control when clicked. It's nested inside an update panel inside a div, that will create a scroll bar when it overflows in the y-direction. Currently, when I click the button and it's already overflowing, the control will be created, though it will not scroll to it. So it seems like nothing happened at all. I want the scroll bar to roll down to where the control is created so it is more user-friendly.
I've tried Page.SetFocus(control) and control.Focus(), but both don't work. I've look up other posts but they don't quite solve the problem as my generated control is inside an updatePanel.
<!-- add button and dynamic control area -->
<asp:Button ID="addStreamButton" runat="server" Text="+" OnClick="AddStreamButton_Click" Width="30px" Height="30px" Tooltip="add new stream"/>
<div class="col-sm-6">
<asp:UpdatePanel runat="server" ID="updatePanelPlaceholder" ChildrenAsTriggers="false" UpdateMode="Conditional"
style="width:650px; height:550px; overflow-y:auto; overflow-x:hidden">
<ContentTemplate>
<div class="row">
<asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addStreamButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<script type="text/html">
function scrollToControl(controlName) {
document.getElementById(controlName).scrollIntoView();
}
</script>
</div>
protected void AddStreamButton_Click(object sender, EventArgs e)
{
var userControl = (DataStreamSelector)Page.LoadControl("~/DataStreamSelector.ascx");
userControl.ID = "DynamicControl" + ControlCount;
ControlCount++;
ph1.Controls.Add(userControl);
//Page.Focus(userControl);
Page.SetFocus(userControl);
}
You need to call it on the client side. Add this AddStreamButton_Click instead of the focus code:
ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", "<script>scrollToControl('" + userControl.ID.ToString() + "');</script>", false);
That will call your scrollToControl method you already have defined.
I'm trying to do a simple thing with jQuery.
There's a button called showDiv to show or hide a search div and it's working perfectly.
But inside the div, I have text and a button to search, after I've shown the div, assuming someone has typed some text in TextBox1 to search for.
However, if I type in TextBox1 and click searchButton, the div goes into the hide position.
I think this is because of the page reloading, but I don't know how I fix it.
This is my code:
<script type="text/javascript">
$(document).ready(function () {
$('#<%=showDiv.ClientID%>').click(function (evt) {
$("#<%=myDiv.ClientID%>").slideToggle("slow");
evt.preventDefault();
});
});
</script>
<asp:Button ID="showDiv" runat="server" Text="Show/Hide Div" />
<br />
<br />
<div id="myDiv" runat="server" style="display:none">
<asp:Button ID="searchButton" runat="server" Text="Serach Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
Updated:
Note: Button searchButton must not have a click method
<asp:Button ID="searchButton" runat="server" Text="Serach Button" />
Add a temp button and make it hide by setting style to display:none :
<asp:Button ID="btnInvisible" runat="server" style="display: none"
OnClick="btnInvisible_Click" />
And in jQuery:
<script src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=searchButtin.ClientID%>').click(function (e) {
$('#<%=btnInvisible.ClientID%>').click();
e.preventDefault();
});
});
</script>
Click method in server-side:
protected void btnInvisible_Click(object sender, EventArgs e)
{
//... code for searching...
}
if you want to use asp control must be manage the postback and toggle method in server side
add on click method to showDiv button and write this code
<asp:Button ID="showDiv" runat="server" CssClass="showDiv" Text="Show/Hide Div" OnClick="showDiv_Click"/>
and server side code is
protected void showDiv_Click(object sender, EventArgs e)
{
if (myDiv.Style["Display"] == "none")
{
myDiv.Style["Display"] = "block";
}
else
{
myDiv.Style["Display"] = "none";
}
}
and for the page load method in server side code must be
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack){
myDiv.Style["Display"] = "none";
}
}
if you must use thr jquery method it's better use the html button and manage it'display from jquery
and another approach is in the Search button click method write this code
<asp:Button ID="searchButton" runat="server" Text="Serach Button" OnClick="searchButton_Click" />
protected void searchButton_Click(object sender, EventArgs e)
{
myDiv.Style["Display"] = "block";
}
and set display property in the page load method
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack){
myDiv.Style["Display"] = "none";
}
}
I am trying to disable/enable a button of the parent window from the child window.
The following is a snippet from the parent page.
<ajaxToolkit:ModalPopupExtender ID="mpeTest" runat="server"
CancelControlID="btnClose" PopupControlID="pnl1" TargetControlID="showMpe"/>
<asp:Panel ID="pnl1" runat="server" >
<ContentTemplate>
<iframe id="ContentIframe" runat="server">
<p>Your browser does not support iframes.</p>
</iframe>
</ContentTemplate>
<p class="submitButton">
<asp:Button ID="btnClose" runat="server" Text="Close" />
<asp:Button ID="btnTest" runat="server" Text="EnableDisable" />
</p>
</asp:Panel>
In the child page that is loaded in the iframe, I have a grid view with LinkButtons. I am attempting to get one of these LinkButtons to disable/enable the btnTest from the parent window.
I have tried many things but I can't seem to figure this out...
for example:
<script type="text/javascript" >
$(document).ready(function() {
jQuery('[id$="linkButtonDisable"]').click(function() {
window.parent.opener.document.getElementById("btnTest").disabled = true;
});
});
</script>
Can anyone please help me out. I am fairly new to this
Maybe you should try something like this...
$("#<%=linkButtonDisable.ClientID %>").click(function() {
//Option N#1 HTML Attribute
$("#<%=btnTest.ClientID %>").attr("disabled","disabled");
//Option 2 With jQueryMobile integration, the same it supposed to work if your using bootstrap, but I ignore the css class for disabling an element
$("#<%=btnTest.ClientID %>").addClass("ui-disabled");
//Also if you want to toggle states between disable/enable maybe this could work either...
var id = $("#<%=btnTest.ClientID %>");
var state = id.attr("disabled");
//Dunno if it's needed to catch if disabled attr it isn't set
if(state == "disabled") {
id.removeAttr("disabled");
} else {
id.attr("disabled","disabled");
}
});
Hope this help!...
I am working on a ASPX project with .VB in the code behind. The goal is to have two divs hidden when the page loads. Then when the user clicks the "No" radio button it will display the hidden div under it. The Radio buttons are asp List Items.
The code below works but on page load the divs are visible. I'm assuming it is either my VB code or the JS code not hiding on page load.
Here's the VB code behind.
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
For Each li As ListItem In rbPickUpOnTime.Items
If li.Value = "Y" Then
li.Attributes.Add("onclick", "javascript:hidePickup();")
End If
If li.Value = "N" Then
li.Attributes.Add("onclick", "javascript:showPickup();")
End If
Next
For Each li As ListItem In rbDeliveryOnTime.Items
If li.Value = "Y" Then
li.Attributes.Add("onclick", "javascript:hideDelivery();")
End If
If li.Value = "N" Then
li.Attributes.Add("onclick", "javascript:showDelivery();")
End If
Next
Here's the JavaScript:
function hidePickup() {
document.getElementById('pnlPickupNo').style.display = 'none';
};
function showPickup() {
document.getElementById('pnlPickupNo').style.display = 'block';
};
function hideDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'none';
};
function showDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'block';
};
Finally here's one of the ASPX panels it needs to show/hide:
<div class="container" style="margin-top: 20px;">
<div class="centerContainer" style="width: 230px;">
<label class="Emphasis">I can pickup on time </label>
<asp:RadioButtonList ID="rbPickUpOnTime" runat="server"
RepeatDirection="Horizontal"
Style="margin-left: 60px;" TabIndex="2" AutoPostBack="false">
<asp:ListItem Text="Yes" Value="Y" Selected="True" />
<asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>
</div>
<asp:Panel ID="pnlPickupNo" runat="server" >
<div class="centerContainer ui-widget-content" style="width: 230px;">
<label>If No, ETA to pickup </label>
<table style="margin-left: 15px;">
.....
</table>
</div>
Any suggestions?
If you are using .Net 4.0 or higher , you can use the Client ID Mode Static to generate the same ID's in the server side.
If you are not mentioning any thing, then you have use ClientID's instead of directly using ID
For example, if your id is 'pnlPickupNo' , then you can client ID's by using below syntax:
<%# 'pnlPickupNo'.ClientID %>
Hope this helps..
If you don't have to use JavaScript, you could make an OnClick event in your RadioButtonList
OnSelectedIndexChanged="yourBehindCodeFunction"
and make add runat="server" and an ID to all of your div's, then grab the id in the behind code and set visible to false
HTML
div class="centerContainer ui-widget-content" style="width: 230px;" runat="server" ID="test">
Behind-Code
var list = sender as RadioButtonList;
if(list.SelectedValue.Equals("No"))
test.Visible = false;
If you are using JavaScript, you either need to make all of your controls static to use document.getElementById or you could use JQuery and call each by
$('#<%= yourControlId.ClientID %>').hide()
The question was: How do I make the divs hide onload?
This is a work project. I was told to use JavaScript to remove the need for a callback in the code behind.
Here's the simple answer I came up with:
JavaScript:
function hideDiv() {
document.getElementById("pnlPickupNo").style.display = 'none';
document.getElementById("pnlDeliveryNo").style.display = 'none';
};
Markup:
body tag onload="hideDiv()"
As you can see it is a simple pure JavaScript solution. It works and saves me time.
Thanks everyone for your suggestions.
I've designed a web page in asp.net. And in that page i placed html control too like <a> & <div>. I have written one java script function which is hiding the <div> when i'm clicking on the <a> tag. Its working fine. But when i'm clicking on the asp.net button then page refresh occur again. And it is loading my previous design of the page. I set the display:none of the <div> at the design time. so it is hiding my <div> again when occuring any other server side event. And i don't want let it happen.
Javascript function-
<script language="javascript" type="text/javascript">
function toggle5(showHideDiv, switchTag) {
try {
'<%Session["temp"] = "'+more+'"; %>';
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchTag);
if (ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = 'More';
}
else {
ele.style.display = "block";
imageEle.innerHTML = 'Less';
}
}
catch (err) {
alert("Error");
}
}
</script>
html code is-
<div id="divSearch" style="float:left;height:100%;width:100%;">
<span style="float:right;height:27px;"><a id="displayText" href="#" onclick="javascript:toggle5('toggleText', 'displayText');">More</a></span>
</div>
<div id="toggleText" style="display:none;height:100%;width:100%;">
<div id="divCalls" style="width:24%;float:left;height:30%;">
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</div>
</div>
C#.net code of the Checkbox-
protected void chkNoCall_CheckedChanged(object sender, EventArgs e)
{
if (chkNoCall.Checked == true)
{
txtNoCall.Enabled = true;
}
else
{
txtNoCall.Enabled = false;
txtNoCall.Text = "";
}
}
How to solve this problem?
thanks
put this data inside the updatepanel like this
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</ContentTemplate>
</asp:UpdatePanel>
hope this help
In your button click event, return false. this will prevent postback.
Use ajax to get the server side data instead of submitting the page.
Try one of the following:
remove runat=server from the component (a component with runat=Server always submits a form.
use standard html controls
use javascript for html controls
it it's a component with autopostback feature; make autopostback=false