jqueryui datepicker throwing error at code relating to zIndex

I am deve开发者_JS百科loping an asp.net page/application. I have created a textbox that i set as a datepicker using the datepicker from jqueryui. in firefox and chrome the datepicker does not render. in IE9 the date picker renders if i ignore the error. the error is at line 644 in jquery.ui.datepicker.js.

the code where the error is thrown is here.

inst.dpDiv.zIndex($(input).zIndex()+1);

this is the message that VS displays when it catches the error

Microsoft JScript runtime error: Object doesn't support this property or method

i'm not sure what is causing the issue. I have looked for zindex issues, and the ones i'm finding are related to dialog appearing behind other elements. i don't have the happening.

Add jquery.ui.core.js will be OK

I had this same issue and fixed it by making sure that I had the most current jQuery and jQuery UI referenced.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

.zIndex() is not a jQuery method (search the jQuery API, nothing there)

You should use the .css('z-index','100')

Also a side note:

Whenever working in ASP .NET I do not use the $ sign to access jQuery I use

inst.dpDiv.zIndex(jQuery(input).zIndex()+1);

Depending on what ASP .NET framework you are using Win Forms, MVC etc the built in MSFT Ajax can collide with jQuery.

Use this:

$.zIndex = $.fn.zIndex = function (opt) {            
        var def = { inc: 10, group: "*" };
        $.extend(def, opt);
        var zmax = 0;
        $(def.group).each(function () {
            var cur = parseInt($(this).css('z-index'));
            zmax = cur > zmax ? cur : zmax;
        });
        if (!this.jquery)
            return zmax;

        return this.each(function () {
            zmax += def.inc;
            $(this).css("z-index", zmax);
        });
    }

I included(core files),

        ui.css and ui.core.js files

It's works for me..

Axel22 gave the correct answer to solve this problem for me.

This is because the jquery-ui-datepicker.js script depends on the jquery-ui-core.js script.

This is made clear on the jQuery Datepicker Documentation page, within the 'Overview' tab, to the right, there is a list of dependencies.

Add the script reference (../Scripts/jquery.ui.core.js) it will work Refer to jquery.ui.core.js library

This is my solution:

//inst.dpDiv.zIndex(jQuery(input).zIndex()+1); //we don't need it anymore

$.zIndex = '30000'; // i set the zindex at the higher value