on click not working inside a jqueryui dialog

Question

i have a fileupload control and a button inside a jquery dialog but the on-click doesn't fire here 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-behind:

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 on-click works fine outside the jquery dialog but inside it it doesnt work using asp.net 4.0 with jquery 1.4.1 vs edition.

thanks

score 4 · Answer 1 · answered May 02 '11 at 12:12

4

it does not work actually because when you jQuery dialog is outside form tag. so your button is not inside form tag and it does not trigger the submit event of form.

If you want to trigger the event, try to add the whole dialog inside form.

answered May 02 '11 at 12:12

Mamoon ur Rasheed

307
3
14

thank you , tried to add the dialog inside the form but no luck, guess i will just use show and hide. – Wahtever May 02 '11 at 12:51
Here is an explanation of what Mamoon is talking about: http://www.keysolutions.com/blogs/kenyee.nsf/d6plinks/KKYE-7XPVS6 – SquidScareMe May 02 '11 at 13:09

santosh singh · Accepted Answer · 2011-05-03T12:50:25.597

First put your div inside form tag and then try following 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

As per your comment,I have created a sample page.Please check out and let me know.If you are facing any issues.

<%@ 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));
            }
        }
    }
}

@geek - here is what i used `$(function () { $(".pUploadDiv").dialog({ height: 200, modal: true }, "draggable"); $(this).parent().appendTo($("#Form2")); });` — Wahtever, May 03 '11 at 10:18
@geek - i have more than one form so wouldn't this just get the first one which is not the asp required form i also tried form:first just to make sure but still no luck — Wahtever, May 03 '11 at 11:34
@Wahtever:Share your full markup structure.I will give it a try — santosh singh, May 03 '11 at 11:47
@Wahtever:Your are saying that your page have more than one form where is that markup — santosh singh, May 03 '11 at 12:18
@geek - the full page markup is actually pretty big but it's basically `3 forms with action and method and one form with runat=server which contains the fileupload and button` — Wahtever, May 03 '11 at 12:23
@geek - it does a post back this time but doesn't actually upload the file — Wahtever, May 03 '11 at 18:29
@Wahtever: It will do...I am 100% sure ...u r doing something wrong — santosh singh, May 03 '11 at 18:41
@Whatever:It's working fine ...make sure that you have **imgs** folder in your app — santosh singh, May 03 '11 at 18:51
@geek - my mistake didn't notice the change from button to input thus forgot to remove the return false sorry , anyway working now thank you very much — Wahtever, May 03 '11 at 22:01
Thank you, actually the javascript click worked once I added the dialog inside the form $(".mydialog").parent().appendTo($("#formid")); — Mohamad Al Asmar, Jun 01 '16 at 12:37

score 0 · Answer 3 · edited Jul 14 '13 at 11:13

 $('#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 will work..

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

on click not working inside a jqueryui dialog

3 Answers3