asked on

ASP.NET MVC Jquery

Hi Guys,

I'm trying to popup modal dialog (bootstrap) and run progressbar untill the popup will launch as the popup goes through ajax query big data from the server and show in the view.

What I'm doing:
First I'm using the jquery UI.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Open in new window

Then I wrote something like that:

function Opendialog() {
            $("#progressbar").progressbar({
                value: false
            });
                $.ajax({
                    type: "GET",
                    url: "/Home/UnitTest",
                    dataType: "html",
                    success: function (data) {
                        $("#nameid").modal('show');
                        $("#namedataid").html(data);
                        $("#progressbar").hide();
                    }
                });
        }

Open in new window

The problem I have is when I click the button to open dialog I get the progressbar running first as you see in my script, then I call ajax open the popup dialog and in the end I'm hiding the progressbar.

This is work, but i'm not sure it is the right way as I want to make sure when the progressbar is running the users cant do anything else until the popup show up, but in this case users can hit any button even though the progressbar running.

Please help.

Thanks,

Julian Hansen

You can put up an overlay that prevents interaction with the screen
CSS

<style type="text/css">
#overlay {
  width: 100%;
  position: fixed;
  height: 100%;
  background: rgba(0,0,0,.75);
  z-index: 1000;
  top: 0;
  left: 0;
}
#progressbar {
  z-index: 2000;
  margin-top: 15%;
}
</style>

Open in new window

HTML

 
<button class="btn btn-primary" id="open">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="namedataid"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

JQuery

<script>
$(function() {
  $('#open').click(Opendialog);
});
function Opendialog() {
  $('body').append(
    $('<div/>', {id: 'overlay', css:{height: $(document).height()}})
    .append(
      $('<div/>', {id: 'progressbar'}).progressbar({value: false})
    )
  );
  
  $.ajax({
    type: "GET",
    url: "slow.php",
    dataType: "html",
    success: function (data) {
      $("#myModal").modal('show');
      $("#namedataid").html(data);
      $("#progressbar").remove();
      $('#overlay').remove();
    }
  });
}
</script>

Open in new window

Working sample here

Moti Mashiah

ASKER

Hi Julian,

Thank you for your great answer.

I have one more issue and I'm wondering if you have solution for this one as well.:)
I used the code you wrote me, but I didn't use the overlay for now as I wanted to make sure that everything works fine.

The issue I have now is when I open the dialog the progressbar running fine then the dialog open and the progressbar remove, but now when I close the dialog and try to open again the dialog is not opening.

Do you have any idea why?

Thanks again.

Julian Hansen

I would need to see your code - as you can see from the sample above the dialog can be opened after it has been closed.

Moti Mashiah

ASKER

Here is my code:

@model Pathunc.Models.pics
@{
    ViewBag.Title = "Pathtest";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@*<link rel="stylesheet" href="/resources/demos/style.css">*@
<style>
    #progressbar .ui-progressbar-value {
        background-color: #ccc;
    }
</style>
<br />
<br />
<h2>Pathtest</h2>

<br />
<div id="progressbar"></div>
<br />
<br />
<button onclick="clickbutton()">Run progress</button>

<br />
<br />
<div id="nameid" class="modal fade" aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color:lightblue">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Names</h4>
            </div>
            <div class="modal-body">
                <div id="namedataid">
                    @Html.Partial("_unittest", Model.looping)
                </div>
            </div>
        </div>
    </div>
</div>





@section scripts{
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">  
        function clickbutton() {
            $("#progressbar").progressbar({
                value: false
            });
                $.ajax({
                    type: "GET",
                    url: "/Home/UnitTest",
                    dataType: "html",
                    success: function (data) {
                        $("#nameid").modal('show');
                        $("#namedataid").html(data);
                        $("#progressbar").remove();
                    }
                });
        }

    </script>
}

Open in new window

Kelvin McDaniel

There's a couple of issues going on with your provided code so I had to make a few assumptions.

The things I've noticed...

You're mixing "pure" and framework-based code in a way that isn't conducive, meaning that if you're going to use jQuery and Bootstrap you need to make sure they are ready before you try to use them.

