Click here to Skip to main content
14,699,740 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,
I'm facing an issue with ASP.NET Web Application (using .NET Framework 3.5).
I've a aspx page called Enrollment that contains a user control named InlineProviderSearch.ascx. The user control will basically be used for searching provider information based on some criteria input by the user. Now the user control contains two div tags (one named dvCity and another dvNotification). On click of the Search button, I call a Web Service passing the city name or zip code, radius (in miles), lastname/firstname. Based on these parameters, the WS returns a list of city. Now if there is a exact match, then search result based on that city will returned else the div tag (dvCity) needs to be popped up like a floating div. This will show a list of cities from which user can select a particular city.
Now when the div pops up the screen should be grayed out and only the div shall be visible like a modal popup. I have tried using Jquery to do so but the background doesn't grey out. Also I've used Ajax ModalPopupExtender control that works fine here but I need to use the Jquery since that is the client's approach. Below is the code snippet:
<script type="text/javascript">
    function cityPopUp() {
        $.blockUI({ message: $('#<%=dvCity.ClientID%>'), css: { width: '500px', height: '120px', top: '25%', left: '25%'} });
        return false;
    }
   
    function confirmationPopUp() {
        $.blockUI({ message: $('#dvNotification'), css: { width: '500px', height: '120px', top: '25%', left: '25%'} });
        return false;
    }
    $(document).ready(function () {
        $('#btnConfirm').click(function () {
            $.unblockUI();
            return true;
        });
        $('#btnCancel').click(function () {
            $.unblockUI();
            return false;
        });
       
    }); 
</script>

Also for the confirmaton popup (showing the dvNotification div), the jquery doesn't work at all. I get a Javascript error as below:
Microsoft Jscript RuntimeError: The object doesn't support this property or method.
This error occurs when the blockUI is called. This happens for both the div tags (dvCity and dvNotification).
Can someone let me know how one can use Jquery to display modal popups (like floating divs) with the background grayed out?

Thanks,
Debsoft
Posted
Updated 24-Jan-11 4:23am
v2

Have you definitely included jquery before the block UI plugin?

e.g. jquery first, then block UI

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.34"></script>


The help pages at BlockUI are pretty comprehensive

http://jquery.malsup.com/block/#dialog[^]

Have a look in the options http://jquery.malsup.com/block/#options[^]
   
Comments
Manfred Rudolf Bihy 24-Jan-11 9:42am
   
You got there first! 5+
Bryian Tan 11-Mar-11 0:08am
   
hi, is it only me? the BlockUI sample is not working on Firefox 3.6.15
Are you sure you have the jQuery plugin loaded. blockUI is not part of jQuery itself, but it can be downloaded from here: jQuery - BlockUI Plugin[^].

jQuery has a great architecture that makes it easy for others to expand its functionality and there are lots of great plugins out there. I thought though that a modal popup was already available for jQuery-UI in the original distribution.

Best Regards,
Manfred
   
v2
Comments
Espen Harlinn 30-Jan-11 16:02pm
   
jQuery to the rescue - 5+
Are you sure you have the jQuery plugin loaded. blockUI is not part of jQuery itself, but it can be downloaded from here: jQuery - BlockUI Plugin[^].

jQuery has a great architecture that makes it easy for others to expand its functionality and there are lots of great plugins out there. I thought though that a modal popup was already available for jQuery-UI in the original distribution.


With Regards
Biswa
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900