How can I open again my div?

Question

0.00/5 (No votes)

See more:

, +

hi,
i have one ui problem :
i create some form in my admin page and i hide all of then in css(display:none;)
i fadeIn them with jquery.
the problem is : when i click on a submit(in one of the form in the page)
the page be a refresh and my opend(in use) form will be close.
how can i open it(last opend form)?

i do this for all my form :

this is one form icon (when i click on this icon my hidened form will be open) :

HTML

<li style="margin-top: 9px; margin-right: 20px;z-index:100000000;">
<img src="pic/hotel-icon.png" id="mng" title="اضافه کردن و حذف کردن شهر" alt="اضافه کردن و حذف کردن شهر" width="32px" height="32px" /></li>

this is one of the menu which should be open :

ASP.NET

<div class="col-lg-12" id="mnga" style="margin-left: auto; margin-right: auto; display:none ;direction:rtl;">
                <!--منوی اضافه کردن شهر-->
                     <div class="panel panel-primary">
                     <div class="panel-heading">اضافه کردن شهر</div>
                     <div class="panel-body">
                         <asp:Label ID="Label5" runat="server" Text="نام شهر :"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br /><br /><asp:Label ID="Label6" runat="server" Text="مخفف شهر :"></asp:Label>&nbsp;<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>&nbsp;<asp:Button ID="Button15" runat="server" Text="ثبت" OnClick="Button15_Click" />&nbsp;&nbsp;&nbsp;<asp:Label ID="Label28" runat="server" ForeColor="#CC3300"></asp:Label></div>
                     </div>
                     <div class="panel panel-primary">
                     <div class="panel-heading">حذف شهر</div>
                     <div class="panel-body"><asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>&nbsp;<asp:Button ID="Button3" runat="server" Text="حذف" OnClick="Button3_Click" />&nbsp;&nbsp;&nbsp;<asp:Label ID="Label29" runat="server" ForeColor="#CC3300"></asp:Label></div>
                     </div>
                <!--پایان منوی اضافه کردن شهر-->
                </div>

and i open the menu with this code(all other menu will be close and my choice menu will be open) :

JavaScript

var r = 0;
$(document).ready(function () {
    $('#mng').click(function () {
        r++;
        if (r % 2 == 0) {
            $("#prfa").hide(500);
            $("#mnga").hide(500);
            $("#cmnta").hide(500);
            $("#posta").hide(500);
            $("#htla").hide(500);
            $("#imga").hide(500);
            $("#faclta").hide(500);
            $("#rooma").hide(500);
            $("#roomadda").hide(500);
            $("#facilitya").hide(500);            
        }
        else {
            $("#prfa").hide(500);
            $("#cmnta").hide(500);
            $("#posta").hide(500);
            $("#htla").hide(500);
            $("#faclta").hide(500);
            $("#imga").hide(500);
            $("#rooma").hide(500);
            $("#roomadda").hide(500);
            $("#facilitya").hide(500);
            $("#mnga").fadeIn(500);            
        }
    });
});

What I have tried:

but when i click on submit my page will do refresh function and this form (which i choiced) close and i cant see the result of operation in the form.

Posted 15-Jul-16 3:21am

saeed rajabi

Updated 20-Jul-16 23:59pm

v6

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Accepted Answer · 2016-07-20T23:59:00

Keep in mind that the web is stateless, your popup runs on the client/browser. Invoking a Button will causes a page to do a server postback, thus recreating the page. In other words, your popup will disappear when you trigger a server postback. Bottom line is you can't do server and client operation at the same time.

Now here are your options:

1) You could use your existing popup function and remove the OnClick server event. Then you could write a JavaScript/jQuery function that will do an AJAX requrest to the server to call a server-side method.

2) Get rid of your client-side popup, and instead use a server-side AJAX Dialog, for example the ModalPopupControl from AJAXControlToolkit. That way you can still invoke your OnClick server event and call the ModalPopUpControl from your server code.

3)You can probably do a hack, and that is to add a hiddenfield to mark a page if it postbacks, and decide if you show the popup. Here's a quick example:

ASP.NET

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function () {
            //Bind an event listener to the dialogbeforeclose event
            $("#dialog").on("dialogbeforeclose", function (event, ui) {
                $("#HiddenField1").val("false");
            });
            //judge if show dialog
            if ($("#HiddenField1").val() == "true") {
                $("#dialog").dialog({ draggable: false });
            }

        });

        function ShowDialog() {
            $("#dialog").dialog({ draggable: false });
            $("#HiddenField1").val("true");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:HiddenField ID="HiddenField1" runat="server" Value="false" />
    <div id="dialog" title="Basic dialog"  style="display:none;" >
        <asp:Button ID="Button1" runat="server" Text="I can post back" UseSubmitBehavior="false" OnClick="Button1_Click" />
   </div>
    <input id="Button2" type="button" value="Show dialog" onclick="ShowDialog()" />

    </form>
</body>