Solved

ASP.NET MVC Jquery

Posted on 2016-09-20
17
71 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 2
17 Comments
 
LVL 57

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 57

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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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 57

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 57

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
 
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 57

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 57

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

Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

732 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