www.webdeveloper.com
Results 1 to 6 of 6

Thread: Show Navigating away message for selected links

  1. #1
    Join Date
    Oct 2006
    Posts
    59

    Show Navigating away message for selected links

    Hi,

    I am trying to display an alert message when the user is in the middle of editing and clicks accidentally on some other link.

    I want to display this error message for certain link and not for others.

    I thought of using 'window.onbeforeunload', parse the url to find the link that was clicked. However, when I try to use the string functions (split, substring, lastindexof, etc.) inside 'onbeforeunload', they do not work.

    Can anyone help what is going on?

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    One way to do it is:

    1) add an onclick event handler function to the relevent links.

    2) the function then displays a window.confirm() with a prompt something like "Are you sure you want to click this link?"

    3) Then depending on the user response to the window.confirm(), either execute the link or do nothing and keep the user on the current page.

    Depending on the number of links on your page you could add the onclick as a window.onload or edit each link individually.

  3. #3
    Join Date
    Jul 2010
    Location
    Westminster, CO
    Posts
    3
    Rather than using onbeforeunload why don't you attach a click event on the links that takes the user elsewhere? That way you have the element that was clicked and you can then decide to user window.location or alert the user of missing fields.
    Code:
    <script type=text/javascript>
    function handleLinkClick(event,el)
    {
       /* have your check logic here to either grab attributes off the link to determin if it is the 
           bad link or set up a confirm() box for the user to click if they are sure
           they want to navigate away during editing. 
       */
    }
    </script>
    <a href='javascript:void(0)' onclick="handleLinkClick(event,this);" id=link1>Accidental Link</a>

  4. #4
    Join Date
    Oct 2006
    Posts
    59
    Thanks for the reply.

    The usecase is like this: User is editing something and the link he clicks accidentally can be a menu which is common to all views. If the onclick event is added to these links then the alert will show everytime the user clicks these links, even though he is not editing anything.

    I have to avoid this behaviour.

  5. #5
    Join Date
    Oct 2006
    Posts
    59
    I could not figure it out yet. Please help me.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Gameone View Post
    Thanks for the reply.

    The usecase is like this: User is editing something and the link he clicks accidentally can be a menu which is common to all views. If the onclick event is added to these links then the alert will show everytime the user clicks these links, even though he is not editing anything.

    I have to avoid this behaviour.
    Ok, to clarify what I suggested earlier:

    One way to do it is:

    1) add an onclick event handler function to the relevent links.

    ...
    ...
    Your options include adding an onclick manually to each relevent link, which most likely would not be practical, or you could give each relevent link a class name and then have an onload function that attaches an onclick event handler to display window.confirm() to links with that class name.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles