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​​
Related
I have an aspx page that contains an ASPxComboBox. When this combo is changed after the page loads the div hides/unhides fine. In my case I load existing values from the database. I need to hide/show div based on these loaded values. If I populate the dropdown with "None" I want to hide the divs. Thanks.
< script type = "text/javascript" >
function OnSizeChanged(cbSide) {
const str = cbSide.GetText().toString();
if (str.includes('None')) {
bottomtext.style.display = "block";
lblbottomtext.style.display = "block";
} else {
lblbottomtext.style.display = "none";
bottomtext.style.display = "none";
}
}
</script>
<dx:ASPxComboBox ID="cbSide" runat="server" Width="280" ValueType="System.String">
<Items>
<dx:ListEditItem Text="DXF" Value="DXF" />
<dx:ListEditItem Text="None" Value="None" />
</Items>
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnSizeChanged(s); }" />
<ValidationSettings RequiredField-IsRequired="true" Display="Dynamic">
<RequiredField IsRequired="True"></RequiredField>
</ValidationSettings>
</dx:ASPxComboBox>
<div id="lblbottomtext" runat="server">
<dx:ASPxLabel ID="lblBST" runat="server" Text="Bottom Side Text:"></dx:ASPxLabel>
</div>
<div id="bottomtext" runat="server">
<dx:ASPxMemo ID="txtBottom" runat="server" Height="71px" Width="280px"></dx:ASPxMemo>
</div>
I have the following code:
<asp:GridView ID="GridViewProducts" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="GridViewProducts_SelectedIndexChanged" OnRowDataBound="GridViewProducts_Bound" CssClass="gridviewproducts"
DataKeyNames="ID">
<asp:BoundField DataField="id" />
<asp:BoundField DataField="nAME" />
<asp:TemplateField>
<ItemTemplate>
<input type="button" id="btnPrint" value="Print" runat="server" onserverclick="Button_ShowDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
and my javascript :
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>Bestilling</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="Content/Site2.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
And the html:
<div> ... some info to be printed ... </div>
This works if the button is outside the gridview, but now since it's performing some server side action, it's not working. I'm not getting any error messages either, it's simply just doing nothing.
Take a look at the generated HTML. You will see that the ID of button btnPrint has been renamed to something like GridViewProducts_btnPrint_0 because there are more that one in a GridView (or Repeater etc).
Better bind on a class name in the GridView, so give your buttons a class name.
<input type="button" id="btnPrint" class="PrintButton" value="Print" runat="server" />
And then bind the click to all the buttons with that class inside the GridView.
<script type="text/javascript">
$("#<%= GridViewProducts.ClientID %> .PrintButton").click(function () {
//do your stuff
});
</script>
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";
}
}
So I am trying to enable text box if other option is selected from dropdown list
i.e when i select the other option without clicking any button it shows the textbox
code is listed below with js file but its not working need help with this
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$('#type_').change(function () {
if (this.value == 'other') {
$('#other_type').css('display', 'block');
}
else {
$('#other_type').css('display', 'none');
}
});
</script>
<div>
<asp:Label ID="Label1" runat="server" Text="Type : "></asp:Label>
<asp:DropDownList ID="type_" runat="server" style="margin-left: 0px">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
<asp:ListItem>other</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="other_type" runat="server" style="margin-left: 33px; display:none" Width="157px"></asp:TextBox>.......
First, wrap the code with $(function(){}); to bind the click after the page loads.
You're not properly selecting elements. ASP .NET changes the ID property, so you have to use <%= ControlName.ClientID %> to get the generated ID.
Or give a CssClass to the controls.
$(function(){
$('#<%= type_.ClientID %>').change(function () {
if (this.val() == 'other') {
$('#<%= other_type.ClientID %>').css('display', 'block');
}
else {
$('#<%= other_type.ClientID %>').css('display', 'none');
}
});
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