I have a link within my View and when users click on that link the following JS file executes. What I am trying to do is to disable or sort of blur out the background when the dialog box is open. I know there are specific plug-ins for that for example BlockUI but I saw this example http://jsfiddle.net/tctc2/105/ and it works fine. I used the same logic but my page background does not blur out.
JS file for the dialog box:
var RunDialog;
$(document).ready(function () {
RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400,
buttons: { "Continue": function () {
$.post("/RunLogEntry/Create", $("#form").serialize(), function (json) {
}, "json");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$('#RunDatesChildDialogLink').click(function () {
RunDialog.dialog('open');
$("#runDatestreeview").parent().appendTo("form");
return false;
});
$("#runDatestreeview").parent().appendTo("form");
});
VIEW:
The div in question is: runDatestreeview and the link which opens this dialogbox is right above it in the following:
<fieldset>
<legend>Enter a new Run Log Entry</legend>
@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{
@*<div id="test">*@
@Html.ValidationSummary(true)
<div class="exception">@(ViewBag.ErrorMessage)</div>
<div class="bodyContent">
<span class="leftContent">Load List File (Select): </span><span class="rightContent">
<input type="file" name="file" id="file1" style="width: 500px" />
</span>
</div>
if (Model.LoadListStoredFileName != null) {
<div class="bodyContent">
<span class="leftContent">Attached Load List: </span><span class="rightContent">
@Html.ActionLink(Model.LoadListFileName, "Download", new { @file = Model.LoadListStoredFileName })
</span>
</div>
}
<div class="bodyContent">
<span class="leftContent">Output File (Select): </span><span class="rightContent">
<input type="file" name="file" id="file2" style="width: 500px" />
</span>
</div>
if (Model.OutputStoredFileName != null) {
<div class="bodyContent">
<span class="leftContent">Attached Output: </span><span class="rightContent">
@Html.ActionLink(Model.OutputFileName, "Download", new { @file = Model.OutputStoredFileName })
</span>
</div>
}
<div class="bodyContent">
<span class="leftContent">.LOG File(s) -Zip: </span><span class="rightContent">
<input type="file" name="file" id="file3" style="width: 500px" />
</span>
</div>
<div class="bodyContent">
<span class="leftContent">Import Files: </span>
<button name="submit" class="art-button" type="submit" value="Upload" style="width: 100px">
Upload</button>
<button name="submit" class="art-button" type="submit" value="Remove" style="width: 100px">
Remove</button>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Operator")
</span><span class="rightContent">
@Html.DropDownList("OperatorID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run ID")
</span><span class="rightContent">[Generated] </span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Start Date / Time")
</span><span class="rightContent">
@Html.EditorFor(model => model.RunDate)
@Html.DropDownList("Hour", ListHelpers.HourList())
:
@Html.DropDownList("Minute", ListHelpers.Minute15List())
@Html.DropDownList("AMPM", ListHelpers.AMPMList())
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("System")
</span><span class="rightContent">
@Html.DropDownList("SystemID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Type")
</span><span class="rightContent">
@Html.DropDownList("RunTypeID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Description")
</span><span class="rightContent">
@Html.TextAreaFor(model => model.RunDescription, new { style = "width: 600px; height=30px" })
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Assay Performance Issues")
</span><span class="rightContent">
@Html.DropDownList("AssayPerformanceIssues1", ListHelpers.YesNoList())
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Tests/Cycles Requested")
</span><span class="rightContent">
@Html.EditorFor(model => model.SPTestsRequested)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Tests/Cycles Completed")
</span><span class="rightContent">
@Html.EditorFor(model => model.SPTestsCompleted)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Status")
</span><span class="rightContent">
@Html.DropDownList("RunStatusID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Assay")
</span><span class="rightContent">
@Html.ListBoxFor(model => model.SelectedAssayIDs, new MultiSelectList(RunLog.Domain.Lists.GlobalList.AssayListItems(), "ID", "Name", Model.SelectedAssayIDs))
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Error Code")
</span><span class="rightContent"><span id="ChildDialogLink" class="treeViewLink">Click
here to Select Error Codes</span>
<br />
<span id="ErrorCodeDisplay" style="cursor: pointer; text-decoration: underline;">@(Model.ErrorDescription)</span>
@Html.HiddenFor(model => model.ErrorDescription)
</span>
</div>
<div class="bodyContent">
@if (Model.TestExceptionDisplay != null && Model.TestExceptionDisplay.Count() > 0)
{
<span class="leftContent">
@Html.Label("Test Exceptions")
</span><span class="rightContent"><span id="TestExceptionChildDialogLink" class="treeViewLink">
Click here to View Test Exceptions</span>
<br />
<span id="TestExceptionDisplayy"></span></span>
}
</div>
<div id="testExceptiontreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Exception
</th>
<th>
Frequency
</th>
<th>
Comment
</th>
<th>
Replicate Range
</th>
</tr>
</thead>
<tbody>
@if (Model.TestExceptionDisplay != null)
{
@Html.EditorFor(x => x.TestExceptionDisplay)
}
</tbody>
</table>
</div>
@*test div end here*@
@*</div>*@
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Dates")
</span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
Click here to Select Run Dates</span>
<br />
<span id="RunDatesDisplayy"></span></span>
</div>
<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Run Dates:
</th>
</tr>
</thead>
<tbody>
@Html.EditorFor(x => x.RunDatesDisplay)
</tbody>
</table>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Service Entry Request")
</span><span class="rightContent">
@Html.DropDownList("ServiceRequest", ListHelpers.YesNoList())
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Problem Description")
</span><span class="rightContent">
@Html.TextArea("ProblemDescription", new { style = "width: 600px; height: 30px" })
</span>
</div>
if (Model.UserRole == "Admin" || Model.UserRole == "SuperUser")
{
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Active")
</span><span class="rightContent">
@Html.CheckBoxFor(model => model.Active)
</span>
</div>
}
else
{
@Html.HiddenFor(model => model.Active)
}
<p>
<input id="LogType" type="hidden" value="Run" />
<input id="ID" type="hidden" value="0" />
@if (Model.ExitCode == "1")
{
@Html.Hidden("ExitCode", Model.ExitCode)
}
else
{
<input id="ExitCode" type="hidden" value='0' />
}
</p>
@Html.HiddenFor(model => model.MaxReplicateId)
@Html.HiddenFor(model => model.MinReplicateId)
@Html.HiddenFor(model => model.OutputFileName)
@Html.HiddenFor(model => model.OutputStoredFileName)
@Html.HiddenFor(model => model.LoadListFileName)
@Html.HiddenFor(model => model.LoadListStoredFileName)
@Html.HiddenFor(model => model.MinTestCompletionDate)
@Html.HiddenFor(model => model.MaxTestCompletionDate)
@Html.HiddenFor(model => model.UserRole)
@Html.HiddenFor(model => model.Active)
@Html.HiddenFor(model => model.ReplicateBlocksConfirmation)
<div class="bodyContent">
<span class="leftContent"></span><span class="rightContent">
<button id="submit" name="submit" class="art-button" type="submit" value="Create">
Create</button></span>
</div>
}
</fieldset>
<script src="@Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>
<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px;">
<div id="errorCodes">
@Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
@* @Html.RenderTree(RunLog.Domain.Lists.GlobalList.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
*@
</div>
<div id="inputReps" style="display: none;">
</div>
</div>
Alright, so I managed to get your code to work as expected. A few things first.
The example you showed at http://jsfiddle.net/tctc2/105/ uses a very old version of jQuery (1.6.3). This means the methods and actions which the example shows, will not be compatible with newer jQuery versions. You can see this in action by changing the jQuery library to say, version 1.8.2 and trying to run the example. It fails.
However, using that exact environment, the javascript code as you supplied still will not work. The changes below (and at the jsFiddle link) will behave as you expect:
The changes I made where to the variable
RunDialog,autoOpenattribute must be properly camelCased or jQuery won’t understand the attribute.Again, this is only possible with the jQuery environment of V 1.6.3 and jQuery UI 1.8.16. If you wish to utilize the most up to date jQuery library, you’ll need to rewrite the code to be compatible with the newer versions.