CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjquery-ui
Panadol Chong
Panadol Chong

Reputation: 1903

Overlay not working when I upgrade to jQuery 1.12.1

Good day,

I am upgrading my web application system jQuery to version 1.12.1. And found that the overlay is not working in new jQuery version.

I am using ajax to pop out a dialog with overlay. Here is my ajax code:

$.ajax({
        async: false,
        url: locurl,
        data: dataPackage,
        success: function(result){
            createServiceModel();
            $("#viewService").dialog({
                height: 645,
                width: 720,
                resizable: false,
                modal: true,
                autoOpen: true,
                bgiframe: true,
                overlay: {
                    opacity: 0.4, 
                    backgroundColor: "black"
                }
            });

                $("#serviceContent").append(result);
         },
         error: function (xhr, ajaxOptions, thrownError){
            if(xhr.status==403) alert("You are not allowed to proceed due to changes in your profile. Please re-log in again.");
            else alert("Connection Error. Please try again later. If error persisted, please contact System Administrator.");
        }
    });

This is working fine with my old jQuery.

Here is the html code I copy from Chrome debug mode:

<div class="ui-dialog-overlay" style="border-width: 0px; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 1343px; height: 628px; opacity: 0.4; background-color: red; z-index: 1001;"></div>

<div class="ui-dialog ui-draggable" tabindex="-1" 
    style="display:block;position:absolute;width:720px;height:645px;overflow:hidden;z-index:1002;outline:0px;top:5px;left:311.5px;;;">
    <!-- other html code here -->
    </div>

I found that the ui-dialog-overlay is actually can find from ui.dialog.js.

However, when I upgrade to jQuery UI 1.12.1, I found that ui-dialog-overlay no longer exists in the jquery-ui.js, but become ui-dialog-overlays.

I downloaded the latest jQuery js files from http://jqueryui.com/download/

Is it the overlay syntax changes in ajax code? I tried change the overlay by adding 's' on it to

overlays: {
            opacity: 0.4, 
            backgroundColor: "black"
        }

But still not working.

Kindly advise.

Upvotes: 2

Views: 1570

Answers (1)

Panadol Chong
Panadol Chong

Reputation: 1903

Good day,

I found my own solution.

I should not only upgrade jQuery. But I need to upgrade the jQuery UI and also the css file as well.

For this case, I hit this problem is because of my ui.dialog.css is still at the old version, and the overlay class name is not match, that's why the overlay function not work.

After I upgrade my ui.dialog.css, my problem solved.

Upvotes: 2

Related Questions