Solved

ASP.NET MVC Jquery

Posted on 2016-09-20
17
52 Views
Last Modified: 2016-09-21
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,
0
Comment
Question by:Moti Mashiah
  • 8
  • 6
  • 2
17 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41808166
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41808645
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41808722
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41808772
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
 
LVL 11

Expert Comment

by:azarc3
ID: 41809163
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41809212
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41809238
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41809250
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41809277
You just gave me all the tools to solve the issue, so I accepted it as a sulotion.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41809397
That was not my solution. You accepted another post.
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41809411
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41809442
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41809459
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41809533
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
 
LVL 11

Expert Comment

by:azarc3
ID: 41809583
@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
 
LVL 1

Author Closing Comment

by:Moti Mashiah
ID: 41809638
Thank you for all your help guys.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now