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,
LVL 1
Moti Mashiah.NET DeveloperAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Ok, I see the problem. My solution was based on Bootstrap and you are using jQueryUI.

I also noticed you were not including the jQuery library in the code you posted - might have been elsewhere on the page.

Here is some code that works on the jQueryUI dialog - you may want to markup your dialog code differently
CSS (just changed the width of the progress bar)
<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;
  width: 50%;
  margin: 15% auto 0 auto;
}
</style>

Open in new window

HTML - changed the dialog markup to jQueryUI
<h2>Pathtest</h2>

<button class="btn btn-primary" id="open">Open</button>
<!-- Modal -->
<div id="myModal" title="Basic dialog" style="display: none">
  <p id="namedataid"></p>
  <button class="close-modal">Close</button>
</div>

Open in new window

jQuery - changed code to use jQueryUI
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">  
$(function () {
  $('#open').click(Opendialog);
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('#myModal').dialog('close');
  });
});
  
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").dialog({modal:true});
      $("#namedataid").html(data);
      $("#progressbar").remove();
      $('#overlay').remove();
    }
  });
}
</script>

Open in new window

Working sample here
0
 
Julian HansenCommented:
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
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Julian HansenCommented:
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.
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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

0
 
Kelvin McDanielSr. Developer/ConsultantCommented:
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!
0
 
Julian HansenCommented:
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?
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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.
0
 
Julian HansenCommented:
An assist would have been appreciated based on this comment. The accepted solution did not address the popup or AJAX aspects of the problem.
1
 
Moti Mashiah.NET DeveloperAuthor Commented:
You just gave me all the tools to solve the issue, so I accepted it as a sulotion.
0
 
Julian HansenCommented:
That was not my solution. You accepted another post.
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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.
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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

0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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.
0
 
Kelvin McDanielSr. Developer/ConsultantCommented:
@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.
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
Thank you for all your help guys.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.