Reputation: 3678

on click not working inside a jqueryui dialog

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

Upvotes: 1

Answers (3)

user2580771

Reputation: 1

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

Upvotes: 0

santosh singh

Reputation: 28672

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

Upvotes: 2

Mamoon ur Rasheed

Reputation: 317

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.

Upvotes: 4

on click not working inside a jqueryui dialog

Answers (3)

Related Questions