user2320476 user2320476 - 5 months ago 12
jQuery Question

Creating an ok/cancel modal popup for menu items

I have an index page below and I have a div pageContent which is used as a container for
3 different partial pages. There is a default partial page that loads.
Here is my code for the index page

@model Solution.Model.Projectstatusviewmodel

<div id="ProjID">
<div id="pjls">
<label for="SelectProjID">Project:</label>
@Html.DropDownList("mydrp", Model.ProjectsInfoSelectList, Model.SelectedProject, new { id = "", @class = "yel", @onchange = "javascript:GetStatusDate(this.value);" })
</div>
</div>
<ul id="menu">
<li class="clLink1">@Html.ActionLink("link1", "link1method", "Home")</li>
<li class="clLink2">@Html.ActionLink("link2", "link2method", "Home")</li>
<li class="clLink3">@Html.ActionLink("link3", "link3method", "Home")</li>
</ul>

<div id="pageContent"></div>


Here is the code that handles the different navigation

$(document).ready(function () {
//Prepare the partial views. When page loads display the first partial view as default
//then process others.
$(function () {
//Load the first link's content on document ready
var firstLinkHref = $("#menu li a:first").eq(0).attr("href");
$("#pageContent").load(firstLinkHref);

$("#menu li a").click(function (e) {
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
});
});
});


Problem: I have a form in the partial page that loads as default. When users complete this
form and click on the second or third link, I want users to get a prompt to save their work
otherwise everything is lost. It will be more of a Ok/Cancel alert box.

How can I acheive that here?

Answer

You can have an id on the form and have a confirm dialog to warn the user that he should save or the data would be lost:

<form id="firstPage">
...

$("#menu li a").click(function (e) {

    e.preventDefault();

    var firstForm = $('#firstPage');
    var shouldContinue = true;

    if(firstForm.length > 0)
    {
        shouldContinue = confirm("All the data that is not saved will be lost.Do you want to proceed ? ");
    }

    if(shouldContinue){
        $("#pageContent").load($(this).attr("href"));
    }
});

This would work if you want to warn the user, when he is navigated from the first form to the rest of the partial views.

Also why don't you just switch between your partial views, but use links ? You can have a function to replace the partial view container with the new information:

$('.links').on('click', function(e) {
    e.preventDefault(); 

    var firstForm = $('#firstPage');
    var shouldContinue = true;

    if(firstForm.length > 0)
    {
        shouldContinue = confirm("All the data that is not saved will be lost.Do you want to proceed ? ");
    }

    if(shouldContinue){
        var $pageContent= $('#pageContent'),
        url = $(this).data('url');

        $.get(url, function(data) {
            $pageContent.replaceWith(data);
        });
    }
}

and have on your page:

<button class="links" data-url='@Url.Action("link1method","Home")>Link1</button>
<button class="links" data-url='@Url.Action("link2method","Home")>Link2</button>
<button class="links" data-url='@Url.Action("link3method","Home")>Link3</button>