Modal Pop up doesn't work

Question

I inherited an ASP.Net WebPages with Razor project that I need to enhance. On post, I need to check to see if the user has filled out a questionnaire, and if not, pop up a dialog telling them to complete it before redirecting them to the questionnaire page. The condition check works, as does the Reponse.Redirect. The pop up code that I got from here does not. Any ideas. Here's the code:

In the head of the doc, I have this:

<link href="~/Content/jquery-ui-1.12.1.css"  rel="stylesheet" type="text/css" >
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>

and in the body:

if (IsPost && !questionnaireCompleted)  // this works
{
<div id="dialog" title="Incomplete Questionnaire">
    <p>You must complete the questionnaire before you can save!</p>
</div>

<script type="text/javascript">
    $(function () {
        $("#dialog").dialog();
    });
</script>

    Response.Redirect("~/Sections/Questionnaire?id=" + id); // this works
}

Sorry, this seems confusing. It seems you are trying to output some markup to the page based on condition, but then immediately redirect to another page, instead of returning current page with new markup. How do you expect this to work? — Andrei, Oct 27 '16 at 21:00
What I'm trying to do is notify the user that they need to make changes on another page before redirecting them there to make said changes. I'll leave it up to them to navigate back to here when they're done there. — Phil N DeBlanc, Oct 27 '16 at 21:05
But that is not what code is doing then. Again, this is server side only, so you are redirecting immediately. What you may want to do though is to remove this response.redirect, return the markup with the script, and then on the client side display the popup and do redirect there — Andrei, Oct 27 '16 at 21:11
Thanks for your patience, Andrei, but I don't understand how to do that. I'm a C# backend guy that got thrown into this. — Phil N DeBlanc, Oct 27 '16 at 21:17

score 0 · Answer 1 · answered Oct 27 '16 at 21:00

0

You may need to switch the div tag and the script tag, as the script/function gets loaded before the actual modal.

answered Oct 27 '16 at 21:00

Jacobalo

233
1
4
13

score 0 · Answer 2 · answered Oct 27 '16 at 21:02

0

Are you including these scripts and css:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

answered Oct 27 '16 at 21:02

Just_Do_It

821
7
20

I have the last two js files copied locally, and added the first css as well. I don't see the style.css anywhere in the project. – Phil N DeBlanc Oct 27 '16 at 21:11

Phil N DeBlanc · Answer 3 · 2016-10-28T18:15:23.783

Got it using a helper function:

@helper SectionCheck( string id )
{
<div>
    <div id="dialog" title="Incomplete MRB Form" data-param="@id">
        <p>You must complete the questionnaire before you can save!</p>
    </div>

    <script type="text/javascript">
        $(function () {
            var ID = document.getElementById('dialog').getAttribute(['data-param']);
            $("#dialog").dialog({
                modal: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = "MRB?id=" + ID;
                    }
                }
            });
        });
    </script>
</div>
}

Modal Pop up doesn't work

3 Answers3