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..
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 have a web page that has a master file. The master file has an update panel that contains a timer, used for showing adds/images every so many seconds. However the page's content place holder is not contained within the update panel. This is the basic markup of the master page:
<head id="hdMain" runat="server">
<title>Main Master Page</title>
<link href="~/Style/custom-theme/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" />
<asp:ContentPlaceHolder
ID="cpHead"
runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px" scroll="no">
<form id="frmMain" runat="server">
<asp:ScriptManager
ID="smMain"
runat="server">
</asp:ScriptManager>
<div style="height: 671px; width: 1024px; z-index: 0;">
<asp:ContentPlaceHolder
ID="cpMain"
runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="background-color: #192646; height: 97px; width: 1024px">
<asp:UpdatePanel
ID="upMain"
runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrMain" />
</Triggers>
<ContentTemplate>
<asp:Timer
ID="tmrMain"
runat="server"
Interval="10000"
OnTick="RotateImage">
</asp:Timer>
<img
id="imgMain"
runat="server"
height="97"
width="1024"
alt=""
src="" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Now, when my page loads, I need to do some server side processing before deciding if I want to fire up a jQuery dialog. I am using the code below in my code behind to do this:
if (NeedToRunStartupScript())
{
ClientScript.RegisterStartupScript(this.GetType(), "RedirectScript", "Sys.Application.add_load(function() { OpenDialog(); });", true);
}
The OpenDialog() is defined as following in the markup, withing the header content place holder:
<script type="text/javascript" src="../Scripts/JQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../Scripts/JQuery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript">
function OpenDialog() {
$(function () {
var redirectSomewhere = false;
var newDialog = $('<div title="Dialog">\
<p>Do you wish to redirect?</p>\
</div>');
newDialog.dialog({
height: 250,
width: 300,
modal: true,
buttons: {
Yes: function () {
redirectSomewhere = true;
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function () {
if (redirectSomewhere) {
window.location.href = "SomePage.aspx";
}
}
});
});
};
Pretty standard stuff really. And this code works. However, each time a timer clicks and updates the image, the dialog window shows up again, so if I let it just sit there for several minutes, I will have tens of dialog windows on top of one another. I basically need my dialog to be registered only once, and not be reinitialized on every partial postback. Any help would be appreciated.
Have you tried checking for async postback like this
bool isAsyncPostback = ScriptManager.GetCurrent(this).IsInAsyncPostBack;
if (NeedToRunStartupScript() && !isAsyncPostback)
{
ClientScript.RegisterStartupScript(this.GetType(), "RedirectScript", "Sys.Application.add_load(function() { OpenDialog(); });", true);
}
<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
I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />
I have an asp.net panel with a style which hides it and I'm using JQuery to slideToggle the panel using a hyperlink. This works fine. However, if I add a button on the page that causes a postback the panel will default back to hidden. I understand why this is happening but what is the best way to keep the panels visibility state when a postback occurs?
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server" CssClass="panel">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Here's how I solved my problem...
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
if ($('#panelText').hasClass('panel')) {
$('#PanelState').attr('value', 'true');
} else {
$('#PanelState').attr('value', 'false');
}
});
});
$(document).ready(function() {
if ($('#PanelState').attr('value') == 'false') {
$('#panelText').addClass('panel');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="PanelState" runat="server" Value="false" />
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Add a hidden field in form:
<asp:HiddenField id="hdnPanelState" runat="Server" value="false" />
and modify the JS function:
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
//YOU WILL ALSO NEED TO CALCULATE IF SHOWING PANEL OR HIDING
$("#hdnPanelState").attr("value","true");//Store Value
});
});
</script>