The issue I am facing now is a button click event is automatically being fired when enter key is pressed in Html.TextBoxFor(). I am having a main view. In this view there are 3 buttons. On each of 2 button click a partial view is opened and during 3rd button click, a new view is opened. Please see the code below :
<script>
$(document).ready(function () {
SetUpDatePickers();
});
$('#button1').click(function (event) {
$('#divdefinetraj').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
GetTrajectories();
});
$('#button2').click(function (event) {
$('#divRequestTT').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
});
$('#button3').click(function (event) {
window.location.href = '/UserManagement/UsersList/';
event.preventDefault();
});
</script>
I clicked button1 and the first partial view is opened :
The partial view has below code :
#Html.TextBoxFor(u => u.TrajName, new { #class = "txtboxclass", #id = "TrajName" })
My issue is when I press "Enter" key inside this text box, the code for button1 in main view is being executed :
$('#button1').click(function (event) {
$('#divdefinetraj').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
GetTrajectories();
});
This results in all the buttons being hidden and the view becomes useless unless user reloads the view forcefully.
I tried to handle the onchange() event of the textboxfor and redirected to below function, but it doesn't handle.
function EnterKeyFilter() {
if (window.event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
}
Even I tried the same function for div - click() .. It doesn't work.
When I press the enter key the exact button1 click is being handled with this information event = j…y.Event {originalEvent: MouseEvent, type: "click", timeStamp: 7055.025000000001, jQuery110208686809991100928: true, toElement: button#button1.
But I am not clicking it either. The partial view is not part of a form also and form submission is not the issue. I am new to ASP.NET MVC and confused with this strange behavior. Please help. Thanks in advance.
If you want to disable your press enter in your keyboard, try this:
$(function () {
//On your document ready function, add this:
$('html').bind('keypress', function (e) {
if (e.keyCode == 13) {
return false;
}
});
}
Try to keep all three buttons in different form tags and made them submit button.
So in this case, whenever you hit enter in a form input, respective button will be clicked. To prevent full page postback, use e.preventDefault() in button click event.
HTML:
<form id="frm1">
-------------
-------------
<input id="btnSubmit" type="submit" value="submit" />
</form>
jQuery
$("#btnSubmit").click(function(e){
e.preventDefault();
-- rest of code
});
Related
I am using Hiddenvariable here and it is passed to controller from view.
#(Html.Search("ConfigurationSearch").Form("ConfigurationForm").Grid("gridConfiguration").ShowUnSelectAll(false))
<div id="gridConfiguration"></div>
</div>
#Html.Hidden("hidSearchText")
$(function () {
$('#searchText_ConfigurationSearch').val("#TempData["SearchText"]");
});
$('.k-block').click(function () {
$("#hidSearchText").val($("#searchText_ConfigurationSearch").val());
});
Without using hiddenvariable Can we Implement this,Please suggest me?!
I have an MVC app with a Bootstrap Modal declaration in my _Layout.cshtml and I call with some Javascript which loads a MVC partial view into the modal. Everything seems to work fine except that the outer area of the modal is not grayed out showing the user that they can't click anywhere outside of the Modal. In other words the parent page looks like it's active and the Modal is just sitting on top of the parent page.
I've done some searching but I'm not finding anything I can try to get it to show the parent page as being disabled.
Here is my code in my _Layout.cshtml page.
#******** Bootstrap Modal - used with Partial Views ************************#
<div id="modal-container" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content" id="modal-content">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// Attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
/***** Vertically center Bootstrap 3 modals so they aren't always stuck at the top ********/
$(function () {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function () {
$('.modal:visible').each(reposition);
});
});
</script>
My main page has a GridView and Buttons for add/update. When I click the update button, a window pops up(used JavaScript) which has input fields and a Button for actually updating the record. What I want to know is how to refresh the main page when I click the update button inside the pop-up window.
This is the partial code of what I tried on actual update's OnClick:
if (PreviousPage != null)
{
GridView gridv = (GridView)Page.PreviousPage.FindControl("GridView1");
gridv.DataBind();
}
While debugging, I realized that the if statement was never executed. Does that mean pop-up windows do not have a PreviousPage initially? If so how can I reach the Main page then? (i shall note that the main page is not a master page)
This is how I create the pop-up on button click from the Main page(so it's a new window):
function btnEditEP_Click() {
var recID = document.getElementById('<%=tboxEdit.ClientID%>').value;
window.open("editPopupEP.aspx?Txt=" + recID, "_blank", "toolbar=yes", "resizable=yes", "scrollbars=yes");
}
On your child window you can call a function something like this in your child window call on your update function
<script type="text/javascript">
function MyFunction() {
window.opener.PostBackParentWindow();
window.close();
}
</script>
and in your parent window call add this code
<script type="text/javascript">
function PostBackParentWindow() {
__doPostBack(null, null);
}
</script>
Hope it might help
On the update click also perform the close pop up call
<script>
var popupWindow;
function openw(url) {
popupWindow = window.open(url, "popup", "");
}
function closew() {
if (popupWindow) {
popupWindow.close();
}
}
</script>
open<br />
close
like described here . How to close a popup window in a parent window?
and then in closw you can call your parent page with true/false value depending on your update operation. You can use a hiddenfield for this.
look like this article.
http://www.c-sharpcorner.com/UploadFile/cd7c2e/validate-form-on-click-of-anchor-using-jquery/
but in this not mentioned how to stop button click until error completed.
so when we click on submit click and error occurred and submit click is fired on c# code i want to stop when error is displayed
If Error Occurred, that means Validation failed. So, you should return false, so that it won't fire the Button Click Code Behind Event. Else return true, so that it goes to Code Behind Click Event after Validation is completed.
So, simply...
if(Validation failed)
{
return false;
}
else
{
return true;
}
Try something like this, prevent default behavior and submit form with js after validation:
<form action="actionpage.asp" onsubmit="submitForm();" name="form">
<input type="submit" value="Submit">
</form>
function submitForm(){
if(validationfails){
return false;
}
else {
document.form.submit();
return true;
}
}
To stop the default button behaviour (i.e. submitting the form) from firing straight away you need to return false at the end of your button click handler
e.g.
$("#mybutton").click(function() {
// validate your form
$("#form1").validate({
submitHandler: function (form) {
form.submit();
},
rules: {
name: "required",
email: {
required: true,
email: true
},
field: {
required: true,
digits:true
}
}
});
return false;
});
Obviously the validation rules you create will depend on your form
So I have a requirement to auto submit a form upon edit of a set textbox within a form.
using (Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "refresh", InsertionMode = InsertionMode.Replace }, new { #id = "refresh" }))
{
#Html.ValidationSummary();
#Html.TextBoxFor(modelitem => Model.Requirement)
}
How can I make that form submit to the controller method upon edit of the textbox? (if possible).
I think the jQuery solution this should work like this:
<script type="text/javascript">
$('#Requirement').change(function () {
$('#refresh').submit();
});
</script>
The above will run when the text box loses focus (and had changed value), if you want to do it on every keypress you can replace change for keyup or keydown as you see fit.