I faced a problem. I have a modal window with close, cancel and submit buttons. For example, when I click on the close button and try to use the tab key to get the next element, the focus immediately switches to the footer, but not the next element. I need to make the focus after pressing the close, submit or cancel button go to the next item (Open Calculator)
Code for modal
<div id="special-needs-consent-form" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header" aria-label="#SpecialNeeds.ConsentForm">
<h3 class="modal-title">#SpecialNeeds.ConsentForm</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="#Buttons.Close" onclick="removeCheckedSpecialNeeds()"><span aria-hidden="true"><em class="zmdi zmdi-close"></em></span></button>
</div>
<div class="modal-body">
<div>
<div class="modal-footer" aria-label="#Everything.ConsentFooter">
<button type="button" class="btn btn-primary btn-raised" data-dismiss="modal" onclick="removeCheckedSpecialNeeds()">#Buttons.Cancel</button>
<button id="consent-submit-btn" type="button" class="btn btn-primary btn-raised">#Buttons.Submit</button>
</div>
code for The element to focus on after clicking the close submit or cancel button
<div class="radio-primary col-lg-12">
#if (RBBConfiguration.CurrentConfig.EnableFeeSubsidyExternalUrl)
{
<a class="button" target="_blank" href="#(Model.FeeSubsidyExternalLink)" tabindex="0">#Model.FeeSubsidyExternalLinkText</a>
}
else
{
<a data-toggle="collapse" data-target=".subsidy-calculator:not(.show)" id="feeCalculator" class=" ml-4" tabindex="0">#Everything.OpenFeeCalculator</a>
}
</div>
I tried to use tabindex = (1, 2, 3 etc.) elements, but it is not working correctly
use a simple onkeydown method:
let counter = 0;
document.body.onkeydown = (ev) => {
ev.preventDefault()
if (ev.key == "Tab") {
if (counter % 2 == 0) {
//focus on input
document.querySelector("#key").focus();
document.querySelector("p").style.color = "";
} else {
//"focus" on paragraph
document.querySelector("#key").blur();
document.querySelector("p").style.color = "red";
}
counter++;
}
}
<input id="key">
<p>hello</p>
click on the window and click on the tab
I recommend to study this table:
enter image description here
Related
I have a card and what i want to do, is when a user click(create course) button it must generate new content(asp.net mvc) or dashboard that is empty. I have some ideas around this. Let me share below;
<div class="row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Start New Course</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<label for="CourseName" class="col-sm-2 col-form-label">CourseName:</label>
<div class="col-sm-6">
#Html.EditorFor(model => model.CourseName, new { htmlAttributes = new { #class = "form-control", autofocus = "autofocus", placeholder = "CourseName" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Course</button>
</div>
</div>
</div>
</div>
// Jquery
<a class="btn btn-large btn-success" id="fire" href="/Controller/Courses.chtml#">Create Courses</a>
$('#fire').on('click', function (e) {
// dont know what to put here....?
})
I dont know if my logic is wrong and need some ideas around. Meaning what i want when i click the create button from the modal form it must take me to the new content(asp.net mvc). Something along this line
Change the href value, replace the ActionResultName and ControllerName, see below:
<a class="btn btn-large btn-success" id="fire" href="#Url.Action("ActionResultName","ControllerName")">Create Courses</a>
i am trying to render partial view(reusable) in order to delete customer with cus_id within table(list of Customers)
but every time i submit form only first row id is submitting please tell me correct solution.
#foreach (var item in Model)
{
....
<td>
#await Html.PartialAsync("~/Views/Shared/Modal.cshtml", item.cus_id)
#*<partial name="~/Views/Shared/Modal.cshtml" for="#item.cus_id"/>*#
</td>
}
Here is My View
#model int
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
</div>
The problem is in your partial view.
<i class="fas fa-trash-alt" title="Delete"></i>
You used the id selector, it will always select the first modal which id is "myModel". While all the modals' ids are the same. So, every time you submit, only the first row id is submitting.
You can apply the cus_id to the modal id to distinguish which modal should be opened.
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal_#Model" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete #Model?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
I am getting stuck about aligning some buttons on line and all centered with bootstrap.
I have created the following bootply sample.
Why do the buttons stack vertically and not horizontally?
Also, I have to mix simple buttons with code like the following
#Html.ActionLink( "REGISTER", "LoginRegister", "Account", new { LoginTabActive = false, RegisterTabActive = true }, new { #class = "btn btn-primary btn-lg center-block" } )
which generates the following markup
REGISTER
In this case the button will expand to occupy all the horizontal space.
Just add Bootstrap's text-center class to your menuArea div.
BOOTPLY
HTML:
<div class="menubar" style="background-color: #0055b8; color:#ffffff; height: 30px;">
<h3 class="text-center">menu bar title</h3>
</div>
<div class="text-center">
<a data-toggle="collapse" href="#topMenu" aria-expanded="false" aria-controls="topMenu">
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<div class="collapse" id="topMenu">
<div class="menuArea text-center">
<button id="mybutton" name="mybutton" class="btn btn-primary btn-lg">1</button>
<button id="mybutton2" name="mybutton2" class="btn btn-primary btn-lg">2</button>
<button id="mybutton3" name="mybutton3" class="btn btn-primary btn-lg">3</button>
</div>
</div>
Here you go, you need to add "text-center" to your menuArea div, and remove the "center-block" from each button element.
http://www.bootply.com/wpAjCqxV3c
Net webform application implementing Bootstrap. Currently I have a label and a text box displayed in Bootstrap - Modal to which Im trying to send the data from the server c# file. For some reason the Modal disappears and doesnt show anything on the UI.
ASPx file
<!-- Button to trigger modal -->
Launch demo modal
<%--<asp:Button ID="Button1" role="button" type="button" runat="server" Text="Modal" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal"/>--%>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
C# file
protected void Click_Me(object sender, EventArgs e)
{
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
}
Please advice
ps : do i need to use an Update panel ?
An Update Panel would likely not be the best solution for this because only a partial amount of the html is updated and the Javascript/Jquery for the modal is not being called again after the partial postback.
You need some way of invoking the Javascript again after the postback. You could invoke the Javascript needed to open the modal on your Click_Me event.
protected void Click_Me(object sender, EventArgs e)
{
// do stuff
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
// make sure the modal opens
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#MyModal').modal('show')});</script>", false);
}
Ok,
I have a Jquery DataTable, which has a click event on the first column. The click event, calls a function which in turns calls a C# Webmethod to retrieve data to populate within the dialog.
My problem is that I can't seem to get the modal to resize. I use the followin settings, but it makes no difference.
$('#myModal').modal(resizable:true);
this is called at the end of the Function. The Method contains sensistive information, so i can't post it's contents, but the frame of the calls are as follows:
"fnRowCallback": function (nRow, aoData, iDisplayIndex, iDisplayIndexFull) {
if (aoData[11] == 'Duplicate' || aoData[11] == 'Duplicate approved') {
$('td:eq(0)', nRow).html('<a class="Main" onclick="ViewDuplicateDetails
(\'' + aoData[12] + '\', \'' + aoData[4] + '\',\'' + aoData[0] + '\');">' + aoData[0] + '</a>');
function ViewDuplicateDetail(param1, param2, param3, param4)
{
AJAX call code to retrieve the data
success:
append results to the HTML elements of my dialog (div)
$('#myModal').modal(resizable:true);
}
I dont get the handles to resize, and when the site is display on a screen where the resolution is not high, then the bottom of the modal isn't visible.
EDIT
I've included the actually modal, incase there is anything glaringly obvious.
<div id="myModal" class="modal hide fade" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 id="ticket-id">Message: <span id="messageRef"></span><span
id="messageType"></span>
<span id="checkrecord"></span>
<span id="Id"></span>
</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="ticket-tabs">
<li>Record</li>
<li>Found</li>
<li>Comments</li>
<li>Audit</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab5">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
<div class="tab-pane" id="tab6">
<div id="results"></div>
</div>
<div class="tab-pane" id="tab7">
<textarea id="txtComments"></textarea>
</div>
<div class="tab-pane" id="tab8">
<div id="audit"></div>
</div>
</div>
</div>
<div class="modal-footer">
<span id="txtWarning" style="float:left; color:#ff0000">You must
enter a comment before saving!</span>
<button id="btnComplete" class="btn btn-danger">Complete</button>
<button id="btnApprove" class="btn btn-primary">Approve</button>
<button id="btnSave" class="btn btn-primary">Save</button>
<button id="btnConfirmComplete" class="btn btn-danger">Confirm
Completion</button>
<div id="dowJones" style="text-align:left;">
<img src="Media/images/img2.png" width="94" height="20"
alt=""/><br />
</div>
</div>
</div>
I believe you need:
$('#myModal').modal({resizable:true});
resizable is not a native option of Bootstrap's modals.
If you want to use jQuery-ui resizable widget, you should initialize it using an explicit call :
$(function(){
$('#modal').resizable({ /*resizable options*/ })
});
See resizable examples and api doc.
If you want to have the initial dialog fit into the screen, you should add some code to check whether the dialogue fits when opened ( $('#modal').on('shown', function(){ ... }) ), by checking the dialog's dimensions against the viewport dimensions, and adjust it if the dialog falls outside.
may be this help:
$('#myModal').modal(...).resize(function(){/*code on resizing*/});
UPDATE
try set size for #myModal or it part in css in percent