locked
click button turn background grey RRS feed

  • Question

  • User536624004 posted

    When the user clicks a button on the menu I want the background to turn grey until the process is done. My project is MVC 5.2.4.0, .NET Framework 4.6.2, Visual Studio 2017.

    Here is the code I have, when the user clicks the button the background does NOT change color. How do I get the background to change to grey when the user clicks a button and when the process is done then it will show the next screen. Currently the Dashboard in my project takes about 5 seconds to load all data, so I want the user to know to wait until the computer is done.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>my app</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
     
        <script type="text/javascript">
                $(function () {
                    $(".btnMenu").click(function () {
                        document.body.style.cursor = 'wait';
                        document.bgColor = "grey";
                    });
                });
            </script>
     
    </head>
    <body>
    <a href="" style="float:left; margin-right:10px; padding-top:5px; padding-left:5px"><img src="~/Images/logo.png" height="50" /></a>
    <div id="my-MenuBar">
    My App
    <br />
    <nav>
    <ul>
    <li>
    <input type="button" CssClass="btnMenu" class="btnMenu" value="Dashboard" onclick="location.href='@Url.Action("Dashboard", "Home")'" />
    </li>
    Sunday, June 16, 2019 7:15 PM

All replies

  • User-2054057000 posted

    You can use jQuery CSS method to turn background color to grey.

    $("#anyDiv").css("background-color", "Grey");

    Monday, June 17, 2019 3:26 AM
  • User1520731567 posted

    Hi LoganJH,

    LoganJH

    How do I get the background to change to grey when the user clicks a button and when the process is done then it will show the next screen.

    According to your need,you could decorate your div with CSS,and use setTimeout function to wait for a while and then redirect to the other page;

    Here is my simple demo:

    <style type="text/css">
    
        #overlay {
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 999;
            ;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".btnMenu").click(function () {
                $("#overlay").show();
                window.setTimeout(
                    function () {
                        window.location.href = "@Url.Action("Dashboard", "Home")";
                    }, 5000);
            });
        });
    </script>
    <div id="overlay"></div>
    <input type="button" CssClass="btnMenu" class="btnMenu" value="Dashboard" />

    How it works:

    Best Regards.

    Yuki Tao

    Monday, June 17, 2019 8:00 AM
  • User536624004 posted

    I get Error: '$' is undefined

    Here is my jQuery

        <script type="text/javascript">
            $(function () {
                $(".btnMenu").click(function () {
                    $("#anyDiv").css("background-color", "Grey");
                });
            });
        </script>



    Monday, June 17, 2019 6:16 PM
  • User536624004 posted

    Hi Yuki Tao,

    Your example is set at 5 minutes. The time is different can between 2 minutes and 15 minutes. So I don't want to hard code time.

    I want the background to change to grey when process is done, then my code will call the view again and the background will return to the first color, (not grey).

    Monday, June 17, 2019 6:19 PM
  • User409696431 posted

    Did you include the JQuery script in your page?  You can't run JQuery without it.

    Monday, June 17, 2019 11:59 PM
  • User409696431 posted

    "I want the background to change to grey when process is done, then my code will call the view again and the background will return to the first color, (not grey)."

    What process?

    If the "process" is just clicking on a menu, then there is no sense in changing the background color "when the process is done" because you'll be on a new page when the process is done.

    Can you be more clear about what  you are trying to achieve?

    Tuesday, June 18, 2019 12:03 AM
  • User1520731567 posted

    Hi LoganJH,

    I get Error: '$' is undefined

    It means missing reference files.

    try this:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    

    Your example is set at 5 minutes. The time is different can between 2 minutes and 15 minutes. So I don't want to hard code time.

    I want the background to change to grey when process is done, then my code will call the view again and the background will return to the first color, (not grey).

    The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

    Tip: 1000 ms = 1 second.

    If you want to correspond to the actual time,I suggest you could call ajax function when click button,for example,

    the ajax  can call a JsonResult type action(whcih return Json) and the success callback function wait for the action and then redirect the other page.

    <script type="text/javascript">
        $(function () {
            $(".btnMenu").click(function () {
                $("#overlay").show();
                $.ajax({
                    url: "yourActionName/yourControllerName",//the url is the action which call for data
                    type: 'GET',
                    success: function (response) {
                    window.location.href = "@Url.Action("yourActionName2", "yourControllerName2")";//the url is the action which call for redirect
                    }
                })
    
            });
        });
    </script>

    Best Regards.

    Yuki Tao

    Tuesday, June 18, 2019 7:20 AM