Блог

Главная - Вопросы по программированию - при нажатии не работает в диалоговом окне jqueryui

при нажатии не работает в диалоговом окне jqueryui

#jquery #asp.net #jquery-ui

#jquery #asp.net #jquery-пользовательский интерфейс

Вопрос:

у меня есть элемент управления загрузкой файлов и кнопка внутри диалогового окна jquery, но при нажатии не срабатывает вот моя страница aspx:

 <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>

и вот код, лежащий в основе:

 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 {}

и, наконец, мой jquery :

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

});

нажатие on-click отлично работает вне диалогового окна jquery, но внутри него оно не работает с использованием asp.net 4.0 с jquery 1.4.1 vs edition.

Спасибо

Ответ №1:

на самом деле это не работает, потому что, когда вы jQuery dialog находится вне тега формы. таким образом, ваша кнопка не находится внутри тега формы и не запускает событие отправки формы.

Если вы хотите запустить событие, попробуйте добавить весь диалог внутри формы.

Комментарии:

1. спасибо, пытался добавить диалоговое окно внутри формы, но безуспешно, думаю, я просто использую show и hide.

2. Вот объяснение того, о чем говорит Мамун: keysolutions.com/blogs/kenyee.nsf/d6plinks/KKYE-7XPVS6

Ответ №2:

Сначала поместите свой div внутри тега формы, а затем попробуйте выполнить следующий фрагмент кода jquery

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

Редактировать

Согласно вашему комментарию, я создал пример страницы.Пожалуйста, проверьте и дайте мне знать.Если вы столкнулись с какими-либо проблемами.

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

Комментарии:

1. @geek — вот что я использовал $(function () { $(".pUploadDiv").dialog({ height: 200, modal: true }, "draggable"); $(this).parent().appendTo($("#Form2")); });

2. @Wahtever: использовал это .appendTo($(«форма: первая»));

3. @geek — у меня более одной формы, так что не получится ли просто получить первую, которая не является формой, требуемой для asp я также попробовал form: first, просто чтобы убедиться, но все еще безуспешно

4. @Wahtever: Поделитесь своей полной структурой разметки. Я попробую

5. @Wahtever: Вы говорите, что на вашей странице есть более одной формы, где эта разметка

Ответ №3:

  $('#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("");
      }
    });

попробуйте, это сработает..

ссылка :http://www.keysolutions.com/blogs/kenyee.nsf/d6plinks/KKYE-7XPVS6