We Keep Coding

Show alert message when clicking on text box set in MasterPage in c#

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.");
}
});

KeyPress Event not working in asp.net Content Page

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) {
...
});

Remain bootstrap tab after postback c#

I am currently having problem retaining the bootstrap tab after my fileupload postback.
The code is as follow
<script type="text/javascript">
$('#myTab a[href="#image"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#information"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#password"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#account"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
</script>
Can anyone enlighten me on how to retain this bootstrap after postback?

Well, I had this issue already and I solved it this way:
Include a new HiddenField on your page and set its value to the first tab that need to be shown:
<asp:HiddenField ID="hidTAB" runat="server" Value="image" />
On every click function you defined to alternate the tabs, set the HiddenField value to the actual tab clicked.
document.getElementById('<%=hidTAB.ClientID %>').value = "image";
On your jQuery document.ready function, use the HiddenField value to alternate to the last tab opened before the Postback.
$(document).ready( function(){
var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
$( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
});
Here's the Bootstrap Tab Documentation and here's the jQuery Ready documentation

With reference to the above ideas here is how I did it (full code included)
In your HTML Page, in the < Head > section put
<script type="text/javascript">
$(document).ready(function () {
var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
$('#myTabs a[href="' + tab + '"]').tab('show');
});
</script>
in the < body > section put a hiddenfield
<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />
and also in the < body > section have the Bootstrap 3.0 related code
<ul class="nav nav-tabs" id="myTabs">
<li>Home page</li>
<li>another page</li>
</ul>
Do not set any tab to active (this is set by the initial Value="#tab1" of the Hiddenfield).
Then add a button to the tab2 DIV
like so:
<div class="tab-pane" id="tab2">
<asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
<asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>
Lastly add your c# code behind to set the value of the hiddenfield
protected void FileUploadButton_Click(object sender, EventArgs e)
{
hidTAB.Value = "#tab2";
}
on posting back the JQuery will read the new value in the hiddenfield and show tab2 :)
Hope this helps someone.
Trev.

Please try this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
</a></li>
<li>Employment</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="personal">
This is Personal Information Tab
</div>
<div role="tabpanel" class="tab-pane" id="employment">
This is Employment Information Tab
</div>
</div>
</div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>

After quite a long time trying out the bootstrap tab.. i decided to change to jquery tab.
In the first place, jquery tab also give the same problem i encounter in this situation..
but after much effort in looking for solution and trying out codes after codes.
i managed to find a solution
I'm really thankful to the person who provide this solution.
In this solution, it uses sessionStorage (to me, its a new stuff that i never heard of)
& the codes are
$(document).ready(function () {
var currentTabIndex = "0";
$tab = $("#tabs").tabs({
activate : function (e, ui) {
currentTabIndex = ui.newTab.index().toString();
sessionStorage.setItem('tab-index', currentTabIndex);
}
});
if (sessionStorage.getItem('tab-index') != null) {
currentTabIndex = sessionStorage.getItem('tab-index');
console.log(currentTabIndex);
$tab.tabs('option', 'active', currentTabIndex);
}
$('#btn-sub').on('click', function () {
sessionStorage.setItem("tab-index", currentTabIndex);
//window.location = "/Home/Index/";
});
});

In the above answer : the document ready function must be modified as below
$(document).ready(function () {
var selectedTab = $("#<%=hidTAB.ClientID%>");
var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
$('#myTab a[href="#' + tabId + '"]').tab('show');
$("#myTab a").click(function () {
selectedTab.val($(this).attr("href").substring(1));
});
});

Jquery UI and ASP.NET PostBack fail after post back

I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..

If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})

asp.net button works once and then stops working

I have a imagefield that only works once as first time it displays messagebox but when I close messagebox using cancel button , here is how I am
<script type="text/javascript">
$(document).ready(function() {
$('#<%= imagebutton1.ClientID %>').click(function() {
alert('hello'); // ONLY WORKS once
$.blockUI({message: $('#mainInsert')});
});
$('#<%= Button2.ClientID %>').click(function() {
$.unblockUI();
});
});
</script>
Here is how I definsedh my image button
<br />
<asp:ImageButton ID="imagebutton1" runat="server" ImageAlign="Right" ImageUrl="/_layouts/n.png" />
<br />
<br />
Here's cancel button code,
<div id="mainInsert" style="display: none; cursor: default">
<asp:Button ID="Button2" Text="Cancel" runat="server" CssClass="rightButton" />
</div>

You may be bubbling through to other events. Be sure to stop propogation through the click events of the parents and children.
<script type="text/javascript">
$(document).ready(function() {
$('#<%= imagebutton1.ClientID %>').click(function(event) {
alert('hello'); // ONLY WORKS once
$.blockUI({message: $('#mainInsert')});
event.stopPropagation();
});
$('#<%= Button2.ClientID %>').click(function(event) {
$.unblockUI();
event.stopPropagation();
});
});
</script>
I am not certain that will solve it, but that seems to be a good first shot.
Joey

Instead of this,
$('#<%= imagebutton1.ClientID %>').click(function() {
I used onclick and put code in custom JS function to make it work, as on postback it was losing events attached to controls.