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";
}
}
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.
In content page I have one textbox and one button. On button click event I want to display one gridview and this gridview has some javaScript for responsive behaviour. from Gridview I have also use ModelPopupExtender (Ajax) in content page.
Page directives :
<%# Page Title="" Language="C#" MasterPageFile="~/Admin.Master" AutoEventWireup="true"
CodeBehind="UpdateUser.aspx.cs" Inherits="WirelessLCDdisplay.AdminPages.UpdateUser" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
JavaScript :
<script src="../JavaScript/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- // building select nav for mobile width only -->
$(function () {
// building select menu
$('<select />').appendTo('nav');
// building an option for select menu
$('<option />', {
'selected': 'selected',
'value': '',
'text': 'Choise Page...'
}).appendTo('nav select');
$('nav ul li a').each(function () {
var target = $(this);
$('<option />', {
'value': target.attr('href'),
'text': target.text()
}).appendTo('nav select');
});
// on clicking on link
$('nav select').on('change', function () {
window.location = $(this).find('option:selected').val();
});
});
// show and hide sub menu
$(function () {
$('nav ul li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(150);
}
);
});
//end
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no">
<link href="../css/basic.css" rel="stylesheet" type="text/css" />
<script src="../JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.responsivetable.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.responsivetable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
setupResponsiveTables();
});
function setupResponsiveTables() {
$('.responsiveTable1').responsiveTable({
staticColumns: 2,
scrollRight: false,
scrollHintEnabled: true,
scrollHintDuration: 3000
});
}
</script>
TextBox and Button :
<p class="contact">
<label for="username">
Username</label></p>
<asp:TextBox ID="txtUname" runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorusername" runat="server" ErrorMessage="User Name required"
Text="*" ControlToValidate="txtUname" ForeColor="Red">
</asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="btnUserDetails" runat="server" Text="Button"
onclick="btnUserDetails_Click1" />
<asp:Button ID="btnReset" runat="server" Text="Reset" class="buttom" CausesValidation="False"
OnClick="btnReset_Click" />
Code Behind onClick Event :
protected void btnUserDetails_Click1(object sender, EventArgs e)
{
BindGridData();
}
private void BindGridData()
{
con.Open();
SqlCommand cmd = new SqlCommand("Select Username,FirstName,LastName,Email,PhNo,Designation,Department,RollId from tblEmployees where Username=#Username", con);
cmd.Parameters.AddWithValue("#Username", txtUname.Text);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
for (int intCount = 0; intCount < ds.Tables[0].Rows.Count; intCount++)
{
if ((Convert.ToString(ds.Tables[0].Rows[intCount].ItemArray[7])) == "0")
{
ds.Tables[0].Rows[intCount].ItemArray[7] = "User";
}
else
{
ds.Tables[0].Rows[intCount].ItemArray[7] = "Admin";
}
}
da.Fill(ds);
gvUserDetails.DataSource = ds;
gvUserDetails.DataBind();
}
**
My onClick="btnUserDetails_Click1" event is not fire
what is reason behind it??
Try changing onclick to OnClick
<asp:Button ID="btnUserDetails" runat="server" Text="Button"
OnClick="btnUserDetails_Click1" />
In asp.net there is a two type of button event 'onclick' and 'OnClick'.
onclick: This once fire javascript function.
OnClick: This one fire your code behind .CS sit server event if we add runat="server" tag on button.
NOTE: 1.On Click Event sends the request to the server and in response performs the action.
2. On Client Click is very similar to onclick function which we use to write in Javascript... that is it executes the statements in the
client side with out sending it to the server​​
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'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