I have a contact us page in my website using ASP.NET
http://sosdeepcleaning.com/contactus.aspx
When clients fill up the form and click submit, it doesn't show any sign that the page is processing the form, so some of them click on the submit button twice.
How can I prevent them to click it twice? Dialog box? "waiting" bar? Alert?
Any easy solution I can add before Response.Redirect?
Thanks
As said in the previous answer disable the button via jQuery upon first click, if the page is validated. Try the below snippet
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSubmit").click(function () {
// Assumes you have asp.net validation controls
// so you can check Page_IsValid
if (Page_IsValid) {
$(this).attr("disabled", "disabled");
$(this).attr("value", "Processing...");
}
});
});
</script>
A common solution to the double submit problem is to gray out (disable) the submit button(s) and optionally show a progress throbber next to the submit button.
Using jQuery:
$('form').submit(function()
{
$('input[type="submit"]').attr('disabled','disabled');
});
Related
If I put code it will go to the view below
(Please click link to view picture)
Response.Redirect(Report.aspx);
I want to redirect to the tab called "number of booking" how do i do that?
Put below code
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({ selected: 1 })
});
</script>
here
0: first tab
1:second tab
etc
Also you can write in pageLoad of javascript event if you have partial post back in page with update panel
I have this page where you can "edit" the data of the users... I want to send a message like "Edited Successfully" AND update the page as well, with the new content ( DropDownLists AND TextBoxes).
I'm using this for the messages:
ScriptManager.RegisterStartupScript(this, typeof(Page), "alert", "alert('Edited Successfully !');", true);
And to update the page, I tried: Response.Redirect(Request.RawURl) and even a simple Response.Redirect(~/page.aspx) didnt work either...
If I try this way, it do update the page, but then it DOES NOT show the alert... ;\
All of this data (that fills the DropDownLists, Textboxes etc..) Is called on the Page_Load. I tried to call this same method after sending the message, but then it does not update =\
Any Idea?
The problem you're facing occurs because you are reloading the page, so the script you register gets lost.
An approach I've used in cases like this, involves the use of jQuery and jQuery UI Dialog:
In your page, put a div that will be the message container. It's hidden initially and will be shown after complete the database request:
<div id="modal" title="Alert" style="display: none;">
</div>
Write a javascript function that will display the dialog:
function showConfirmation(text){
$("#modal").html(text).dialog({
modal: true, // show the dialog as modal
buttons: {
Ok: function() {
location.reload();
}
}, // add a button that refreshes the page when clicked
closeOnEscape: false, // avoid the dialog close when ESC is pressed
dialogClass: 'no-close' // adds a CSS class that hides the default close button
});
}
The dialog function is responsible for showing the dialog, using the jQuery UI library. The buttons parameter displays a button that refreshes the page when pressed.
All you have to do is register the dialog script, with the RegisterStartupScript method:
ScriptManager.RegisterStartupScript(this, typeof(Page), "alert", "showConfirmation('Edited Successfully !');", true);
If you are not using jQuery and/or jQuery UI, all you have to do is add the references in head tag. If you don't want to use the CDN's, download the files to your local site.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
You can see a working example of the client side behavior this fiddle
I am creating a ASP.net web application where i need to add different text boxes data and save it in another text box .But using java Script and onblur event. How can we do please say in clear and understanding way because am new to It.
Thanks
You could use jQuery's blur event:
$('#TextBox1').blur(function() {
alert('Handler for .blur() called.');
});
To expand on this and do some calculation/set the value of another textbox we could do something like:
<script type="text/javascript">
$(document).ready(function () {
$("input[id$=TextBox1]").blur(function() {
$("input[id$=TextBox2]").val('Some text')
});
});
</script>
I have an update panel on my page with some links that have onClick events that trigger a JQuery box to pop up. This works fine unless an AJAX postback has occurred. I saw some code on another post:
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
which I have used but it doesn't seem to be working. I keep getting AsyncDone is not defined. Does anyone have any ideas as to what I can do to sort the issue out please?
Details: ASP.NET 2, IIS7
Thanks in advance.
The problem is that when the updatepanel fires, it replaces a chunk of html in the dom, which means it replaces the elements that you have bound the click event to.
To bypass this look at jquery .live() or .delegate() which keeps looking for events matching the selector you provide, or if you want to bind to content every time the update panel refreshes content look that the jQuery updatepanel plug-in.
I sorted this by not using the document.ready in jQuery. Instead I used:
function pageLoad(sender, args) { //code }
I haven't seen any adverse effects yet so hopefully this will sort my issue.
I used update panel just only to stop the whole page refresh in asp.net which even included the jquery.But after using the update panel somewhat the problem was solved but created another problem. jquery script was not working inside the updatepanel.
This issue is now solved.
Example: In case of jquery Date picker, Usual call of Jquery script appears like this :
<script type="text/javascript">
$(function() {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
Even I had used the same code as
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1',
'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
Solution Appears here: http://kopila.com.np/
But it didnt worked for me.Later I came to know that The jquery script wont work after partial postback i.e.our ajax request.If we try to call any JQuery script inside the update panel do whatever script wont work after the first ajax request.
Example: When you are using asp.net update panel call it again as follows:
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
}
}
</script>
For More Details Go to: http://kopila.com.np
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