Is it possible to prevent the _doPostBack() call getting rendered on a button?
I would like add some custom logic prior to calling the postback.
I have added an onClick event to the button
e.g.
<button id="manualSubmit" runat="server" class="manual-submit" onclick="$('#jeweller-form').hide();" />
However, this just gets rendered inline before the _doPostBack()
But the postback gets fired before the jQueryHide takes place
I would like to call my own JS function then manually trigger the postback
any ideas?
Try this:
<button runat="server" id="Test" onserverclick="Test_ServerClick">Submit</button>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var o = $("#Test"), c = o.attr("onclick");
o
.removeAttr("onclick")
.click(function(e) {
o.fadeOut("slow", function() {
o.fadeIn("slow", function() {
c(e);
});
});
return false;
});
});
</script>
Add return false; after the client-side code in the click event. In the HTMLControl, it didn't think it rendered __doPostBack; is the control that renders the _doPostBack, and the common way to prevent that for that control is:
<asp:Button ... OnClientClick="doThis();return false;" />
Which renders these JS statements before __doPostBack.
HTH.
Related
I have the following JScript on a page
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $find("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
and later
<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click" OnClientClick="ProcessButtonDisable()" />
when running the page and firing off the button i get
Microsoft JScript runtime error: Unable to set value of the property 'disabled': object is null or undefined
and the dynamic page has converted it to:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $find("ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton");
button.disabled = true;
}
</script>
<input type="submit" name="ctl00$ctl00$BodyContentPlaceHolder$MainContentPlaceHolder$ProcessButton" value="Process All" onclick="ProcessButtonDisable();" id="ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton" />
as the control is clearly defined and the client id seems to be returning the correct id i don't know whats wrong
Any help?
ps in case this is not clear from the code the purpose of this is to prevent he user from clicking on the and resending the request before the page has time to reload after the initial click
-1 to all the previous answers for assuming JQuery. $find is a function defined by the Microsoft AJAX Library. It "provides a shortcut to the findComponent method of the Sys.Application class" which gets "a reference to a Component object that has been registered with the application through the addComponent method". Try using $get() instead, which "Provides a shortcut to the getElementById method of the Sys.UI.DomElement class."
This page explores both functions in detail: The Ever-Useful $get and $find ASP.NET AJAX Shortcut Functions
$find is differ from $.find. The first one is provides a shortcut to the findComponent method of the Sys.Application class which defined by the Microsoft AJAX Library. while the second is API method from jQuery which get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
So, $find has to find Component not html DOM. and ajax Library has to be defined.
For more information:
http://msdn.microsoft.com/en-us/library/vstudio/bb397441(v=vs.100).aspx
http://api.jquery.com/find/
try this:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $("#<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
[edit] or
<script type="text/javascript">
function ProcessButtonDisable() {
$("#<%=ProcessButton.ClientID %>").attr("disabled", "disabled");
}
</script>
You have to select what you are "finding" in first. For example, if you select document then use the method "find" you should have the result you want.
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $(document).find(("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
disabled is not a jQuery object property it is a DOM element property.
Try using either:
$('selector').get(0).disabled = true
, or
$('selector').attr('disabled','disabled');
You need to use the dot notation, as find() is a jQuery function, like this:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $.find("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
Also, if you are going to take the trouble to look up the DOM element in your jQuery logic, then do not bother wiring up the OnClientClick on the server control; either wire up the click event via jQuery or pass the element itself to the JavaScript function:
Using jQuery to wire up the click event (recommended):
<script type="text/javascript">
$(document).ready(function() {
$("#<%=ProcessButton.ClientID%>").click(function() {
$(this).disabled = true;
});
});
</script>
Using the OnClientClick attribute to wire up the click event and pass the element (not recommended):
<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click"
OnClientClick="ProcessButtonDisable(this)" />
<script type="text/javascript">
function ProcessButtonDisable(elem) {
elem.disabled = true;
}
</script>
I have a custom control which displays results of some operations.
It is hidden by default and its made visible on the code-behind of some other class.
Now I want to hide it after a certain amount of time. How do I do it?
Edit:
Some answers suggested adding following javascript block at the end of the custom control which is not working if Visible="false" is used on the custom control.
But I did not made that clear enough and so accepted that as an answer.
Have to take a look at: How to call javascript function from code-behind
The timeout function is correctly called if Visible="true" is used.
ASPX:
<control id="customControl" runat="server" Visible="false"/>
Solution if Visible="true" is used in markup:
Custom control - ASPX:
<div id="body">
<!-- custom control -->
</div>
<script type="text/javascript">
window.setTimeout(function() { document.getElementById('<%=Me.divBody.ClientID%>').style.display = 'none'; }, 2000);
</script>
Custom control - Code-behind:
Me.customControl.Visible = True
Solution if Visible="false" is used in markup:
From start the script block is not rendered and later is not added automatically. So we need to register it.
Custom control - ASPX:
<div id="divBody">
<!-- custom control -->
</div>
<script type="text/javascript">
window.setTimeout(function(){ alert("test"); });
</script>
Custom control - Code-behind:
Me.customControl.Visible = True
Dim hideScript AS String = "window.setTimeout(function() { document.getElementById('" & Me.divBody.ClientID & "').style.display = 'none'; }, 2000);"
ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType, "script", hideScript, True)
Source: http://www.codeproject.com/Tips/85960/ASP-NET-Hide-Controls-after-number-of-seconds
I haven't seen any reference to jQuery in the question, hence vanilla JS solution:
Put this at the end of the User Control file
<script type="text/javascript">
setTimeout(function(){
document.getElementById("<%=this.ClientID%>").style.display = "none";
}, 5000);
</script>
You could have a property on the object which when executed changed the visible property to false if you were outside of a stipulated time frame, so you'd have a visible from and until field and have that generate a boolean when compared to the current time.
You can probably use the javascript setTimeout function to execute some code to hide the div which has the user control to hide after a time period
<div id="divUserControlContainer">
//put your user control embed code here
</div>
<script type="text/javascript">
$(function(){
window.setTimeout(function() {
$("#divUserControlContainer").hide();
}, 2000);
});
</script>
You achieve it by simple JQuery methods:
$("#CustomControl").hide(1000);
$("#CustomControl").show();
I am using the jQuery Datepicker without any problem for TextBox controls that are non-templated. However, I am unable to get the datepicker to work with a TextBox that is in an EditItemTemplate of a ListView control. My latest attempt is to get a handle on this textbox by CSS class name "DateControl", any ideas?
<asp:ListVIew id="lvTest" runat="server">
<LayoutTemplate>...</LayoutTemplate>
<ItemTemplate>...</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
<asp:TextBox ID="txtExpReceiveDate" runat="server" Text='<%#Eval("exp_receive_date","{0:dd-MMM-yy}") %>' CssClass="DateControl" />
</td>
</tr>
</EditTemplate>
</asp:ListView>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
</script>
You need a . at the beginning of a class name when selecting with jQuery (just like CSS):
$(document).ready(function () {
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
This turned out to just be a case where I needed to attach the datepicker to my controls inside of...
function pageLoad(sender, args){}
instead of...
$(document).ready(function () {});
It's been a while since I used a ListView, but I think that the Edit controls are exposed dynamically - there's no postback.
So in order to attach to a dynamically included element, you'll need to use the new jquery live - not sure if you can do something like
$('.DateControl').live('click', function() {
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
or if you have to attach that to the Edit event something like:
$("DateControl").live("showEdit", function(e, myName, myValue){
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
$("EditControl").click(function () {
$("DataControl").trigger("showEdit");
});
But that should be enough to get you started.
Please help me to solve this problem:
I have a form in which i have written onSubmit calling a javascript function.
please tell me in that javascript function how can i check that who was the event generater ( i mean on which button click this even raised)..
Note: onsubmit function call is in form tag..
i am using javascript and asp.net
My code is like this:
<form id="form1" runat="server" onsubmit="return CheckForm()">
<script type="text/javascript" language="javascript">
function CheckForm()
{
some code here
}
</script>
i dont want to change any functionality.. i have got a dropdownlist which is causing postback.. i want that when this dropdownlist raise post back either i should know that its raised by dropdownlist or that function should not be called by dropdownlist's postback
you can pass this like here is an example...
this.TextBox1.Attributes.Add("onkeypress", "button_click(this,'" + this.Button1.ClientID + "')");
function button_click(objTextBox,objBtnID)
{
if(window.event.keyCode==13)
{
document.getElementById(objBtnID).focus();
document.getElementById(objBtnID).click();
}
}
You could add an onclick event to the submit buttons that will set a variable. This value can then be used in the onsubmit event to figure out which button was clicked:
The form:
<form action="" method="get" id="frmOne" onsubmit="return checkVal()">
<input type="submit" id="btnOne" value="hello01" onclick="testtwo(1)" />
<input type="submit" id="btnTwo" value="hello02" onclick="testtwo(2)" />
</form>
The script:
<script type="text/javascript">
var iVal = 0;
function checkVal() {
if (iVal == 1) {
// ...
return false;
} else {
if (iVal == 2) {
// ...
return true;
}
}
}
function testtwo(val) {
iVal = val;
}
</script>
<script type="text/javascript">
var button=''
// call this function on button click
function clickButtonName(name){
button=name
}
// onSubmit function check for 'button' Variable to find out which event is clicked
don't forget to reset button variable.
</script>
But remember your form is also get sumitted when you are in a textfield inside the form and click on "Enter" button.I think then You have to disable form submission using onkeypress and event class of javascript.
Why doesn't this work?
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.myButton').click();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:LinkButton id="ttt" runat="server" PostBackUrl="~/Default.aspx" CssClass="myButton">Click</asp:LinkButton>
</div>
</form>
Do you want to submit the form, or add a Click event?
Your link button translates to
<a id="ttt" class="myButton" href="javascript:WebForm_DoPos[...]">Click</a>
, so it has no on-click javascript. Therefore, .click(); does nothing.
I haven't test it, but maybe this will work:
eval($('.myButton').attr('href'));
trigger('click') fires jQuery's click event listener which .NET isn't hooked up to. You can just fire the javascript click event which will go to (or run in this case) what is in the href attribute:
$('.myButton')[0].click();
or
($('.myButton').length ? $('.myButton') : $('<a/>'))[0].click();
If your not sure that the button is going to be present on the page.
Joe
If you need the linkbutton's OnClick server-side event to fire, you need to use __doPostback(eventTarget, eventArgument).
ex:
<asp:LinkButton ID="btnMyButton" runat="Server" OnClick="Button_Click" />
<script type="text/javascript">
function onMyClientClick(){
//do some client side stuff
//'click' the link button, form will post, Button_Click will fire on back-end
//that's two underscores
__doPostBack('<%=btnMyButton.UniqueID%>', ''); //the second parameter is required and superfluous, just use blank
}
</script>
you need to assign an event handler to fire for when the click event is raised
$(document).ready(function() {
$('.myButton', '#form1')
.click(function() {
/*
Your code to run when Click event is raised.
In this case, something like window.location = "http://..."
This can be an anonymous or named function
*/
return false; // This is required as you have set a PostbackUrl
// on the LinkButton which will post the form
// to the specified URL
});
});
I have tested the above with ASP.NET 3.5 and it works as expected.
There is also the OnClientClick attribute on the Linkbutton, which specifies client side script to run when the click event is raised.
Can I ask what you are trying to achieve?
The click event handler has to actually perform an action. Try this:
$(function () {
$('.myButton').click(function () { alert('Hello!'); });
});
you need to give the linkButton a CssClass="myButton" then use this in the top
$(document).ready(function() {
$('.myButton').click(function(){
alert("hello thar");
});
});
That's a tough one. As I understand it, you want to mimic the behavior of clicking the button in javascript code. The problem is that ASP.NET adds some fancy javascript code to the onclick handler.
When manually firing an event in jQuery, only the event code added by jQuery will be executed, not the javascript in the onclick attribute or the href attribute. So the idea is to create a new event handler that will execute the original javascript defined in attributes.
What I'm going to propose hasn't been tested, but I'll give it a shot:
$(document).ready(function() {
// redefine the event
$(".myButton").click(function() {
var href = $(this).attr("href");
if (href.substr(0,10) == "javascript:") {
new Function(href.substr(10)).call(this);
// this will make sure that "this" is
// correctly set when evaluating the javascript
// code
} else {
window.location = href;
}
return false;
});
// this will fire the click:
$(".myButton").click();
});
Just to clarify, only FireFox suffers from this issue. See http://www.devtoolshed.com/content/fix-firefox-click-event-issue. In FireFox, anchor (a) tags have no click() function to allow JavaScript code to directly simulate click events on them. They do allow you to map the click event of the anchor tag, just not to simulate it with the click() function.
Fortunately, ASP.NET puts the JavaScript postback code into the href attribute, where you can get it and run eval on it. (Or just call window.location.href = document.GetElementById('LinkButton1').href;).
Alternatively, you could just call __doPostBack('LinkButton1'); note that 'LinkButton1' should be replaced by the ClientID/UniqueID of the LinkButton to handle naming containers, e.g. UserControls, MasterPages, etc.
Jordan Rieger