How to display popup in sidebar while modifications.

Question

1.00/5 (2 votes)

See more:

I have a side bar ,menus and sub menus are there.all sub menus has one registration form page.

My question is:
when enter any text in text box(which is in sub menu page)and suddenly move to another menu,on that time i need a pop up "do you want to leave this page" yes or no.
if click yes ,we can able to click other sub menus,no means same sub menu page

Note:sub menu is in side bar so all pages displaying along with sidebar.

What I have tried:

Design page(master)

HTML

<div class="container body">
        <div class="main_container">
            <div class="col-md-3 left_col my_leftcol menu_fixed">
                <div class="left_col scroll-view">
                    <div class="clearfix"></div>
                    <!-- menu profile quick info -->
                    <div class="profile clearfix"> </div>
                    <!-- /menu profile quick info -->
                    <!-- sidebar menu -->
                    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                        <div class="menu_section" style="">                           
                                    <ul id="new1" class="nav side-menu" >
                                        <li >
                                            <a href="Default.aspx">Visit our HTML tutorial</a>


                                           
                                        </li>
                                        <li >
                                           <a href="Menu2.aspx" >Administrators</a> </li>
                                      
                             <li >
                                           <a href="Default.aspx" >Administrators</a> </li>
                                       <li >
                                           <a href="Menu2.aspx" >Administrators</a> </li>
                                              <li class="dropdown">
                                            <a href="Default.aspx" class="dropdown-toggle" data-toggle="dropdown">AdministratorUser</a>
                                            <ul class="dropdown-menu">
                                               <li>  <a href="Menu2.aspx" >one</a> </li><br />
                                               <li>  <a href="Default.aspx" >two</a> </li><br />
                                            <li>    <a href="Menu2.aspx" >three</a> </li><br />
                                          </li>
                                            </ul>
                                        
                                      
                            
                        </div>
                    </div>
                    <!-- /sidebar menu -->
                    <!-- /menu footer buttons -->
                    <!-- /menu footer buttons -->
                </div>
            </div>
</div>
</div>

sample register form for sub menu1(like this for another sub menu):

ASP.NET

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <th colspan="3">
            Registration
        </th>
    </tr>
    <tr>
        <td>
            Username
        </td>
        <td>
            <asp:TextBox ID="txtUsername" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="Required" ForeColor="Red" ControlToValidate="txtUsername"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            Password
        </td>
        <td>
            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
        </td>
        <td>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="Required" ForeColor="Red" ControlToValidate="txtPassword"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            Confirm Password
        </td>
        <td>
            <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" />
        </td>
        <td>
            <asp:CompareValidator ID="CompareValidator1" ErrorMessage="Passwords do not match." ForeColor="Red" ControlToCompare="txtPassword"
                ControlToValidate="txtConfirmPassword" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            Email
        </td>
        <td>
            <asp:TextBox ID="txtEmail" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
                ControlToValidate="txtEmail" runat="server" />
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                ControlToValidate="txtEmail" ForeColor="Red" ErrorMessage="Invalid email address." />
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button ID="Button1" Text="Submit" runat="server"  />
        </td>
        <td>
        </td>
    </tr>
</table>

Posted 2-May-17 2:54am

GrpSMK

Updated 2-May-17 3:30am

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)

sachin.vishwa90 · Answer 1 · 2017-05-02T03:30:00

Solution 1

quite an interesting problem. Below is the pseudo code which may help you to tackle this problem

you will have to bind a jquery click event on your menu list which will check "is any field modified in current opened form"

JavaScript

$(function(){

// this is click event bind
$('#new1 li').on('click',function(){

// check all the inputbox in loop
$("form input[type=text]").each(function(){

var input = $(this); // this is input box 

// check if value is changed
if(input.val() != '')
 return confirm('are you sure want to leave this page');
else
 return true;
});


});

})

PS: you may have to check the syntax online this is just a pseudo code

Posted 2-May-17 3:30am

sachin.vishwa90

Comments

GrpSMK 2-May-17 9:53am

It doesn't work,please help to solve my problem

sachin.vishwa90 2-May-17 10:03am

if you use this code as it is it will not work.
this is a kind of algorithm. you have to be very precise with your syntax

GrpSMK 2-May-17 10:10am

ok thank you

GrpSMK 2-May-17 10:13am

can you share any link to refer

sachin.vishwa90 2-May-17 10:19am

http://stackoverflow.com/questions/6365255/jquery-onclick-event-for-li-tags
to bind the events on list

http://stackoverflow.com/questions/10517315/checking-if-all-form-inputs-are-empty-with-jquery
above link to check all the inputbox are empty or not