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.
Related
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 want when user click on button,disable it and after do work enable it from code behind
i use below code but disable it and then enable it,because page load again and doesn't call button event click from code behind
ASPX
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
<div>
<asp:Button runat="server" ID="btnReg" OnClick="reg_Click" OnClientClick="disableButton();" Text="Click On Me..." />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnReg" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
JavaScript
function disableButton()
{
document.getElementById("<%=btnReg.ClientID%>").disabled = true;
}
Code behind
protected void reg_Click(object sender, EventArgs e)
{
//do work
btnReg.Enabled = true;
}
Disable your button using javascript as shown:
document.getElementById("<%=btnReg.ClientID%>").disabled = true;
Enable it from codebehind as shown:
//after doing some logic
btnReg.Enabled = true;
UpdatePanel.Update();
For info read this
$(function() {
function doosomething()
{
document.getElementById("<%=btnReg.ClientID%>").enabled= true;
}
};
Call this function as soon as you disable the button from your codebehind as shown:
System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "Script", "doosomething();", true);
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;
I call the following javascript function in an update panel which refresh my page although it is in an update panel!!
<script type="text/javascript" language="javascript">
function get_emp_num(source, eventArgs) {
var txt_emp_num = "<%= txt_RequestEmpNum.ClientID %>";
document.getElementById(txt_emp_num).value = eventArgs.get_value();
__doPostBack("<%=txt_RequestEmpNum.ClientID %>");
}
function get_person_num(source, eventArgs) {
var txt_person_num = "<%= txt_RequestPersonNum.ClientID %>";
document.getElementById(txt_person_num).value = eventArgs.get_value();
__doPostBack("<%=txt_RequestPersonNum.ClientID %>");
}
</script>
I don't want this script to change the partial post back behavior of my update panel .how to do that ?
What is your postback control and is it setup as an async trigger on the update panel? Based on the code you posted, I suspect that txt_RequestEmpNum and txt_RequestPersonNum are text boxes. Those controls don't natively support postbacks. What you need is a hidden button on the page that your javascript will "click" to send the postback. Something like this:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txt_RequestEmpNum" runat="server" />
<asp:TextBox ID="txt_RequestPersonNum" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<div style="display: none;">
<asp:Button id="Button1" runat="server" OnClick="Button1_Click" />
</div>
<script>
function get_emp_num(source, eventArgs) {
// I am unsure what your intent was with the code here so I removed it
__doPostBack("<%=Button1.UniqueID %>", "");
}
function get_person_num(source, eventArgs) {
// I am unsure what your intent was with the code here so I removed it
__doPostBack("<%=Button1.UniqueID %>", "");
}
function refresh_using_jquery() {
__doPostBack($('#<%=Button1.ClientID %>').attr('name'), '');
}
</script>
If you're looking to not do a full page postback then you'll want to implement a solution that uses AJAX. I would go with using jQuery because it makes using AJAX somewhat easier (in my opinion, anyway).
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