I want to run a jquery code with animation/fade-out of a box. The box is a ASP listview containing data from the database. When the user clicks 'delete' on the box, an updatecommand will be executed, so data in the database will be updated, but it will not execute the fade-out animation of jquery because the page is already refreshed. How to first fade-out the box with jquery and then postback the page?
You can use following JS to fade-out the box in the beginRequest function
jQuery(function ($) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function (source, args) {
// code to fade out the box
});
prm.add_endRequest(function (source, args) {
// any other code you want to execute after the post back finishes
});
});
Be sure to add a ScriptManager and UpdatePanel to your page. For more details you may check this MSDN reference
You can use the "OnClientClick" attribute of your delete button to run the jQuery.
Then you can return from your jQuery method that the animation has run and finished, to then confirm the call to your PostBack.
Button:
<asp:Button id="btnDelete" runat="server" OnClientClick="return runAnimation()" OnClick="btnDelete_Click" text="Delete" />
jQuery:
function runAnimation()
{
// animate
return true; // Do postback
// problem
return false; // Don't do postback
}
Related
I wanted to have a Custom Message Box OnClientClick . If the User Selects Yes then the Onclick Event handler in the C# code should get trigger. But somehow i am not able to do this using ASP.net and jquery.
As of now what is happening
Only C# code is triggered
What i was expecting
ClientSide Confirmation message (If User Clicks "YES" ) Then Server-side
code triggers.
My HTML
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSubmit" Text="submit" runat="server" OnClick="btnDelete_Click"
OnClientClick="if(!ShowDeleteFormConfirmation()) {return false;};" />
</div>
</form>
Jquery
function ShowDeleteFormConfirmation() {
var confirmationMessage,
dlgButtons = {
"No": function () {
$(this).dialog("close");
return false;
},
"Yes": function () {
$(this).dialog("close");
return true;
}
};
confirmationMessage = "This form has already been assigned and will be marked as deleted.";
var $panelContainer = $("<div>" + confirmationMessage + "</div>").appendTo('body');
$panelContainer.attr("title", "Confirmation to delete a form");
var myPos = [$(window).width() / 2 - 100, 50];
$panelContainer.dialog({
modal: false,
draggable: false,
position: myPos,
button: dlgButtons
});
}
C# ////OnClick
protected void btnDelete_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Delete button clicked.');", true);
} ```
This is what i wanted to implement.
http://jsfiddle.net/y5z01nbr/
Thanks for having a look.
Ok, while your code would work if you used "confirm" in the js code, that's because alert() and confirm() HALTS the calling code.
However, today, near ALL WEB code libraries are written to NOT halt, and NOT freeze up the browser. And jQuery is one such system. (it does not HALT the code). While I could introduce the concepts of await - that's becoming a wee bit too complex for this POST.
So, what this means:
the jQuery code does NOT halt,
and thus when you click on the button,
the client side code runs WITHOUT halting
and thus the button click (server side code) will
ALSO run right away - not waiting.
So, in the case of a jQuery dialog? You can't HALT the code. this means you have to flip this backwards. The jQuery dialog is to be displayed, AND THEN you have to call/run/click on that server side button. So, you have to add a new button, and use style="display:none" ot the existing button. Then display the dialog, and based on the answer you THEN click on (call) that origional button you have/had now.
The code will thus look like this:
<div>
<asp:Button ID="btnSubmit" Text="submit" runat="server" OnClick="btnDelete_Click"
Style="display:none" clientIDmode="static" />
<asp:Button ID="btnSubmitX" Text="submit" runat="server"
clientIDmode="static" OnClientClick="ShowDeleteFormConfirmation();" />
<\div>
So I dropped in another button - no server behind code. Hide first button with display none, and removed the client click. I moved the client click to 2nd button.
Now, we can do this:
dlgButtons = {
"No": function () {
$(this).dialog("close");
},
"Yes": function () {
$(this).dialog("close");
$('#btnSubmit').click();
}
};
So what we do is launch the dialog. And based on yes, then we click our button. If you choose no, then the dialog is dismissed, but no other action need take place.
A a GENERAL hard and fast rule?
Your browser code is RARE these days blocking code - calling a jQuery.ui dialog and in fact most of these newer UI controls? The code does NOT wait, does NOT halt. And this means you can't use the return true/false to control if the server side event stub will run or not (you can use js confirm(), but not jQuery, since it don't wait, nor halt the code).
I have an Advanced Find Form that contains a few asp:textbox controls as well as asp:dropdownlist controls. When I hit my reset button, it works well in clearing or resetting my textboxes and dropdownlists.
However, when the user clicks "Go" to submit the search query and a grid is shown with the results, the reset button no longer works.
Here's my input button:
<input type="reset" value="Clear All" />
EDIT:
Please note that I need to reset the fields to "Default Values" and also I need to be doing without a postback, to be doing it on client side
Have you try with normal button :
<asp:Button ID="txtResetbtn" runat="server" OnClick="txtResetbtn_Click" />
protected void txtResetbtn_Click(object sender, EventArgs e)
{
TextBox1.Text = string.Empty;
}
I think the problem is that HTML button don't reset after a postback
Or you can try to do this in the :
<asp:Button runat="server" ID="reBt" Text="Reset"
OnClientClick="this.form.reset();return false;"
CausesValidation="false" />
From : Reset a page in ASP.NET without postback
That link can help you too : Is there an easy way to clear an ASP.NET form?
The input type "reset" does not clear the form, it resets the form to its default values. To clear the form after submitting, you'll have to use javascript to set all values to empty.
Edit:
Since you're using asp.net, you could also use an <asp:button /> to call a method that clears the values of each control in the form.
Edit 2:
If you need to keep this function client-side, you'll have to use Javascript. Also, I think it's important to make a distiction between resetting to a default value (what the "reset" input type does) and clearing the values in a form, even after a submit. To do the later on the client side, you'll have to write a little javascript.
I managed to workaround the problem. As TenneC and Nikolay have mentioned in previous answers, I used an ASP.Net button but I've performed the reset function using jquery as follows:
$(document).ready(function(){
$("#BtnClear").click(function () {
$('#FillForm input').val(function () {
return this.defaultValue;
});
$('#DDLId1').val(function () {
return this.defaultValue;
});
$('#DDLId2').val(function () {
return this.defaultValue;
});
});
});
I have a radRotator whit an OnItemClick method which is fired when the user click on one of the items while rotating.
In the OnClick method, I get the index of the item clicked and then I make use of it.
The problem is that every time that a click is performed in the radrotator, it stops and restart all over again. I suppose this is because of the post back generated by the OnItemClick.
How can I disable the post back on the OnItemClick but still fire the command?
<telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance" ScrollDirection="Up"
ScrollDuration="4000" runat="server" Width="714"
ItemWidth="695" Height="260px" ItemHeight="70" FrameDuration="1" InitialItemIndex="-1"
CssClass="rotator" OnItemClick="RadRotator1_ItemClick">
OnItemClick will do a postback. I think you will have to call server side function from javascript. Since you are using telerik controls, you can use either RadAjaxManager or RadAjaxPanel to do the server side call.
$find("<%= RadAjaxPanel1.ClientID %>").ajaxRequest();
The above line will make a call to RadAjaxPanel1 ajaxrequest event.
Updated code -
<telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance" ScrollDirection="Up"
ScrollDuration="4000" runat="server" Width="714"
ItemWidth="695" Height="260px" ItemHeight="70" FrameDuration="1" InitialItemIndex="-1"
CssClass="rotator" OnClientItemClicked="itemclicked">
<script type="text/javascript">
function itemclicked(sender, args) {
// you will have to make a server side call from here
// if you have RadAjaxPanel or RadAjaxManager on this page you can call ajaxRequest to //make server side call.
$find("<%= RadAjaxPanel1.ClientID %>").ajaxRequest();
}
</script>
OK so I have a jquery modal dialog. It accepts an input and then has an ok and and cancel button. Cancel works fine by simply closing the dialog. The ok button fires the OnClientClick when I really want it to fire the OnClick method so I can go into the server controls and log the input into the database using ASP.NET. Any ideas on how this is supposed to be done using jquery?
Side note: I'm not currently by the computer that has the code, but I'll try to update it as soon as I can.
You could try this:
Insert a ASP.NET button on your form, binded to the event that you want to trigger, then, with jQuery do $('#your_button_ID').click(); on the 'OK' event of your dialog.
Hope it helps!
In your codebehind create a static function and add the [WebMethod] attribute, so now you can fire code behind methods from Jquery.
javascript:__doPostBack('IDOfYourControlButton','')
This is the same method a button or linkbutton uses to fire the onClick event in .NET
Demo webmethod
in code behind you add this
[System.Web.Services.WebMethod]
public static string SayHi()
{
return "Hi";
}
in yr aspx file you add this javascript
<script>
function GetHi() {
PageMethods.SayHi(onComplete);
}
function onComplete(result) {
alert(result);
}
GetHi();
</script>
and dont forget to add this also in yr site.master or aspx page right under the
<form runat="server">
<asp:ScriptManager ID="scriptManager" EnablePageMethods="true" runat="server"/>
</form>
I have following JavaScript function, Which call Jquery JSON function and get the DateTime with respect to timezone. This works fine.
<script type="text/javascript">
function JSFunctionName() {
$(document).ready(function () {
var timezone = "US/Central";
$.getJSON("http://json-time.appspot.com/time.json?tz=" + timezone + "&callback=?",
function (data) {
if (data.hour < 12) {
//alert(data.hour + ':' + data.minute); // want to return this value data.hour + data.minute
//document.getElementById('<%=HiddenField1.ClientID %>').value = data.hour + ':' + data.minute;// this does not work
}
})
});
}
</script>
Now I am calling this Javascription function in Code behind on onclick of button
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
Code behind
protected void Button1_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(),
"alert", "JSFunctionName();", true);
// here I need the DateTime value that is get from JSON
//Response.Write(HiddenField1.Value);
}
How can I return the value from Javascript to code behind immediate after call of Page.ClientScript.RegisterStartupScript
Please note I have try to set the value in HiddenField, but its not working. you can see in the comment.
Any idea or alternative solution will be appreciated.
Thanks
You can't do this without posting back to the server. The reason for this is that javascript executes on the client, and it will only execute after the page has left the server.
I assume this is a contrived example, but in this specific case, if you want to have the same information available on the client and server, you need to compute it on the server, and pass that out to the client.
If this isn't possible, you'll need to create a webservice, but that will have to handle the response asynchronously.
You can use ajax call to server from the javascript function or you may put another button on the form, hide it with style and cause click on this button after you set up calculated value to the hidden field in the JSFunctionName function.
Your problem is that the following line:
Page.ClientScript.RegisterStartupScript(this.GetType(),
"alert", "JSFunctionName();", true);
doesn't actually "execute" the Javascript funciton. It just adds the
JSFunctionName();
to the page in a script block, to be executed after your code has completed, and the page has loaded.
Rather than "calling the Javascript" from your button-click event, you could set the "OnClientClick" property of the button to "JSFunctionName()":
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" OnClientClick="JSFunctionName();" />
This will cause the JSFunctionName to fire before the postback happens. You can then set up your JSFunctionName() method to return true when it's done, which will then fire the postback.
You will then be able to access the value of HiddenField1 from the server-side click handler.