I am a bit new to the asp.net/jQuery game, and I seem to be having difficulty. I am using colorbox to make a modal window popup, and I want an upload picture form on that modal window. I have a button to open up the add photo form:
Add/Edit picture(s)<br />
<script>
$(document).ready(function () {
$(".addpicture").colorbox({ width: "50%", inline: true, href: "#page1" });
});
</script>
Thus far my modal window is working perfectly, and is displaying the following upload form and next button:
<asp:FileUpload ID="picup" runat="server" class="upload" /><br />
<asp:Button ID="Button1" type="button" runat="server" Text="Next Page" class="nextpage" />
Here's where I am stuck; I am trying to have the next button upload the picture, and move to a second modal window, which I am going to implement a crop function on. The problem is, to do this, I need a jquery event handler:
$(".nextpage").colorbox({ width: "50%", inline: true, href: "#page2" });
I also need a serverside event handler to do the actual upload:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Try
picup.PostedFile.SaveAs("\Pictures\1-a.jpg")
Catch ex As Exception
Response.Write("Upload Failed")
End Try
End Sub
However, when I put in a breakpoint, this event handler is never firing.
A possible solution I thought up is to make a hidden button that fires the javascript, and click that button from vb, but I couldn't figure out how to click a button from vb. Is there something I'm doing fundamentally wrong? Is there a good way to accomplish what I want?
Edit: I have changed the way I am doing this, instead of multiple modal windows, I am loading a separate page in an iframe on the modal window, then I can have a postback without reloading the main page. Thank you for your help.
When uploading files with the fileUpload control you need a postback, otherwise the event will never fire.
There are a couple of plugins por jQuery that promise to enable uploading via ajax but i've never tried any.
In jquery bind() method lets you attach different behaviors to an element :
Example:
$("#a").bind("mouseover mouseout", function(e){
$(this).text($(this).text() + " event triggered " );
});
Related
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
Clicking on ASP.NET button redirects to correct website but on the same tab, not in a new tab what i need to do. What's wrong with the code OnClientClick="aspnetForm.target ='_blank';" below? Why it is not enough alone and what else need to be done?
The following ASP.NET code for the button control is:
<asp:Button ID="btnGenerateReport" runat="server" Text="Generate Report"
OnClick="btnGenerate_Click" OnClientClick="aspnetForm.target ='_blank';" />
I know two methods for redirecting the page to new tab in asp
1) The first method which you are already using and it works also. Make an onclientclick event of Button and on code behind of Button
Click write the following code:-
button.OnClientClick = "aspnetForm.target='_blank'"; Response.Redirect("yourpage.aspx");
2)You can also use javascript
button.Attributes.Add("onclick", "window.open('yourpage.aspx');return false;");
Both the method will redirect your page to new tab on clicking the button.
The error with your code is OnClientClick = "aspnetForm.target='_blank;'" remove the semicolon after '_blank' and it will work
If you are looking out for server side code to open a new window on Button Click, then here's how to do so.
Add the following script to the section of your page
<script language="javascript" type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'width=600,height=600,toolbar=1');
x.focus();
}
</script>
Then add a Button Control in the following manner
<asp:Button ID="btnOpenPop" runat="server" Text="Open Pop"
onclick="btnOpenPop_Click" />
Finally add some code in the code behind file
protected void btnOpenPop_Click(object sender, EventArgs e)
{
string url = "http://www.dotnetcurry.com";
ClientScript.RegisterStartupScript(this.GetType(), "OpenWin", "<script>openNewWin('" + url + "')</script>");
}
You can't use target attribute on button.
You have to use javascript function window.open()
Check this:
Window open() Method
I don't post links lightly, but I found this site explains all and it has solved my problem too.
http://dotnetspidor.blogspot.co.uk/2009/01/open-new-window-in-aspnet-web-page_28.html
On buttonSave click after saving the record successfully ,I want to show “Save successfully “ message on a label on a page for few seconds and then reload the page.
Thanks in Advance
You can add a META refresh tag:
<meta http-equiv="refresh" content="5;url=SomeURL">
You can do this using the 'meta' tag. This will reload the page after 3 seconds:
<meta http-equiv="refresh" content="3">
To do this in code, you can do something like this in your submit event (C# syntax but it should be easy enough to understand):
HtmlMeta meta = new HtmlMeta()
{
HttpEquiv = "refresh",
Content = "3"
};
Page.Header.Controls.Add(meta);
For this to work, you need to have a <head runat="server"> on the page.
You can show a nice overlay busy message.
The Mark-up part:
$(function() { // when document has loaded
($.unblockUI); //unlock UI
//Show busy message on click event and disable UI
$('#btnHelloWorld').click(function() {
$.blockUI({ message: '<h4><img src="busy.gif" />Please wait...</h4>' });
});
});
<asp:Button ID="btnHelloWorld" runat="server" Text="Hello World" /><br/>
The Code behind:
Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click
Label1.Text = "Hello World"
Threading.Thread.Sleep(5000)
End Sub
Check out jQuery BlockUI Plugin
I don't know about ASP, yet I'll tell you a simple idea, you can use timers, and add a trigger to the timer as when the timer is out, the trigger is fired. Hope I have helped you ...
I have an aspx page that contains a checkbox, and a button. The button is disabled by default until the user checks the checkbox. It looks like when I add the attribute enabled="false" to the button, it removes the validation. When the button is enabled, I still want the validation to work. Here is the code and markup for the different parts.
Checkbox:
<asp:CheckBox runat="server" ID="termsCheckBox" />
<label style="display: inline;">
I agree to the Terms & Conditions</label>
Button:
<asp:Button runat="server" ID="registerButton" OnClick="registerButton_Click1"
Text="Register" Enabled="false" ValidationGroup="accountValidation" />
JQuery:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#<%=termsCheckBox.ClientID %>').click(function () {
var checked = $(this).val();
if (checked != undefined)
$('#<%=registerButton.ClientID %>').removeAttr('disabled');
else
$('#<%=registerButton.ClientID %>').attr('disabled', 'disabled');
});
});
</script>
It seems like the validation should be attached to the checkbox, not the button.
Asp.net is stupid because when a control is disabled, there's all sorts of stuff that won't happen with it.
In this case, the js code to cause client side validation will not be created for a disabled button.
If you try to manually add in the clientside js code from the code behind,
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
registerButton.OnClientClick = String.Format("javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('{0}', '', true, '', '', false, false))", registerButton.UniqueID)
End Sub
It will not work because asp.net will not render all the attributes for a disabled control.
There are two solutions then. Either disable the control with JS at client side or add the javascript to perform a postback with validation at client side.
What I did for my program was to add code to create js code to disable the button at the client side:
If btnSubmit.Enabled = False Then
'Asp.net will not render all the attributes for a control that is disabled. Even if you
'try to set the OnClientClick attribute manually in code behind for the control, it will
'not work. Asp.net will not render the attribute. This is a workaround for this problem.
btnSubmit.Enabled = True
strJavaScript &= "btnSubmit.disabled = true;"
End If
ClientScript.RegisterStartupScript(Page.GetType(), "myStartupScript", strJavaScript, True)
Note that btnSubmit is a javascript variable that is already defined in my client side code.
I think it would work if you enabled/disabled the button on the checkBox server-side event rather than client side since the associated client-side validation code will be generated to run for ValidationGroup of the button
ASP.NET seems to be generating its own onclick event for any buttons that are generated.
Looks like this
javascript:__doPostBack(
This is preventing jQuery from working correctly.
Does anyone know how to stop asp.net engine from doing this?
Many thanks
You just need to add a return false to your jquery code that handles the button.
$("myaspbutton").click(function(e){
//your code
return false;****
});
<asp:Buttton runat="server" ID="myButton" Text="MyButton" OnClientClick="alert('hi');" />
Update:
you can bind the click event dynamically:
$('#<%=myButton.ClientID%>').click(function(e) {
//your code here
e.preventDefault();
});