jquery daterangepicker nicht modal
Habe ich ein modal-popup (von bootstrap), die geöffnet und enthält einen text-input mit daterangepicker, aber die daterangepicker nicht funktioniert (ich sehe nichts wenn ich auf die textbox) und ich sehe keine Fehler in der Konsole.
Hier ist der Eingang:
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>@DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
id="lastModifiedDateFilter" />
</div>
<div class="modal-footer">
<a href="#" class="btn" onclick="$('#divChooseDossier').modal('hide')">@DossierReceipts.Cancel</a>
</div>
Hier ist der javascript-Code erzeugt, der daterangepicker:
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
Und hier ist das javascript zum öffnen des popup:
$("#divCreateReceipt").modal("show");
Weiß jemand, warum funktioniert das nicht?
Dank
UPDATE
Hier ist der vollständige code für das popup-Fenster:
@{
ViewBag.Title = "Dosare";
}
@using ExpertExecutor.Resources.Dossier
@section leftMenu{
@Html.Partial("_LeftMenu")
}
@Scripts.Render("~/bundles/daterangepicker")
@Scripts.Render("~/bundles/watermark")
@Styles.Render("~/Content/daterangepicker")
<script src="@Url.Content("~/Scripts/jquery.watermark.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("/Scripts/jquery.jqGrid.fluid.js")"></script>
@Html.Hidden("redirectUrl", (string)ViewBag.RedirectUrl)
<div class="form-search form-inline alert alert-info">
<fieldset>
<legend>@Index.FiltersCaption</legend>
<dl>
<dd>
<span>@Index.DossierColumn</span>
<input type="text" id="dossierFilter" class="search-query input-xxlarge" />
</dd>
<dd>
<span>@Index.DossierStatusColumn</span>
@Html.DropDownList("dossierStatusFilter", (List<SelectListItem>)ViewData["DossierStatuses"], new { @class = "input-medium" })
<span>@Index.LastModifiedDateColumn</span>
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
id="lastModifiedDateFilter" />
<span>@Index.LastOperatorColumn</span>
@Html.DropDownList("lastOperatorFilter", (List<SelectListItem>)ViewData["Users"])
</dd>
<dd>
<input type="button" class="btn btn-info" value="@Index.Search" onclick="applyFilter();"/>
<input type="button" class="btn btn-info" value="@Index.ClearFilter" onclick="clearFilter();" />
</dd>
</dl>
</fieldset>
</div>
<div id="dossiersGridWrapper" class="row-fluid">
<table id="dossiersGrid"></table>
<div id="dossiersGridPager"></div>
</div>
@if (!ViewBag.NoActions)
{
<a href='@Url.Action("CreateDossier")' class="btn btn-warning">@Index.CreateDossier</a>
}
<script type="text/javascript">
$('#dossierFilter').watermark('@Index.WatermarkSearchDossier');
$.jgrid.defaults.loadtext = '@Index.GridLoading';
var mvcJqGrid = {
customDblClick: "@ViewBag.customDblClick",
actions: {
buttonize: function (cellvalue, options, rowobject) {
return '<a onclick="return mvcJqGrid.actions.edit(\'' + options.rowId + '\')" href="#" title="Editare dosar"><i class="ui-icon ui-icon-pencil" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.costs(\'' + options.rowId + '\')" href="#" title="Cheltuieli dosar"><i class="ui-icon ui-icon-cart" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.imobil(\'' + options.rowId + '\')" href="#" title="Bunuri imobile"><i class="ui-icon ui-icon-home" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.mobil(\'' + options.rowId + '\')" href="#" title="Bunuri mobile"><i class="ui-icon ui-icon-suitcase" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.open(\'' + options.rowId + '\')" href="#" title="Open Dossier"><i class="ui-icon ui-icon-folder-open" style="display:inline-block"></i></a>';
},
edit: function (id) {
window.open('@Url.Action("EditDossier", "Dossier")?id=' + id, "_self");
return false;
},
costs: function (id) {
window.open('@Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('@Url.Action("DossierCosts", "Dossier")?id=' + id), "_self");
return false;
},
imobil: function (id) {
window.open('@Url.Action("OpenRedirect", "Dossier")?idDossier=' + id+'&strUrl='+encodeURI('@Url.Action("ImovableList", "Asset")?idDossier=' + id), "_self");
return false;
},
mobil: function (id) {
window.open('@Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('@Url.Action("MovableList", "Asset")?idDossier=' + id), "_self");
return false;
},
open: function (id) {
if (mvcJqGrid.customDblClick.length > 0 && typeof (window[mvcJqGrid.customDblClick]) == "function") {
return window[mvcJqGrid.customDblClick](id);
}
$.getJSON('@Url.Action("OpenDossier", "Dossier")' + "?id=" + id, function (data) {
if (data && data.success) {
var redirectUrl = $("#redirectUrl").val();
if (redirectUrl) {
window.open(redirectUrl, "_self");
} else {
window.location.reload();
}
} else {
alert("@Index.ErrorOpenDossier");
}
});
return false;
}
}
};
$("#dossiersGrid").jqGrid({
url: '@Url.Action("DossiersGridData", "Dossier")',
datatype: 'json',
mtype: 'POST',
colModel: [
{ name: "@Index.CompletedColumn", sortable: false, editable: false, index: "Completed" },
{ name: "@Index.DossierColumn", sortable: true, editable: false, index: "Dossier" },
{ name: "@Index.DossierStatusColumn", sortable: true, editable: false, index: "DossierStatus" },
{ name: "@Index.LastModifiedDateColumn", sortable: true, editable: false, index: "LastModifiedDate" },
{ name: "@Index.LastOperatorColumn", sortable: true, editable: false, index: "LastOperator" },
{ name: "@Index.CreditorsColumn", sortable: false, editable: false, index: "Creditors" },
{ name: "@Index.DebtorsColumn", sortable: false, editable: false, index: "Debtors" },
@if (!ViewBag.NoActions)
{
@:{ name: "@Index.Action", sortable: false, editable: false, index: "Action", formatter: mvcJqGrid.actions.buttonize }
}
],
viewrecords: true,
postData: {
dossierFilter: function () { return $("#dossierFilter").val(); },
dossierStatusFilter: function () { return $("#dossierStatusFilter").val(); },
lastModifiedDateFilter: function () { return $("#lastModifiedDateFilter").val(); },
lastOperatorFilter: function () {
return $("#lastOperatorFilter").val();
}
},
pager: "#dossiersGridPager",
rowNum: 10,
caption: "Lista dosare",
autowidth: true,
rowList: [10, 15, 20, 50],
emptyrecords: 'No record Found',
height: '100%',
ondblClickRow: mvcJqGrid.actions.open
});
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
function applyFilter() {
$("#dossiersGrid").trigger("reloadGrid");
}
function clearFilter() {
$('#dossierFilter').val("");
$("#dossierStatusFilter").val("");
$("#lastModifiedDateFilter").val("");
$("#lastOperatorFilter").val("");
$("#dossiersGrid").trigger("reloadGrid");
}
if (leftMenu) {
leftMenu.setContext('dossier-list help-dossier');
}
var resizeDossiersGrid = function () {
$("#dossiersGrid").fluidGrid({ example: "#dossiersGridWrapper", offset: 0 });
};
$(window).on('resize', resizeDossiersGrid);
$("#dossiersGrid").on("jqGridGridComplete", resizeDossiersGrid);
</script>
Und hier ist der vollständige code für die aufrufende Seite:
@using ExpertExecutor.DataLayer.Models
@using ExpertExecutor.Resources.Cost
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section leftMenu{
@Html.Partial("_LeftMenu")
}
@section head
{
@Scripts.Render("~/bundles/jqueryval")
<style type="text/css">
#divChooseDossier {
width: 900px;
}
#divCreateReceipt {
width: 900px;
}
</style>
}
<h2>@ViewBag.Title</h2>
@Html.Hidden("IdDossier", ViewData["IdDossier"])
<table id="dossierReceiptsGrid"></table>
<a href="#divCreateReceipt" role="button" class="btn" data-toggle="modal"></a>
<div id="divCreateReceipt" class="modal hide fade" role="dialog" aria-hidden="true">
</div>
<a href="#" role="button" class="btn" data-toggle="modal" onclick="showCreateReceiptOption();">@DossierReceipts.CreateReceipt</a>
<div id="divConfirmDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>@DossierReceipts.ConfirmDossier</h3>
</div>
<div class="modal-body">
<span>@DossierReceipts.ConfirmDossierMessage<strong>@(ViewData["Dossier"] != null ? string.Format("{0}/{1}", ((Dossier)ViewData["Dossier"]).DossierNumber, ((Dossier)ViewData["Dossier"]).DossierYear) : string.Empty)</strong>?</span>
</div>
<div class="modal-footer">
<a href="#" class="btn" onclick="$('#divConfirmDossier').modal('hide')">@DossierReceipts.Cancel</a>
<input type="button" class="btn btn-primary" value="@DossierReceipts.ConfirmDossierOk" onclick="confirmDossier();"/>
<input type="button" class="btn" value="@DossierReceipts.SelectDossier" onclick="showChooseDossierModal();"/>
</div>
</div>
<a href="#divChooseDossier" role="button" class="btn" data-toggle="modal"></a>
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>@DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn" onclick="$('#divChooseDossier').modal('hide')">@DossierReceipts.Cancel</a>
</div>
</div>
<script type="text/javascript">
leftMenu.setContext('financial help-financial');
$("#dossierReceiptsGrid").jqGrid({
url: '@Url.Action("ReceiptsGridData")',
datatype: "json",
mtype: "POST",
postData: {
idDossier: '@ViewData["IdDossier"]'
},
colNames: ['@DossierReceipts.DossierColumn', '@DossierReceipts.ReceiptDateColumn', '@DossierReceipts.ReceiptValueColumn', '@DossierReceipts.ReceiptCurrencyColumn', '@DossierReceipts.ReceiptColumn'],
colModel: [
{ name: "Dossier", index: "Dossier", sortable: true, editable: false },
{ name: "ReceiptDate", index: "ReceiptDate", sortable: true, editable: false },
{ name: "ReceiptValue", index: "ReceiptValue", sortable: true, editable: false },
{ name: "Currency", index: "Currency", sortable: true, editable: false },
{ name: "Receipt", index: "Receipt", sortable: true, editable: false }
],
viewrecords: true
});
function confirmDossier() {
$("#divConfirmDossier").modal("hide");
$("#divCreateReceipt").modal("show");
}
var reloadDossiersGrid = true;
function showChooseDossierModal() {
$("#divConfirmDossier").modal("hide");
$("#divChooseDossier").modal("show");
if (reloadDossiersGrid) {
reloadDossiersGrid = false;
$.post('@Url.Action("Index", "Dossier")?redirectUrl=&noActions=true&partial=true&customDblClick=chooseDossier', null, function(postResponse) {
$("#divChooseDossier .modal-body").html(postResponse);
$("#divChooseDossier").on("shown", function() {
resizeDossiersGrid();
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
});
});
} else {
$("#divChooseDossier").modal("show");
}
}
function chooseDossier(id) {
$("#IdDossier").val(id);
$("#divChooseDossier").modal("hide");
$.get('@Url.Action("CreateReceipt", "Financial")?idDossier=' + id, null, function(getResponse) {
$("#divCreateReceipt").html(getResponse);
$("#divCreateReceipt").modal("show");
});
$.get('@Url.Action("GetDossierDisplayName")?id=' + id, null, function(getResponse) {
$("#divConfirmDossier .modal-body strong").text(getResponse.name);
});
$("#IdDossier").val(id);
}
$(function() {
$("a[href='#divCreateReceipt']").hide();
$("a[href='#divChooseDossier']").hide();
});
function showCreateReceiptOption() {
if ($("#IdDossier").val() && $("#IdDossier").val().length > 0) {
$("#divConfirmDossier").modal("show");
} else {
showChooseDossierModal();
}
}
</script>
Sorry für den langen code
- funktioniert es, wenn das modale sichtbar ist, wenn die daterangepicker initialisiert wird? könnten Sie zeigen die ganze js?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte ein ähnliches problem mit datepicker von jquery.
Wenn ich klickte auf den-Eingang, nichts passiert, keine Fehlermeldung, nichts.
War das problem, dass der datepicker wurde die Arbeit, aber der Kalender erschien unter dem modalen, ich hackte das auch mit css :
Vielleicht ist dein problem ähnlich wie meins ,
ASP.NET
also ich habemasterpage
.Jquery
unddaterangepicker
init aufmasterpage
. Ich geputtet aufmodalbox
Seite dieser Dateien, und es wurde gearbeitet.Eher als das ändern der z-index der Elemente, Sie können auch die
parentEl
option (wobei das calendar-Steuerelement wird erstellt). Dies wird es ermöglichen, die tatsächlichen daterangepicker Objekt zu Erben der z-index der modal-container.Aus der Dokumentation:
parentEl
auch akzeptiert jQuery-SelektorKönnen Sie ändern Sie die z-index in der event-show.daterangepicker