Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Question
Monday, August 5, 2019 8:49 AM
I have a parent page and there are some text boxes on it، A modal window will open by pressing a button (id="btnprs") on this form.
Then In the Modal window, there is a table where the user selects the desired row selector.
At this point, the ID of the desired row should be transferred to the textbox on parent page and the modal window closed and the focus returned to the parent page.
All steps are done correctly, but eventually the content of the full screen is opened instead of closing the modal window and focus is not returned to the parent page
this is Parent Page:
@ModelType Machinary.TakContractDetViewModel
@Code
ViewData("Title") = "Contract List"
End Code
@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@<div Class="panel panel-primary">
<header Class="panel-heading tab-bg-dark-navy-blue">
<label class="bg-transparent wht-color"> @ViewBag.ContractDesc- اطلاعات جدید</label>
</header>
<br />
<div class="form-horizontal panel-body">
@Html.ValidationSummary(True, "", New With {.class = "text-danger"})
<div class="row">
<div class="form-group col-md-4" id="jobinfo">
<div class="col-md-10">
<label>Nat Code</label>
<div class="input-group m-bot15">
@Html.EditorFor(Function(model) model.NatCode, New With {.htmlAttributes = New With {.class = "form-control", .id = "natcode"}})
<span class="input-group-btn">
<input class="btn btn-white" id="btnprs" type="button" value="select person Code" data-toggle="modal" data-target="#myModal" />
</span>
</div>
@Html.ValidationMessageFor(Function(model) model.NatCode, "", New With {.class = "text-danger"})
</div>
</div>
<div class="form-group col-md-8">
<div class="col-md-10">
<label>Fullname</label>
@Html.TextBox("fullname", Nothing, New With {.class = "form-control", .readonly = "readonly"})
</div>
</div>
<hr />
</div>
<hr />
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
End Using
<div class="pull-left btn btn-default">
@Html.ActionLink("Back", "IndexDet", New With {.id = TakContractHedID})
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Personel List</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="partial"></div>
</div>
</div>
</div>
</div>
@section MyScripts
<script type="text/javascript">
$(function () {
$("#StartDate").mask("9999/99/99");
$("#FinishDate").mask("9999/99/99");
});
$(function () {
$('#btnprs').click(function () {
var route = '@Url.Action("PrsList", "Personel")';
$('#partial').load(route);
});
});
$("body").delegate('.select', 'click', function () {
var melicode = this.getAttribute("natc");
$("natcode").html(melicode);
$('#myModal').modal('hide');
});
</script>
End Section
The table that opens in modal bootstrap page:
@ModelType IEnumerable(Of Machinary.Personel)
@Code
Dim wg As New WebGrid(Model, rowsPerPage:=10, canPage:=True, canSort:=True, ajaxUpdateContainerId:="wg1")
Dim rowIndex = ((wg.PageIndex + 1) * wg.RowsPerPage) - (wg.RowsPerPage - 1)
End Code
<div class="panel panel-body">
<div id="GridList">
@Using (Ajax.BeginForm("JobList", "Personel", FormMethod.Post, New AjaxOptions With {
.InsertionMode = InsertionMode.Replace,
.UpdateTargetId = "GridList"}))
@<div Class="input-group m-bot15">
@Html.TextBox("strSearch", Nothing, New With {.class = "form-control", .PlaceHolder = "search ..."})
<span class="input-group-btn">
<input Class="btn btn-white" type="submit" value="search">
</span>
</div>
End Using
@wg.GetHtml(tableStyle:="table table-bordered table-hovor", mode:=WebGridPagerModes.All,
htmlAttributes:=New With {.id = "wg1", .class = "Grid"},
firstText:="<<",
lastText:=">>",
footerStyle:="table-pager",
columns:=wg.Columns(
wg.Column("nat code", "person code"),
wg.Column("firstname", "first name"),
wg.Column("lastname", "last name"),
wg.Column(header:="", format:=Function(item) New HtmlString(
Html.ActionLink("select row", Nothing, New With {.id = item.Id}, htmlAttributes:=New With {.class = "select", .natc = item.natcode}).ToString()))))
</div>
</div>
Please see the picture
All replies (3)
Tuesday, August 6, 2019 3:23 AM ✅Answered
Hi Ashkan,
All steps are done correctly, but eventually the content of the full screen is opened instead of closing the modal window and focus is not returned to the parent page
This is because you click ‘select row’ to trigger its original jump page event, in fact you put an url in it.
To solve this issue, you can modify your js code. When you trigger 'select row' click event, you need to prevent the default event first.
In addition, there are some details in the js code that need to be modified:
First, you should put the event when you click 'select row' in to page loading events (just $(function(){})).
Then, when you assign the selected value to natcode, you forget to add # to get the natcode element, and you need to change the value of natcode through val().
For more details, you could refer to the following code:
<script type="text/javascript">
$(function () {
$("#StartDate").mask("9999/99/99");
$("#FinishDate").mask("9999/99/99");
});
$(function () {
$('#btnprs').click(function () {
var route = '@Url.Action("PrsList", "C2158478_modal")';
$('#partial').load(route);
});
$("body").delegate('.select', 'click', function () {
event.preventDefault();
var melicode = this.getAttribute("natc");
$("#natcode").val(melicode);
$('#myModal').modal('hide');
});
});
</script>
The result of this work demo:
Best Regards,
YongQing.
Monday, August 5, 2019 1:24 PM
Salam! what is written in the console?
Tuesday, August 6, 2019 8:12 AM
thank you very much, you have been great help.