<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
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.");
}
});
I am trying to change iframe's src attribute with jQuery. But this code isnt working. Even the alert doesnt show up.
JS:
<script src="../Scripts/jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript">
function loadIframe(url) {
var $iframe = $('#' + <%=iPage.ClientID%>);//Also tried $('#<%=iPage.ClientID%>')
if ( $iframe.length ) {
$iframe.attr('src',url);
return false;
}
return true;
}
</script>
ASPX:
<li>
<asp:LinkButton id="link1" runat="server" OnClientClick="loadIframe(
'www.asd1234.com')" Text="Test"></asp:LinkButton>
</li>
<asp:updatepanel...>
//.....
<iframe id="iPage" runat="server"></iframe>
</asp:updatepanel>
As you are using
<iframe id="iPage" runat="server"></iframe>
You need to use Control.ClientID
<asp:LinkButton
id="link1"
runat="server"
OnClientClick="loadIframe('<%= iPage.ClientID %>', 'www.google.com')"
Text="Test"></asp:LinkButton>
Also move function out of the document ready handler.
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));
});
});
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.
I have the following test ASPX page:
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var dlg = $("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
__doPostBack('TreeNew', '');
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
dlg.parent().appendTo(jQuery('form:first'));
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="New"
OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Texte</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
I use dlg.parent().appendTo(jQuery('form:first')); on close function to retreive the values from RadioButtonList.
It works well but before the page do the PostBack the div "Dialog" moves below the New button. Why?
I think that this is caused because you are calling:
dlg.parent().appendTo(jQuery('form:first'));
at the close callback. This will move the dialog. Why don't you call this immediately after creating the dialog?
try chaning
$(function() {
to
$(document).ready(function() {
also check where it fails with some sort of javascript debugger opera got builtin and FireFox got FireBug..