Following is my code.can anyone please tell me how to handle keypress event in asp.net content page
<script type="text/javascript">
$(function () {
$('#txtdesc').keypress(function (e) {
var txt = $(this).val();
if (txt.length > 5) {
e.preventDefault();
}
});
});
<asp:TextBox ID="txtdesc" TextMode="MultiLine" runat="server" ></asp:TextBox>
$(function () {
$('#<%=txtdesc.ClientID %>').on("keypress", function (e) {
var txt = $(this).val();
if (txt.length > 5) {
alert('Hai');
e.preventDefault();
}
});
});
Use ClienID with your text box control because it is server control.
Asp.net changes the HTML Response on page generating. (for web controls) like this:
<input type="hidden" name="ctl00$txtdesc" id="**ctxxx_txtdesc**" />
so, you should use generated id attribute value by asp.net or a class attribute. like this:
$('#ctl00$txtdesc').on("keypress", (function (e) {
...
});
<asp:TextBox ID="txtdesc" TextMode="MultiLine" CssClass="**txtdesc**" runat="server" ></asp:TextBox>
$('.txtdesc').on("keypress", (function (e) {
...
});
Related
I want to check whether the TextBox is disabled or not.
If we try to click on the disabled TextBox. It should show an alert message.
This is my code with source http://jsfiddle.net/Alfie/2kwKc/ but in my case not working.
On MasterPage.master :
<asp: ContentPlaceHolder ID="head" runat="server">
</asp: ContentPlaceHolder >
<script type="text/javascript">
$("#txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
On Markup Default.aspx webpage:
<asp:TextBox ID="txDateRet" runat="server"
ReadOnly="true" BackColor="Yellow"
Width="300" CssClass="toUpper"
Enabled="false"></asp:TextBox>
#Update #1
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txDateRet").click(function () {
if ($(this).attr("readonly") == "readonly") {
alert($(this).attr("readonly"));
}
});
});
</script>
<asp:TextBox ID="txDateRet"
ClientIDMode="Static"
runat="server"
ReadOnly="true"
BackColor="Yellow"
Width="300"
CssClass="toUpper"
Enabled="false">
</asp:TextBox>
#Update #2
$(document).ready(function () {
$("#txDateRet").click(function () {
alert($(this).attr("readonly"));
});
});
#Update #3
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<input name="ctl00$ContentPlaceHolder1$txDateRet"
type="text" value="26/02/2019"
readonly="readonly"
id="txDateRet"
class="toUpper"
style="background-color:Yellow;width:300px;" />
</div>
</div>
There are may three reasons:
1- Because that code rendered before loading JQuery library so put that script before triggering click event.
2- Because that element is and ASP.Net element in a place holder, it may will get different ID that you can see it by inspecting it.
totally change the code like:
<asp: ContentPlaceHolder ID="head" runat="server">
</asp: ContentPlaceHolder >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
});
</script>
<asp:TextBox ID="txDateRet" ClientIDMode = "static" runat="server"
ReadOnly="true" BackColor="Yellow"
Width="300" CssClass="toUpper"
Enabled="false"></asp:TextBox>
3- Or that readonly prop will not get true after rendering it may will get readonly="readonly" so if (this.readOnly) will not work, it may should changed to if (this.readOnly == "readonly").
hope this answer give you the clue.
I think in webform we give the complete id of textbox with content place holder.
You can try this.
$("#head_txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
Long story short I need to have one dropdownlist (ddlGenres) hide until the user clicks "Genre" in ddlSearchOptions. To do this without a postback I made a simple script but in order for this script to work I needed to set ddlGenres' style to display:none. The problem is that after a postback ddlGenres hides again because of that property.
I need to figure out how to keep it visible after a postback.
<script type="text/javascript">
$(document).ready(function () {
$('#ddlSearchOptions').change(function (e) {
e.p
if (this.value == "Genre") {
$('#ddlGenres').show();
}
else {
$('#ddlGenres').hide();
}
});
});
</script>
<div class="jumbotron">
<h1>Find a book...</h1>
<p>
<asp:TextBox ID="txtFindBook" runat="server" CssClass="DefaultPageSearchBox"></asp:TextBox>
<asp:DropDownList ID="ddlSearchOptions" ClientIDMode="Static" runat="server">
<asp:ListItem>Keyword</asp:ListItem>
<asp:ListItem>Title</asp:ListItem>
<asp:ListItem>Author</asp:ListItem>
<asp:ListItem>Genre</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlGenres" runat="server" style="display:none" ClientIDMode="Static"></asp:DropDownList>
<asp:Button ID="btnFindBook" runat="server" Text="Search" OnClick="btnFindBook_Click" Height="36px" />
<p>Enter your search terms in the box above, then click "Search" to begin your search.</p>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
The condition you're writing in change event, just put it outside the event too. To run it on document ready:
$(document).ready(function () {
//check "ddlSearchOptions" initial value
if ($('#ddlSearchOptions').value == "Genre") {
$('#ddlGenres').show();
}
else {
$('#ddlGenres').hide();
}
//subscribe event handler
$('#ddlSearchOptions').change(function (e) {
e.p
if (this.value == "Genre") {
$('#ddlGenres').show();
}
else {
$('#ddlGenres').hide();
}
});
});
It feels so good to answer my own question though all of your help has led up to this.
What I did was simply add this:
if(<%=(Page.IsPostBack).ToString().ToLower()%>){$('.genre-list').show();}
You can also use this as a !IsPostBack statement.
if(<%=(Not Page.IsPostBack).ToString().ToLower()%>){$('.genre-list').show();}
JavaScript:
<script type="text/javascript">
$(document).ready(function ()
{
//check "ddlSearchOptions" initial value
if ($('.search-optins').value == "Genre")
{
$('.genre-list').show();
}
else
{
$('.genre-list').hide();
}
//subscribe event handler
$('.search-optins').change(function (e)
{
e.p
if (this.value == "Genre")
{
$('.genre-list').show();
}
else {
$('.genre-list').hide();
}
});
if(<%=(Page.IsPostBack).ToString().ToLower()%>){$('.genre-list').show();}
});
</script>
Drop Down Lists:
<asp:DropDownList ID="ddlSearchOptions" CssClass="search-optins" ClientIDMode="Static" runat="server">
<asp:ListItem>Keyword</asp:ListItem>
<asp:ListItem>Title</asp:ListItem>
<asp:ListItem>Author</asp:ListItem>
<asp:ListItem>Genre</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlGenres" CssClass="genre-list" runat="server" ClientIDMode="Static"></asp:DropDownList>
I have listed some things from a database in a datalist with a link tag. Look like this on front page.
ID= 21 something click me
<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
Show the Dialog
</td>
</ItemTemplate>
</asp:DataList>
When I click the click me link I want the popup box to show all the information on the product on ID=21. I know that I have to load some querystring when I click the html link, but I am stuck. This is what I have now:
$(document).ready(function () {
$('#contactFormContainer').hide();
$('#showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=deli_id");
$("#contactFormContainer").fadeToggle('slow');
});
});
</script>
Hope someone could help me
/Tina
You need to do an ajax call.
<script>
$(document).ready(function () {
$('#contactFormContainer').hide();
$('#showdialog2').click(function () {
var deli_id = $('#deli_id').text(); //get deli_id from some container
$.ajax({
url: "bekraeft.aspx?deli_id=" + deli_id, //send id to aspx page
cache: false
})
.done(function(html) { //retrive html from aspx page once ajax call is completed
$("#contactFormContainer").html(html); //load html into container
$("#contactFormContainer").fadeIn('slow'); //fade container in
});
});
});
</script>
You need to change a litle bit your code:
Change showDialog2 id for a class (so you are going to attach click listener to all element with that class)
Add a data attribute to the link, storing the deli_id
aspx:
<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
<a href="#" class="showdialog2" data-id='<%#Eval("deli_navn") %>'>Show the Dialog</a>
</td>
</ItemTemplate>
JS:
$(function () {
var clickedLink = $(this);
$('#contactFormContainer').hide();
$('.showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=" + clickedLink.attr("data-id"));
$("#contactFormContainer").fadeToggle('slow');
});
});
I am trying to show a loading div on button click, but it is not working at the moment.
Javascript :
<script type="text/javascript">
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Div:
<div id="loading" class="Loading" runat="server" visible="false">
<div class="loadingImg">
<img src="../Images/loading.gif" alt="loading" />
</div>
</div>
button:
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
Also how can I call the same javascript code in the jsfiddle above within code (c#)?
You have to select jQuery version from left menu, jsFiddle does not support to interpret asp.net code and generate html as asp.net engine do.
Live Demo
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#loading').slideToggle("slow");
});
});
If you are trying to do same in asp.net and your BtnSend is server control which does not have ClientIDMode set to static then you will need to use ClientID to bind event.
$(document).ready(function (e) {
$('#<%= BtnSend %>').click(function () {
$('#<%= loading.ClientID %>').slideToggle("slow");
});
});
The ClientID value is set to the value of the ID property. If the
control is a naming container, the control is used as the top of the
hierarchy of naming containers for any controls that it contains, Reference.
<div>
<asp:Button ID="btnCalculate" runat="server" Text="Calculate Claim" OnClientClick="cfrm();"/>
</div>
<div style="visibility: hidden;">
<asp:Button ID="btnYes" runat="server" OnClick="btnYes_Clicked" />
</div>
<script language="javascript" type="text/javascript">
function cfrm() {
var fee = $('[id$=lblTotalProcedureFee]').text();
if (fee > 500) {
if (confirm('Are you sure to do this operation?')) {
$('#<%= this.btnYes.ClientID %>').click();
}
}
}
</script>
I am trying to call "btnYes_Clicked" from the query. Refer to above code. It doesn't work.. then i edited the code just to test. First click, it doesn't work. 2nd click, it goes to the btnYes_Clicked event. I'm using master page which has update panels. Please help. Thanks..
<script language="javascript" type="text/javascript">
function cfrm() {
$('#<%= this.btnYes.ClientID %>').click();
}
</script>
Maybe you can try something like this, using return in OnClientClick and in cfrm to prevent form unwanted form submitting :
<div>
<asp:Button ID="btnCalculate" runat="server" Text="Calculate Claim" OnClientClick="return(cfrm());"/>
</div>
<script language="javascript" type="text/javascript">
function cfrm() {
var fee = $('[id$=lblTotalProcedureFee]').text();
if (fee > 500) {
if (confirm('Are you sure to do this operation?')) {
$('#<%= this.btnYes.ClientID %>').click();
}
}
return false;
}
</script>
Hope this will help