I have an image on my page than can be changed from a fileupload asp.net control on the page, i want to provide and alternative to clicking the button by allowing the user to click their image. i gave the fileupload a class 'jqueryPhotoUploadTrigger' and it renders like this:
<input type="file" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$C2kMasterPlaceholder$ucEditDetails_20$photoupload" id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_C2kMasterPlaceholder_ucEditDetails_20_photoupload" class="jqueryPhotoUploadTrigger" />
i then have jquery script at the bottom:
$(document).ready(function() {
$("#clickMyColl").click(function () {
alert("image has been clicked");
$('.jqueryPhotoUploadTrigger').click();
});
});
the alert does show so i know the script is firing when i click the image. i was just hoping the .click would fire the event on the button but it didnt. can i do it this way or must i find an alternative?
you could do a submit or use the Ajax way, there are functions like __doPostback(), look in the ASP.NET documentation.
You could either to an ajax call of have an ImageButton on the page with a transparent image (so its hidden)
then in your jquery you could use
$("#yourhiddenbutton").click();
this would then fire the server side click event
Maybe you've to set the focus on the input (if I've understood your question):
$('.jqueryPhotoUploadTrigger').focus();
You are using the ID of your image as "#clickMyColl", but instead use the ID as it is rendered (jQuery does not know the asp ID): "ctl00_ctl00_ctl00_ContentPlaceHolderDefault_C2kMasterPlaceholder_ucEditDetails_20_photoupload"
Alternatively, you could use the class to select:
$(".jqueryPhotoUploadTrigger").click(function ...
Related
I have a jQuery Pager control, for each page there is a set of textboxes and a submit button. When this submit button is clicked I want it to fire off some jQuery to update the controls on the front end (i.e. current page, set visibility of controls etc). The button is an asp.net web forms postback button.
Does anyone know any way of doing this?
Merry Christmas!
Inject js from code-behind after your postback success like:
string script = "$(function(){setPage(\"" + yourpagenumber+ "\");});";
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pager", script, true);
And in the js you will have a setPage function that does the job of setting page with your jquery pager plugin.
function setPage(pagenumber){
alert(pagenumber);
//do your page setting here
}
Note: you can use Page.ClientScript.RegisterStartupScript if that fits your needs but the idea remains same.
Don't use a submit button, use an input of type button with an onclick event instead.
Use the OnClientClick attribute of the asp:button i.e.
OnClientClick="JQueryFunction();return false;"
for no postback and
OnClientClick="JQueryFunction();return true;"
for a postback. I'm assuming that that JQueryFunction() returns true.
I'm looking to create a custom date picker with code examples from several sources.
Is the code to display/hide an ASP.NET control when a user clicks a button usually done with JavaScript or ASP.NET code? By display/hide, I mean within the page not a popup window.
Please provide a simple example. (If ASP.NET, VB example preferred over C#)
The answer is, it depends. Do you want the date picker show/hide to trigger a postback and thus some code on the server, or do you want it to act purely on the client?
If you want it to act purely on the client, then, modify the markup for your button:
<asp:Button runat="server" ID="myButton" OnClientClick="ShowHideCalendar()" Text="myButton" />
<script language="javascript" type="text/javascript">
var calendarVisible = false;
function ShowHideCalendar()
{
if (calendarVisible)
{
// Code to *SHOW* calendar here
// Show the DIV it's contained in, pop the window with it in, etc..
}
else
{
// Code to *HIDE* the calendar here
}
}
</script>
The key bit is the "OnClientClick" property of the asp:Button control.
Its best practice to do such thing asynchronously, rather than having a full postback that refreshs the entire page.
That means that you have two options:
Update an UpdatePanel in which your
control is placed. That gives you
the benefit of only re-rendering the
content in the UpdatePanel.
Use
clientside scripts to toggle the
control. You also need to perform a
callback, that tells your codebehind
that you just toggled the visibility
to asure your code is in the same
state as the webpage displaying it.
I'd prefer using the second one.
I'm building an ASP.NET website and I'm puzzled with the behavior of one page, I've got a long form and a submit button, I've got the piece of javascript below in the page to handle scrolling the page back up upon submiting the form, the first time I click the submit button it works all the sequent clicks don't work at all, any idea why?
<script type="text/javascript">
$(".thebutton").click(function(){
$("html, body").animate({scrollTop: 200}, 1000);
});
</script>
Cheers,
Thi
Ahh,
Using an Ajax post makes this different that my post above.
Does your ajax call change the buttons on the page? I assume you are using an UpdatePanel with the buttons in qustion in it.
Since when you make the Ajax call, the controls in the UpdatePanel are being rebuilt, the DOM is seeing them as different objects and these new objects are no longer bound to the jQuery click function. You will need to re-bind these buttons click event after the ajax post to re-enable the functionality you are looking for.
Using jQuerys new "Live" Handlers should do the trick for you:
$(".thebutton").live("click", function() {
$("html, body").animate({scrollTop: 200}, 1000);
});
Hope it helps.
If your Submit button performs a full postback, I would view source on the second web page instance, and make sure that the script is still there.
Your script will run BEFORE the Post.
Imagine if you will:
Initial Page Load
Bind Click event with jQuery
Click Button
jQuery Click is raised
html and body scrollTop are set to 200
during the "animate" the form is submitted
asp.net back end click event code is run
page is reloaded.
string script = "$(function() { $('html, body').scrollTop(200); });";
ClientScript.RegisterStartupScript(this.GetType(), "scrollTop", script, true);
That should take care of what you want to accomplish.
Hope it helps.
Is there a way to trigger a hidden button on an html markup page using jquery or jscript?
How would I do that if possible?
Thank you,
James
With jQuery:
$('#buttonId').click();
or:
$('#buttonId').trigger('click');
With plain JavaScript:
document.getElementById('buttonId').onclick();
Since you're using ASP .NET you might want to get the button id by using the ClientID server-side property of the control:
$('#<%=Button.ClientID %>').click();
Or:
document.getElementById('<%=Button.ClientID %>').onclick();
$('#example-button-id').click();
If I understand correctly, you want to fire an event programmatically. This is usually not necessary. You can very easily move the button click even code to a new method, and have the event invoke that method. You can then also call the method in the code that would want to fire the button click even programmatically.
Try this (requires jquery):
$("button").trigger('click');
I have a few controls that inherit from ASP.NET buttons and use onserverclick.
If the user clicks twice, the button fires two server side events. How can I prevent this?
I tried setting this.disabled='true' after the click (in the onclick attribute) via javascript, but that blocks the first postback as well.
See this example for disabling control on postback. It should help you do what you're trying to achieve.
http://encosia.com/2007/04/17/disable-a-button-control-during-postback/
You don't necessarily want to show the button disabled on postback. You want to make sure they don't accidentally submit twice. So disabling or hiding the button as a result of a server-side action is already too late in the game. By this point the 2nd request is already on it's way. You need to either do it with javascript or make sure your server side code won't run twice.
In case of an updatepanel and a button inside a FormView-Template I use the following approach:
// Using that prm reference, hook _initializeRequest
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequestBuchung);
// Abfangen von Mehrfachklicks auf Buttons für asynchrone Postbacks im Updatepanel
function InitializeRequestBuchung(sender, args) {
var arrButtonIds = ["ButtonInsert", "ButtonUpdate"];
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() & jQuery.inArray(args.get_postBackElement().id, arrButtonIds) > -1) {
args.set_cancel(true);
}
}
This cancels the following postback if an async postback is currently still active. Works perfectly.
Someone else said this somewhere on here a few days ago, and I concur - use javascript to simply hide the button instead of disabling it; you could show a "spinner" image in its place, which lets the user know what is going on.
Instead of hiding, what I have done is swapping buttons using javascript. Show another greyed out image on the click of the first button.
Set the Button property UseSubmitBehavior to false. Then create an OnClientClick function that disables the button.
It would look something like this:
<script type="text/javascript">
function disableFunctn(button){
button.disabled = true;
}
</script>
<asp:Button ID="button1" UseSubmitBehavior="false" OnClientClick="disableFunctn(this);"/>
fastest cheapest way:
<asp:Button ID="button1" UseSubmitBehavior="false" OnClientClick="this.disabled=true;"/>
You can also try for example btnSave.Enable = false; when the button is hit and before the processing for the button is done in the Click Event routine. If you need it to be reset to allow it to be enabled have a separate button that resets the button for reuse.
Another method is to set the button with verification so that the user is asked if they want to Save, it should pop up both times.
Yet another method would be to flag the first occurrence then set a popup for the second to verify a second or subsequent usage.