I have created a pop up window with needed fields but suddenly I ran into a big amount of issues. I admin that I'm a total newbie speaking about jquery, mvc or css, so I can't detect where the problem is.
The biggest issue is that submin buttons mentioned in div are doing nothing. They simply didn't work.
My div is:
@using (Html.BeginForm("Vehicle", "Home", new { id = "Id" }))
{
<table>
<tr>
<th>Search Criteria:</th>
</tr>
<tr>
<td>Model</td>
<td>
<input class="k-in" style="width: 100px; padding: 0; font-size: 0.9em;" type="text" id="model" name="model" value="@Model.Filter.Model"/>
</td>
</tr>
<tr>
<td>Status</td>
<td>
@{
var statusItems = new List<SelectListItem>()
{
new SelectListItem
{
Value="None",
Text="None",
Selected= Model.Filter.Status == "None" ? true : false
},
new SelectListItem
{
Value="New",
Text="New",
Selected= Model.Filter.Status == "New" ? true : false
}
};
}
@Html.DropDownList("Status", statusItems, "-- Select --", new { @class = "k-dropdown", @style= "width: 120px;font-size: 0.9em; padding: 0;"})
</td>
</tr>
<tr>
<td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Filter" /></td>
<td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Remove Filter" onclick="ClearFilter()" /></td>
</tr>
</table>
}
</div>
The second strange issue is the pop up call itself. Then window appeared, everything seems fine, for a few moments. Then I watch to the screen bottom and I see that after all css style, was added and empty, white space. Actually, when I tried to debug it, I saw that
<div class="ui-widget-overlay ui front"></div>
was placed after footer. As I understand pop up window understand it as an... start point I guess...
And last one... how should I call additional scripts from pop up window? I mean, I have datepicker, but when I tried to add it in pop up window, it's worked but datepicker window appeared in a position where could be div itself if it wasn't a pop up. In onter words, outside the dialog.
My dialog:
$(document).ready(function () {
$('#filterPanel').dialog({
autoOpen: false,
modal: true
});
});
function OpenPanel() {
$('#filterPanel').dialog("open");
}
Help me please to understand, what I am missing?</pre>