It looks like you're completely removing your progressbar node in the success function.

After quite a bit of thrashing and mangling I simplified things so that you can more easily see the intent of my suggestion (instead of getting bogged down in what does or doesn't work in your provided code). Basically, for whatever reason that I don't quite understand (and don't have the time to research), acting directly on the progressbar element causes it to be removed from the DOM. It could just be that it appears that way on jsBin, but I got the same apparent result on jsFiddle as well. So I wrapped the progressbar in a div and used that container for showing and hiding purposes.

Please review this jsBin for a working example. It's not a modal, but I'll leave that part to you since you probably already have that working AND that's not really the intent of your OP.

Good luck!

Julian Hansen

You did not copy my code exactly.
In my code the progress bar is created as part of the Overaly - see Line 8-10 in the jQuery listing.
Because we create the progress bar dynamically we remove it in the success handler.

The code you posted does not appear to be using the Overlay method from my sample?

Moti Mashiah

ASKER

Yup, I didn't use the overlay, because I was trying to see if the concept with the popup and progressbar working first.

Anyways, I will try to use jsbin right now and figure out how I can make it work.

Thanks a lot.

Julian Hansen

An assist would have been appreciated based on this comment. The accepted solution did not address the popup or AJAX aspects of the problem.

Moti Mashiah

ASKER

You just gave me all the tools to solve the issue, so I accepted it as a sulotion.

Julian Hansen

That was not my solution. You accepted another post.

Moti Mashiah

ASKER

I just paid attention that another expert was involve in this solution. When I accepted I didn't pay attention and I'm very sorry as you were deserve the point.

I'm really sorry. if I could open the question and change I would do it.

Thanks.

Moti Mashiah

ASKER

Julian,

I have written your code and still I have this issue that when I close the dialog and open again nothing happens, so I have to refresh my page and then it works.

Please, see my code below:

@model Pathunc.Models.pics
@{
    ViewBag.Title = "Pathtest";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@*<link rel="stylesheet" href="/resources/demos/style.css">*@
@*<style>
    #progressbar .ui-progressbar-value {
        background-color: #ccc;
    }
</style>*@
<style type="text/css">
    #overlay {
        width: 100%;
        position: fixed;
        height: 100%;
        background: rgba(0,0,0,.75);
        z-index: 1000;
        top: 0;
        left: 0;
    }

    #progressbar {
        z-index: 2000;
        margin-top: 15%;
    }
</style>


<br />
<br />
<h2>Pathtest</h2>

<br />
<div id="progressbar"></div>
<br />
<br />


<br />
<br />

<button class="btn btn-primary" id="open">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div id="namedataid"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>




@section scripts{
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">  
        $(function () {
            $('#open').click(Opendialog);
        });
        function Opendialog() {
            $('body').append(
              $('<div/>', { id: 'overlay', css: { height: $(document).height() } })
              .append(
                $('<div/>', { id: 'progressbar' }).progressbar({ value: false })
              )
            );

            $.ajax({
                type: "GET",
                url: "/Home/UnitTest",
                dataType: "html",
                success: function (data) {
                    $("#myModal").modal('show');
                    $("#namedataid").html(data);
                    $("#progressbar").remove();
                    $('#overlay').remove();
                }
            });
        }

    </script>
}

Open in new window

Moti Mashiah

ASKER

Julian,

I did some troubleshooting and I found that when I close the popup modal and open again I'm getting error on - $('<div/>', { id: 'progressbar' }).progressbar({ value: false }) error:Uncaught TypeError: $(...).progressbar is not a function

I think as we removed the progressbar after we finish the ajax makes the issue as we lose this function for the next appearance.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kelvin McDaniel

@Julian Hansen you're more than welcome to the points. :) My answer was to @Moti Mashiah's updated code which was posted after your overlay solution.

@Moti Mashiah I fully expected that @Julian Hansen would get all or at least the lion's share of the points; my answer was for the secondary issue of the progress bar no longer working after the first click.

Cheers to you both.

Moti Mashiah

ASKER

Thank you for all your help guys.