We Keep Coding

How to Debug and resolve - JQuery Cannot read property 'Settings' of Undefined

I have a very weird problem, and I am looking for guidance on how to best debug similar problems in the future.
I have a Simple form that deletes the current active order.
When the user clicks the button, i open a Modal and ask for confirmation.
<form action="/KundeOrdre/Slet" id="Form-SletKundeOrdre" method="post">
<input type="hidden" value="1010101010" name="KundeOrdre.Hoved.OrdreNummer" />
<input type="submit" id="sletKundeOrdre" data-target="Form-SletKundeOrdre" value="Slet" class="btn btn-primary btn-xs" />
</form>
I have two Javascript methods in place.
1. To catch the click on the button and show the Modal instead
2. Catch the confirm click and submit the from
// Show Confirm Dialog when clicking the Delete Buttont
$(function () {
$('#sletKundeOrdre').on('click', function (e) {
e.preventDefault();
$('#modal-confirmDeleteOrder').modal('show');
});
});
// Bind a Listener to the Confirm button
$('#modal-confirmDeleteOrder').on('click', 'button#confirm', function (e) {
$('#Form-SletKundeOrdre').submit();
});
When i run this setup and click confirm in the Model, i get a Javascript error and the Form is not submitted.
jquery.validate.js:1068 Uncaught TypeError: Cannot read property 'settings' of undefined
I am looking for good ideas on how to debug a situation like this.
A plugin is giving me trouble and im assuming its on my end.
This form is included in a page that consists of 2 Partial Views, each containing multiple forms.
This particular form is in the 2nd View and is nr 3 out of 4 forms on that page.
Another observation:
The 4th Form in the same View is a table containing rows. This error happens when the table contains zero rows.
If i add a single row to the 4th Form, this form (3rd) works as expected.
I do not understand why submitting my 3rd form is in any way related to my 4th form.
Update:
I seem to have resolved the issue.
I had an Input button inside my form, that had a link to the 'GemKundeOrdreLinjer' form (my 4th form).
<input type="button" id="gemKundeOrdre" value="#Resources.Panel_KundeOrdreGem" form="GemKundeOrdreLinjer" class="btn btn-primary btn-xs" />
Moving this button outside my form, solved issue for now.
This leaves me with a display issue about buttons, but ill keep this Question updated

how to avoid postback when i click the button in MVC

I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.

make your button like this :
<input type="button" id"button2" onclick="CallAjax();return false;"/>
//then in javascript
function CallAjax()
{
//your ajax call here to retrieve or update data
}

This is MVC 101...
Make your button a standard HTML5 button, which calls a JavaScript function on click...
<input type="button" id="goButton" value="Go »" onclick="goFunction();">
(I don't think you have to "return false" with a button, only with a submit)
Then, use Razor helpers in your view to do the Ajax call to the controller...
function goFunction() {
var url = '#Url.Action("MyActionMethodName", "MyControllerName")';
var settings = { 'some data': 'some values' };
$.ajax(url, settings);
}
See the JQuery Ajax page for more information about how to work the "settings" object.
BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.

While calling Modal Popup Extender the rest of the form gets cleared on cancel event

I need to use ModalPopupExtender for the main form to display a subform.
I need to trick the ModalPopupExtender without linking to button event hence used a hidden field as TargetControlID and PopupControlId
I have a submit button in the main form, when i click on it it first displays the Panel (subform) using the ModalPopupExtender (which also has cancel button in it).
I call the modalscreen by using Show() function.
The problem happens as soon as i click on Cancel button in the Modal Form to Hide the form, the rest of the values filled in the main form get erased.
Also other thing which I noticed if I use the ModalPopupExtender without Show & Hide function and link it to some temporary button click event, it works as expected and the values in the main form don't get erased. Can anyone help how to resolve this issue?

I think cancel button is causing postback.If you are using asp:button then change it to normal html button below
<asp:Panel runat="server" ID="popup" CssClass="panelStyle">
<input type="button" id="btnCancel" onclick="Cancel()" value="Cancel" />
</asp:Panel>
<script type="text/javascript">
function Cancel() {
$find("modalBehavior").hide();
}
</script>

how to automatically click a html button when asp.net button is clicked

how to automatically click a html button when asp.net button is clicked. I want when I click btn then automatically Button1 which is a html button is clicked and performs the task... that means by pressing one button it internally works for two buttons

Attach the onclick event in the markup of the ASPX page (on the button):
onclick="#('elementName').click();"
Now, if you don't want the post back to occur on the ASP.NET button, then do this:
onclick="#('elementName').click(); return false;"

In the asp button, add a OnClientClick event to call a javascript function and then trigger the second button click from within.
<asp:Button Text="Server Button" runat="server" OnClientClick="js_function();"/>
<input type="button" id="inpbutton" value="Client Button"/>
function js_function()
{
$("#inpbutton").trigger("click");
}

This should do it. Update the selectors with the ones in your page
<script>
$('#<%=ASPBUTTON.ClientID %>').click(function(event)
{
$('OTHER BUTTON ELEMENT SELECTOR').click();
event.preventDefault();
return false;
});
</script>

You can do this in two way.
first by using common class name for both button
<button name='cmd1' class='cmd' >button 1</button>
<button name='cmd2' class='cmd' >button 2</button>
jQuery
//common click event for both button
$('.cmd').bind('click', function(){
...
...
});
and for second method you can create two seprate onclick function for both button , when a button get click (source) inside that function call target function , like this
<button name='cmd1' onclick='first_function()' >button 1</button>
<button name='cmd2' onclick='second_function()' >button 2</button>
Javascript
function first_function(){
// call second function
second_function();
...
...
}

Prevent Double Submit on ASP.NET MVC page

I have an ASP.NET MVC 4 view. In the view, I have
<form action="/myAction" method="post">
...
<input type="submit" value=" Save " onclick="this.disabled = true; this.value = ' Please wait... '; return true;" />
</form>
By disabling the button, the form never gets submitted. However, I would like to disable the button after a user clicks it. The reason I want to disable it is to prevent the user from clicking the "submit" button multiple times. What am I doing wrong? I thought if I returned true, the form would still submit.

Disable the button in your form's submitted event, not the button's click event. This is because the click event fires before the form is submitted - though you are returning true, so that shouldn't cause the submission to fail, I don't think.

Use ActionFilters. This blog post has a class you can just drop into your project, decorate your actions and you're done.