【问题标题】:jquery refresh div with button click asp .netjquery用按钮刷新div单击asp .net
【发布时间】:2014-07-11 01:56:41
【问题描述】:

我正在尝试通过单击按钮刷新 div,但一定有问题。我也在使用 asp.net 和 jquery。如果你们能帮助我,那就太棒了

 $('#addmebaby').click(function () {
     $.ajax({
         url: "MenuControl.aspx",

         type: "GET",
         dataType: "html",
         success: function (data) {
             var result = $('<div />').append(data).find('#MenuDiv').html();
             $('#MenuDiv').html(result);
         },
         error: function (xhr, status) {
             alert("Sorry, there was a problem!");
         },
         complete: function (xhr, status) {
             //$('#showresults').slideDown('slow')
         }
     });
 });

这里有完整的代码

 <script>

     function refreshDiv() {

         $('#addmebaby').click(function () {
             $.ajax({
                 url: "MenuControl.aspx",

                 type: "GET",
                 dataType: "html",
                 success: function (data) {
                     var result = $('<div />').append(data).find('#MenuDiv').html();
                     $('#MenuDiv').html(result);
                 },
                 error: function (xhr, status) {
                     alert("Sorry, there was a problem!");
                 },
                 complete: function (xhr, status) {
                     //$('#showresults').slideDown('slow')
                 }
             });
         });
     }

  $(function () {

     $("#dialog-form").dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
        appendTo: AddForm,
      });



      $("#create-user")
        .button()
        .click(function () {
            $("#dialog-form").dialog("open");

        });

      $("#dialog-form-edit").dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          appendTo: AddForm,
      });




  });



 </script>

列出、编辑、删除表格

<div class="page-content-wrapper">
    <div class="page-content">





        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                <h3 class="page-title">
                MFT Haber Scripti V1  <small>Admin Paneli</small>
                </h3>
                <ul class="page-breadcrumb breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="index.html">Home</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Dashboard</a>
                    </li>
                    <li class="pull-right">

                    </li>
                    <li>
                    </li>
                </ul>
                <!-- END PAGE TITLE & BREADCRUMB-->
            </div>
        </div>
        <!-- END PAGE HEADER-->

        <div class="clearfix">

 <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet box blue" >
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-edit"></i>Düzenleme Tablosu

                        </div>

                    </div>
                    <div class="portlet-body">
                        <div class="table-toolbar">
                            <div class="btn-group">


                            <input type="button" value="Yeni Ekle +" Id="create-user" class="btn green"   />    

                            </div>
                            <ul style="float:right">
                            <asp:Button ID="Button7" runat="server" Text="Seçilenleri Sil" BackColor="Red" CssClass="btn green" OnClick="Button7_Click" />
                            </ul>
                        </div>
                        <div id="MenuDiv">
                        <table class="table table-striped table-hover table-bordered" id="table" >
                        <thead>
                        <tr>
                            <th>

                              Seç  

                            </th>
                            <th>
                                Baslik
                            </th>


                            <th>
                                Edit
                            </th>
                            <th>
                                Delete
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <asp:Repeater runat="server" ID="repMasterMenu"><ItemTemplate>
                        <tr>
                            <td><asp:CheckBox ID="CheckBox1" runat="server"  /></td>
                            <td>
                                <%#Eval("MenuName") %>
                            </td>


                            <td>


                               <asp:ImageButton ID="Duzen" runat="server" OnClientClick="$('#dialog-form-edit').dialog('open');"   ImageUrl="~/admin/img/duzenle_16x16.gif"  CommandArgument=<%#Eval("Id") %>   onclick="Duzenle" Width="10px"  />

                                <!--<a href="#" class="btn default btn-xs purple"><i class="fa fa-edit"></i> Edit</a>-->
                            </td>
                            <td>
                                <asp:ImageButton ID="Sil" ImageUrl="~/admin/img/sil_16x16.gif" runat="server" CommandArgument=<%#Eval("Id") %> onclick="sil" width="10px"/>

                            <!--    <a href="#" class="btn default btn-xs black"><i class="fa fa-trash-o"></i> Delete</a>-->
                            </td>
                        </tr>

                                      </ItemTemplate></asp:Repeater>
                        </tbody>
                        </table>
                            </div>
                    </div>
                </div>


                <!-- END EXAMPLE TABLE PORTLET-->

                </div>

弹出窗口

名称

           <div id="dialog-form-edit" >
姓名

</div>



<!-- END CONTENT -->

标签: javascript jquery asp.net


【解决方案1】:
function refreshDiv(){

       $.ajax({ url: "MenuControl.aspx",

             type: "GET",
             dataType: "html",
             success: function (data) {
                 var result = $('<div />').append(data).find('#MenuDiv').html();
                 $('#MenuDiv').html(result);
             },
             error: function (xhr, status) {
                 alert("Sorry, there was a problem!");
             },
             complete: function (xhr, status) {
                 //$('#showresults').slideDown('slow')
             }
         });

}

在元素上附加这个函数 onclick='refreshDiv()'

【讨论】:

  • 这不是 $('#addmebaby').click(function () { 做同样的事情吗?我也使用 onclick 进行代码隐藏
  • 我也试过放输入按钮来检查刷新但没用
猜你喜欢
  • 2015-03-08
  • 1970-01-01
  • 1970-01-01
  • 2023-03-14
  • 2012-01-31
  • 1970-01-01
  • 1970-01-01
  • 2012-11-16
  • 1970-01-01
相关资源
最近更新 更多