Geek Answers Handbook

On click does not work inside jqueryui dialog

I have a file system control and a button inside the jquery dialog, but the click does not start here, this is my aspx page:

<div id="pUploadDiv" class="pUploadDiv"> <asp:FileUpload runat="server" ID="FileUpload1" CssClass="FileUpload" /><br /> <asp:FileUpload runat="server" ID="FileUpload2" CssClass="FileUpload" /><br /> <asp:FileUpload runat="server" ID="FileUpload3" CssClass="FileUpload" /><br /> <asp:FileUpload runat="server" ID="FileUpload4" CssClass="FileUpload" /><br /> <asp:Button runat="server" ID="UploadButton" Text="Upload" OnClick="test" /> </div>

and here is the code:

 try { HttpFileCollection hfc = Request.Files; for (int i = 0; i < hfc.Count; i++) { HttpPostedFile hpf = hfc[i]; if (hpf.ContentLength > 0) { hpf.SaveAs(Server.MapPath("imgs") + "\\" + Path.GetFileName(hpf.FileName)); } } } catch {}

and finally my jquery:

 $(function () { $("#photoUpButton").click(function (pho) { $(".pUploadDiv").css("visibility","visible").dialog({ modal: true, height: 300 }, "draggable"); return false; });

});

the click works fine outside the jquery dialog box, but inside it doesn't work using asp.net 4.0 with jquery 1.4.1 and version.

thanks

+1
source share
3 answers

First put your div tag inside the form, and then try to execute the jQuery code snippet

  $(function () { $("#photoUpButton").click(function (pho) { $(".pUploadDiv").css("visibility", "visible").dialog({ modal: true, height: 300, autoOpen: true }, "draggable"); $(".pUploadDiv").parent().appendTo($("form:first")); }); });

EDIT

According to your comment, I created a sample page. Please check and let me know. If you encounter any problems.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> <script type="text/javascript"> $(function () { $("#btnOpen").click(function (pho) { $(".pUploadDiv").css("visibility", "visible").dialog({ modal: true, height: 300, autoOpen: true }, "draggable"); $(".pUploadDiv").parent().appendTo($("#form1")); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="btnOpen" value="Upload Files" /></div> <div id="pUploadDiv" class="pUploadDiv"> <asp:FileUpload runat="server" ID="FileUpload1" CssClass="FileUpload" /><br /> <asp:FileUpload runat="server" ID="FileUpload2" CssClass="FileUpload" /><br /> <asp:FileUpload runat="server" ID="FileUpload3" CssClass="FileUpload" /><br /> <asp:FileUpload runat="server" ID="FileUpload4" CssClass="FileUpload" /><br /> <asp:Button runat="server" ID="UploadButton" Text="Upload" CausesValidation="true" OnClick="UploadButton_Click" /> </div> </form> <form id="form2" action=""> I am on form2 </form> <form id="form3" action=""> I am on form2 </form> </body> </html> 
 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Default5 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void UploadButton_Click(object sender, EventArgs e) { HttpFileCollection hfc = Request.Files; for (int i = 0; i < hfc.Count; i++) { HttpPostedFile hpf = hfc[i]; if (hpf.ContentLength > 0) { // hpf.SaveAs(Server.MapPath("imgs") + "\\" + Path.GetFileName(hpf.FileName)); } } } }
+2
source

this doesn’t actually work, because when you jQuery dialog is outside the form tag. therefore, your button is not inside the form tag and does not raise a form submission event.

If you want to trigger an event, try adding the entire dialog inside the form.

+3
source 
  $('#divDialog').dialog({ bgiframe: true, autoOpen: false, height: 175, width: 600, minWidth: 200, modal: true, open: function(type,data) { $(this).parent().appendTo("form"); }, close: function(type,data) { $(this).parent().replaceWith(""); } });

try it, it will work.

ref: http://www.keysolutions.com/blogs/kenyee.nsf/d6plinks/KKYE-7XPVS6

0
source

More articles:


All Articles