JQueryDatepicker is not working.

Mayank Gaur9y ago

Hi Megna, your date picker issue is resolved right ?

For your new issue please replace this

return new HtmlString("

" + @item.AutoClose + "

"

);

by

return new HtmlString("

" + @item.AutoClose + "

"

one more thing you need to check whether your showpopup is working or not for this press F12 and go to the console section and call your Showpopup function

0

Bidyasagar Mishra9y ago

Only add a single version of jquery and remove all the different version.

Add plugin.

intialize your datepicker textbox id like below format

$("#txtEffectiveDateFrom").datepicker({

defaultDate: "",

changeMonth: true,

changeYear: true,

dateFormat: "M dd, yy",

yearRange: "1950:2050",

minDate: '0'

});

-1

Dharmraj Thakur9y ago

Just make your sequence like below... and remove any 1 jquery from there...

@model CRWeb2.Models.ComplianceReportModel
@Styles.Render("~/Content/css")
'@Url.Content("~/Scripts/jquery.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery-3.2.0.min.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery-ui.min.js")' type="text/javascript">
@*'@Url.Content("~/Scripts/jquery-1.12.4.intellisense.js")' type="text/javascript">*@
'@Url.Content("~/Scripts/jquery-1.12.4.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery-1.12.4.min.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery-ui-1.12.1.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")' type="text/javascript">
@*'@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")' type="text/javascript">*@
@*'@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")' type="text/javascript">*@
@*'@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")' type="text/javascript">*@
@*'@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")' type="text/javascript">*@
'@Url.Content("~/Scripts/knockout-3.4.2.debug.js")' type="text/javascript">
'@Url.Content("~/Scripts/modernizr-2.6.2.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery.validate.date.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery.validate.min.js")' type="text/javascript">
'@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")' type="text/javascript">
@*@Scripts.Render("~/bundles/modernizr")*@
@{
ViewBag.Title = "List Of Servers";
var grid = new WebGrid(source: Model.ListComplianceExceptionReportDetails, canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.All);
}

0

Manav Pandya9y ago

you should put [ jquery-3.2.0.min.js ] top of the head section and avaoid multiple copy of jquery files

Mark as Accepted if answer is helpful

+1

Rajkiran Swain9y ago

I think you are missing with datetimepicker js

 type="text/javascript" src="Scripts/jquery_calendar/jquery-ui.js">

or

 src="Scripts/jquery-ui-1.10.4.js">

$(document).ready(function () {     $('.openCalendar').datepicker({         closeText: "Select",         changeMonth: true,         changeYear: true });});

0

Megna Musapeta9y ago

@Mayank, Thanks a lot for your help, I tried the code which you have give, now i am getting this error.

0x800a1391 - JavaScript runtime error: 'ShowPopup' is undefined

Please help, I am New to MVC and coding

0

Manas Mohapatra9y ago

If you have 2 versions of jQuery on the page, the jQuery UI datepicker hangs itself into the first version, then the second one overwrites the first one and thus the datepicker is not available when the Document.Ready() event is fired.

The solution is to move the second jquery include up and remove the first one.

Please check which version of jquery you are using and check jQuery is loaded properly because we have bundling in MVC.

0

Mayank Gaur9y ago

Hi Megna,
I have changed in your file plz check,Is it now working

0

Megna Musapeta9y ago

Now I am getting this Error "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'" again

0

Megna Musapeta9y ago

I Added the datepicker in the Partial View.

@model CRWeb2.Models.ComplianceReportModel

Set Exception Flag

Instance Name

@{

if(Model.ListComplianceReportExceptionDetails != null )

{

@Html.LabelFor(m => m.ListComplianceReportExceptionDetails.InstanceName, new { @id = "lblInstanceName"})

}

else

{

@Html.LabelFor(m => m.InstanceName, htmlAttributes: new { @id = "lblInstanceName" })

}

Exception Type

@Html.LabelFor(m => m.ExceptionType, new { @id = "lblExceptionType" })

Exception

@if (Model.ExceptionFlag || Model.ListComplianceReportExceptionDetails == null)

{

}

else

{

}

@Html.HiddenFor(m => m.ExceptionFlag)

Document Uploaded

@Html.CheckBoxFor(m => m.ListServerExceptionDocument.DocumentUploaded, new {@id = "CHKDOCUploaded", @checked = "checked" })

Expiration Date

@{

if (@Model.ListServerExceptionDocument != null)

{

@Html.TextBoxFor(m => m.ListServerExceptionDocument.ExpirationDate, new { @id = "txtExpirationDate" })

//@Html.TextBoxFor(m => m.ListComplianceReportExceptionDetails.JobOwner, new { @id = "txtExpirationDate" })

}

else

{

}

@*

Date:

*@

@**@

0

Nigel Fernandes9y ago

The textbox html is missing from the view you posted.

Also the datepicker function is commented out.

Below should work:

<script>
  $( function() {
    $("#txtExpirationDate").datepicker();
  } );
  script>

0

Megna Musapeta9y ago

@model CRWeb2.Models.ComplianceReportModel

@**@

@**@

@**@
@**@
@**@
@**@
@**@
@*

*@

@*
*@

@Styles.Render("~/Content/css")
@*@Scripts.Render("~/bundles/modernizr")*@
@{
ViewBag.Title = "List Of Servers";
var grid = new WebGrid(source: Model.ListComplianceExceptionReportDetails, canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.All);
}

Compliance Report

Select DBA

@Html.DropDownListFor(m => m.PrimaryDBA, new SelectList(Model.ListDBAs), "--Select--", new { @id = "ddlDBA", onchange = "FilterDetails()" });

Select Instance

@Html.DropDownListFor(m => m.InstanceName, new SelectList(Model.ListInstanceNames), "--Select--", new { @id = "ddlInstance", onchange = "FilterDetails()" });

@if (Model.ListComplianceExceptionReportDetails.Count() > 0)
{
@grid.GetHtml(
htmlAttributes: new
{
id = "gridMapping"
},
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns(
//grid.Column(header: "Serial No", format:@

@(item.WebGrid.Rows.IndexOf(item))

),
grid.Column(columnName: "InstanceName", header: "InstanceName"),
grid.Column(columnName: "EnvironmentType", header: "EnvironmentType"),
grid.Column(columnName: "InstanceStatus", header: "InstanceStatus"),
grid.Column(columnName: "IsBackupShare", header: "IsBackupShare"),
grid.Column(columnName: "AutoShrink", header: "AutoShrink"),
grid.Column(header: "AutoClose", format: (item) =>
{
return new HtmlString("

" + @item.AutoClose + "

"
);
}),
grid.Column(columnName: "ExceededBkpTimeFrame", header: "ExceededBkpTimeFrame"),
grid.Column(columnName: "Primary", header: "Primary"),
grid.Column(columnName: "Secondary", header: "Secondary"),
grid.Column(columnName: "ApplicationContactName", header: "ApplicationContactName"),
grid.Column(columnName: "SADisabled", header: "SADisabled"),
grid.Column(columnName: "FlagMemory", header: "FlagMemory"),
grid.Column(columnName: "JobOwner", header: "JobOwner"),
grid.Column(columnName: "DatabaseOwner", header: "DatabaseOwner"),
grid.Column(columnName: "MaintenanceJob", header: "MaintenanceJob"),
grid.Column(columnName: "ServicePackFlag", header: "ServicePackFlag"),
grid.Column(columnName: "SAViolations", header: "SAViolations"),
grid.Column(columnName: "Tempdb_DataFileCount", header: "Tempdb_DataFileCount"),
grid.Column(columnName: "DataAutoGrow", header: "DataAutoGrow"),
grid.Column(columnName: "LogAutoGrow", header: "LogAutoGrow"),
grid.Column(columnName: "DBRecoveryModel", header: "DBRecoveryModel"),
grid.Column(columnName: "MaintVersion", header: "MaintVersion"),
grid.Column(columnName: "DBCompatibilityLevel", header: "DBCompatibilityLevel"),
grid.Column(columnName: "FlagMaintVersion", header: "FlagMaintVersion"),
grid.Column(columnName: "FlagVersionName", header: "FlagVersionName"),
grid.Column(columnName: "BackupCompression", header: "BackupCompression"),
grid.Column(columnName: "XPCmdShell", header: "XPCmdShell"),
grid.Column(columnName: "EncryptionEnabled", header: "EncryptionEnabled"),
grid.Column(columnName: "IsIdera", header: "IsIdera"),
grid.Column(columnName: "VLFCount", header: "VLFCount")
))
}
else
{

No Records Found!

}

@**@

0

Nigel Fernandes9y ago

Can you please share your new view file after the script changes which I suggested ?

0

Megna Musapeta9y ago

Nigel, did you reply on my post, but iam unable to see, can you please check and let me know, I need this working i am trying from past month but no luck:(

Thanks,

Megna.

0

Nigel Fernandes9y ago

Hi Megna,

Can you please share your new view file after the changes you made?

0

Megna Musapeta9y ago

Please anyone help, I am trying this from 1 month but not getting the Datepicker.

0

Megna Musapeta9y ago

Hello Nigel,

I downloaded the File which you mentioned.

jquery-ui.js script

I modified my script

@model CRWeb2.Models.ComplianceReportModel

I am not getting a Calendar in my Popup.

Thanks,

Megna.

0

Nigel Fernandes9y ago

Refer this URL:

http://jqueryui.com/download/

0

Nigel Fernandes9y ago

JQUERY: : 1.7 +

JQUERY UI: 1.12.1

Just remember include only one reference to the js file. If you include multiple references it will conflict with one another.

0

Megna Musapeta9y ago

Nigel, So what do you want me to use. I mean which version of jquery?

0

Nigel Fernandes9y ago

I noticed for most of the js files that you've included, you have added both the normal file as well as the min.js. Only one is required.

Eg:

jquery-1.12.4.js and jquery-1.12.4.min.js

Also you have added multiple jquery and jqueryui js files.

>>

0

Megna Musapeta9y ago

Nigel,

I have Attached a Zip File with the View & Partial View I am I am Using.

View:

@model CRWeb2.Models.ComplianceReportModel

@**@

@Styles.Render("~/Content/css")

@*@Scripts.Render("~/bundles/modernizr")*@

@{

ViewBag.Title = "List Of Servers";

var grid = new WebGrid(source: Model.ListComplianceExceptionReportDetails, canPage: true, rowsPerPage: 10);

grid.Pager(WebGridPagerModes.All);

}

Compliance Report

Select DBA

@Html.DropDownListFor(m => m.PrimaryDBA, new SelectList(Model.ListDBAs), "--Select--", new { @id = "ddlDBA", onchange = "FilterDetails()" });

Select Instance

@Html.DropDownListFor(m => m.InstanceName, new SelectList(Model.ListInstanceNames), "--Select--", new { @id = "ddlInstance", onchange = "FilterDetails()" });

@if (Model.ListComplianceExceptionReportDetails.Count() > 0)

{

@grid.GetHtml(

htmlAttributes: new

{

id = "gridMapping"

},

tableStyle: "webgrid-table",

headerStyle: "webgrid-header",

footerStyle: "webgrid-footer",

alternatingRowStyle: "webgrid-alternating-row",

rowStyle: "webgrid-row-style",

columns: grid.Columns(

//grid.Column(header: "Serial No", format:@

@(item.WebGrid.Rows.IndexOf(item))

),

grid.Column(columnName: "InstanceName", header: "InstanceName"),

grid.Column(columnName: "EnvironmentType", header: "EnvironmentType"),

grid.Column(columnName: "InstanceStatus", header: "InstanceStatus"),

grid.Column(columnName: "IsBackupShare", header: "IsBackupShare"),

grid.Column(columnName: "AutoShrink", header: "AutoShrink"),

grid.Column(header: "AutoClose", format: (item) =>

{

return new HtmlString("

" + @item.AutoClose + "

"

);

}),

grid.Column(columnName: "ExceededBkpTimeFrame", header: "ExceededBkpTimeFrame"),

grid.Column(columnName: "Primary", header: "Primary"),

grid.Column(columnName: "Secondary", header: "Secondary"),

grid.Column(columnName: "ApplicationContactName", header: "ApplicationContactName"),

grid.Column(columnName: "SADisabled", header: "SADisabled"),

grid.Column(columnName: "FlagMemory", header: "FlagMemory"),

grid.Column(columnName: "JobOwner", header: "JobOwner"),

grid.Column(columnName: "DatabaseOwner", header: "DatabaseOwner"),

grid.Column(columnName: "MaintenanceJob", header: "MaintenanceJob"),

grid.Column(columnName: "ServicePackFlag", header: "ServicePackFlag"),

grid.Column(columnName: "SAViolations", header: "SAViolations"),

grid.Column(columnName: "Tempdb_DataFileCount", header: "Tempdb_DataFileCount"),

grid.Column(columnName: "DataAutoGrow", header: "DataAutoGrow"),

grid.Column(columnName: "LogAutoGrow", header: "LogAutoGrow"),

grid.Column(columnName: "DBRecoveryModel", header: "DBRecoveryModel"),

grid.Column(columnName: "MaintVersion", header: "MaintVersion"),

grid.Column(columnName: "DBCompatibilityLevel", header: "DBCompatibilityLevel"),

grid.Column(columnName: "FlagMaintVersion", header: "FlagMaintVersion"),

grid.Column(columnName: "FlagVersionName", header: "FlagVersionName"),

grid.Column(columnName: "BackupCompression", header: "BackupCompression"),

grid.Column(columnName: "XPCmdShell", header: "XPCmdShell"),

grid.Column(columnName: "EncryptionEnabled", header: "EncryptionEnabled"),

grid.Column(columnName: "IsIdera", header: "IsIdera"),

grid.Column(columnName: "VLFCount", header: "VLFCount")

))

}

else

{

No Records Found!

}

Partial VIEW:

@model CRWeb2.Models.ComplianceReportModel

Set Exception Flag
Instance Name	@{ if(Model.ListComplianceReportExceptionDetails != null ) { @Html.LabelFor(m => m.ListComplianceReportExceptionDetails.InstanceName, new { @id = "lblInstanceName"}) } else { @Html.LabelFor(m => m.InstanceName, htmlAttributes: new { @id = "lblInstanceName" }) } }
Exception Type	@Html.LabelFor(m => m.ExceptionType, new { @id = "lblExceptionType" })
Exception	@if (Model.ExceptionFlag \|\| Model.ListComplianceReportExceptionDetails == null) { } else { } @Html.HiddenFor(m => m.ExceptionFlag)
Document Uploaded	@Html.CheckBoxFor(m => m.ListServerExceptionDocument.DocumentUploaded, new {@id = "CHKDOCUploaded", @checked = "checked" })
Expiration Date	@{ if (@Model.ListServerExceptionDocument != null) { @Html.TextBoxFor(m => m.ListServerExceptionDocument.ExpirationDate, new { @id = "txtExpirationDate" }) //@Html.TextBoxFor(m => m.ListComplianceReportExceptionDetails.JobOwner, new { @id = "txtExpirationDate" }) } else { } }

@*

Date:

*@

@**@

0

Nigel Fernandes9y ago

Hi

Can you please post only your view file ?

--------------------------------------------------------

Also check that you have referenced both Jquery and Jquery UI js files and that both are on the compatible version.

0