submit button does not trigger server-side code - asp.net

the question says it all. i've an asp.net page using jquery. at first when i clicked the submit button, it'd show the object expected error. i ran the firebug and it displayed the error of 'return validate()' function which was added onClientClick of the button.
<script type="text/javascript">
$(document).ready(function() {
// add custom validation methods
$.validator.addMethod('phone', function(value, el, params) {
return this.optional(el) || /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/.test(value);
}, 'Please enter a valid phone number');
$.validator.addMethod('numbers', function(value, el, params) {
return this.optional(el) || /^[0-9]+$/.test(value);
}, 'Invalid entry. Only Numeric is allowed.');
$.validator.addMethod('domainurl', function(value, el, params) {
return this.optional(el) || /^(http\:\/\/(?:www\.)?[a-zA-Z0-9]+(?:(?:\-|_)[a-zA-Z0-9]+)*(?:\.[a-zA-Z0-9]+(?:(?:\-|_)[a-zA-Z0-9]+)*)*\.[a-zA-Z]{2,4}(?:\/)?)$/.test(value);
}, 'Please enter a valid domain url');
$.validator.addMethod('selectone', function(value, element) {
return this.optional(element) || (value.indexOf("none") == -1);
}, 'Please select an option.');
$("#form1").validate({
debug: true,
rules: {
txt_name: {
required: true,
minlength: 2
},
txt_cmp: {
required: true,
minlength: 2
},
txt_tel1: {
phone: true,
required: true,
minlength: 3
},
txt_tel2: {
phone: true,
required: false,
minlength: 3
},
txt_mob: {
phone: true,
required: false,
minlength: 9
},
txt_email: {
required: true,
email: true
},
txt_domname: {
required: true,
domainurl: true
},
radiobt_domain: "required",
ddl_yremail: {
required: true,
selectone: true
},
ddl_email: {
required: true,
selectone: true
},
txt_space: {
required: true,
numbers: true
},
txt_calfr: {
required: true
},
txt_calto: {
required: true
}
},
messages: {
txt_name: {
required: "This field is required",
minLength: "Please enter a valid name"
},
txt_cmp: {
required: "This field is required",
minLength: "Please enter a valid commpany name"
},
txt_tel1: {
required: "This field is required",
minLength: "Please enter a valid telephone number"
},
txt_tel2: {
minLength: "Please enter a valid telephone number"
},
txt_mob: {
minLength: "Please enter a valid mobile number"
},
txt_email: {
email: "Please enter a valid email address",
required: "This field is required"
},
txt_domname: {
required: "This field is required"
},
radiobt_domain: "Select the Hosting Type"
}
});
});
</script>
i removed it, and now the submit button is still not working. the server-side code is not executing. it isn't showing any error. i can't figure out what is the problem.
i've posted the code here: object expected - jquery

EDIT: After seeing the code. The reason why the form is not submitting even after you remove the call to Validate() in your button is because you have debug:true, this prevents the form submission. Change it to debug: false and it will submit.
$("#form1").validate({
debug: false,
.....

I believe your problem is that the form submission is not working because you have a javascript parsing error. Can you check the Firebug console to see if there are any errors occuring on when the page loads. Any javascript errors are likely to break the form submission process.
Looking at your previous question, I would guess that you may not have included the validation plugin since validate isn't defined. This error is still probably occurring and the rest of the javascript on the page -- including all the ASP.NET added javascript may not be parsed.
Do you have a script include for the validate plugin? it would look something like this:
<script type="text/javascript" src="..../jquery.validate.js"></script>

Related

Wordpress comment form - display errors on same page (woocommerce ratings)

On my single product page I have activated the ratings form.
Visitors are able to leave a rating which requires the following inputs:
1 to 5 stars
A message
E-Mail
Privacy policy checkbox
Captcha-Code
If any of those fields are missing I get redirected to the default error page from wordpress.
I already tried to create my own validation using jquery -> jquery.validate.js
Based on the information from the following question.
/* Comment form validation on same page */
function comment_validation_init() {
if (is_single() && comments_open()) {
?>
<script type="text/javascript" src="/js/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
console.log("ready");
$('#commentform').validate({
rules: {
author: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 20
}
},
messages: {
author: "Please enter your name",
email: "Please enter a valid email address.",
comment: "Please enter your comment"
},
errorElement: "div",
errorPlacement: function(error, element) {
element.after(error);
}
});
});
</script>
<?php
}
}
add_action('wp_footer', 'comment_validation_init');
After the form submission I still get redirected to the default wordpress error page. (wp-comments-post.php)
Is there any other way to prevent that from happening and display the errors within the form? (without changing the core files)
Since the form was loaded by Ajax the validation wasn´t working.
As a workaround I triggered my validation through the forms submit button.
$(document.body).on('click', '#commentform #submit', function(){
$("#commentform").validate({
rules: {
author: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 20
}
},
messages: {
author: "Please enter your name",
email: "Please enter a valid email address.",
comment: "Please enter your comment"
},
errorElement: "div",
errorPlacement: function(error, element) {
element.after(error);
}
});
}
If someone got a "better" solution I would highly appreciate the information.

How to create a new passwordSignupFields in accounts-base package?

This is the default settings for the fields when creating an account. How do I create my own passwordSignupFields? For an example I want to have a user have to enter in an address when creating an account.
passwordSignupFields String
Which fields to display in the user creation form. One of:
'USERNAME_AND_EMAIL'
'USERNAME_AND_OPTIONAL_EMAIL'
'USERNAME_ONLY'
'EMAIL_ONLY' (default).
(accounts-ui-unstyled/accounts_ui.js, line 27)
You will have to remove accounts-ui package and add package ian:accounts-ui-bootstrap-3. Here you can add as many fields as you like with a variety of fields like a radio button, select dropdown, text fields etc.
To make your work easy, in client\main.js you can copy paste below code and try your ways,
Accounts.ui.config({
passwordSignupFields: "USERNAME_AND_EMAIL",
forceEmailLowercase: true,
forceUsernameLowercase: true,
forcePasswordLowercase: true,
extraSignupFields: [{
fieldName: 'name',
fieldLabel: 'Full Name',
inputType: 'text',
visible: true,
validate: function(value, errorFunction) {
if (!value) {
errorFunction("Please provide valid Full Name [Max - 50 Characters]");
return false;
} else {
return true;
}
}
}, {
fieldName: 'mobile',
fieldLabel: 'Mobile Number',
inputType: 'text',
visible: true,
validate: function(value, errorFunction) {
if (!value) {
errorFunction("Please provide valid Mobile Number.");
return false;
} else {
return true;
}
}
}
]
});
When you see on UI, it will look like this,
For more info:
https://github.com/ianmartorell/meteor-accounts-ui-bootstrap-3/blob/master/README.md

Kendo UI Grid with Drop down Template Not updating value after save to server

We are using a server based simple grid. The grid reads and updates data for a remote data source. It has two columns that are using drop down editors. Everything seems to work fine except that after saving, when editor closes, the changed values are not displayed in the edited row. It still shows the old value. When we try to refresh the grid using the sync event, it changes the order of the rows however, it does update the values on refresh.
It seems like the template function is not executed after the update is completed. How to edit the grid / code to ensure that the changed value is reflected in the grid?
Grid Definition code:
$("#servicetype-grid").kendoGrid({
pageable: true,
toolbar: [{name: "create", text: ""}, { template: kendo.template($("#servicetype-search-template").html())}],
columns: [
{
field: "serviceName", title: "Service Name"
},
{
field: "billCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.billCalculationTypeName);
},
title: "Bill Calculation Type"
},
{
field: "payCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.payCalculationTypeName);
},
title: "Pay Calculation Type"
},
{
command: [
{ name: "edit", text: { edit: "", cancel: "", update: "" }},
{ name: "destroy", text:""}
],
title: "Actions"
}
],
dataSource: dataSource,
sortable: {
mode: "single",
allowUnsort: false
},
dataBound: function(e) {
setToolTip();
},
edit: function(e) {
$('.k-grid-update').kendoTooltip({content: "Update"});
$('.k-grid-cancel').kendoTooltip({content: "Cancel"});
},
cancel: function(e) {
setToolTip();
},
editable: {
mode: "inline",
confirmation: "Are you sure that you want to delete this record?"
}
});
Drop down function is defined as:
function calculationTypeDropDownEditor(container, options) {
$('<input required data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: baseURL + "rips/services/calculationType/lookupList"
}
}
}
});
}
After doing some search on Google and browsing through different examples on Kendo site, I finally was able to resolve this issue. Following is my understanding of the problem and solution:
When we are using drop down box or combo box as a custom editor, generally we have a different datasource that contains a list options with an id and a value to show. I defined the template as "#=field.property#" of the field that I was looking up. In my case it was calculation type. Following is my model:
model: {
id: "serviceId",
fields: {
serviceName: { field:"serviceName", type: "string", validation: { required: { message: "Service Name is required"}} },
billCalculationType: { field: "billCalculationType", validation: { required: true}},
payCalculationType: { field: "payCalculationType", validation: { required: true} }
}
In above, billCalculationType and payCalculationType are supposed to be drop down list values displaying the calculation type name but storing the id of the corresponding calculation type. So, in my grid definition, I added following:
{ field: "billCalculationType",
editor: calculationTypeDropDownEditor,
template:"#=billCalculationType.name#",
title: "Bill Calculation Type" },
Where calculation dropdown editor is a function that builds a drop down from external data source. So, it works fine. However, for the template definition to work in (field.property) format, the server must return the value as a class for this field and not a simple text. So, in my server service, I returned in following format:
{"billCalculationType":{"id":"4028828542b66b3a0142b66b3b780001","name":"Hourly","requiredDetails":false},"payCalculationType":{"id":"4028828542b66b3a0142b66b3b960002","name":"Kilometers","requiredDetails":false},"serviceId":"4028828542b66b3a0142b66b3c16000a","serviceName":"XYZ"}
Notice that the billCalculationType and payCalculationType are returned as objects with name and id as properties. This allows the template to work properly.
Hope this helps.

How to specify multiple forms with Mesosphere in Meteorite?

I have multiple forms I'd like to declare but it appears you can only do one at a time:
Mesosphere({
name: "signupForm",
method: "signup",
fields: {
username: {
required: true
},
email: {
required: true,
format: "email",
password: {
required: true,
}
}
});
Mesosphere({
name: "loginForm",
method: "login",
fields: {
usernameOrEmail: {
required: true,
},
password: {
required: true,
}
}
}
});
It doesnt appear that it possible to pass in an array or multiple objects.
No, it currently does not support specifying multiple forms at once. If you would like to swing by github and file an issue as a feature request to remind me. I'd be more than happy to include this in a future release. http://github.com/copleykj/Mesosphere

Jqgrid in jquery ui tabs

I have a custom button for my jqgrid that when pressed takes me to another view.
But for some reason when i navigate between the tabs there is an extra added custom button every time a re-visit that tab. Is there a way to say only to add this button once?
This is the markup:
$('#tabs').tabs( {
show: function (event, ui) {
if(ui.index == 0) {
Show some content on this tab.. Not important.
}
if(ui.index == 1) {
$("#functionslist").jqGrid({
datatype: 'json',
url: '/Admin/GetFunctionsList',
colNames: ['Namn'],
colModel: [
{ index: 'FunctionName',
name: 'FunctionName',
width: 100,
sortable: false
}
],
rowNum: 20,
prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null },
hidegrid: false,
pager: '#functionspager',
autowidth: true,
shrinkToFit: true,
height: '100%',
caption: 'Functions',
viewrecords: true,
onSelectRow: function (id) {
window.location.href = '/Function/Edit/' + id;
}
}).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#functionspager', {
caption: '',
title: 'Create new function',
buttonicon: 'ui-icon-plus',
onClickButton: function () {
window.location = '/Function/Add/';
}
}); .... and so forth....
Everything runs fine and i have the behavior i desire but for some reason when i navigate between the two tabs more and more custom button are added. Any ideas why, have tried to resolve this but with no luck.
/Daniel
Why not check to see if the button already exists before adding it?
if ($('#functionspager :has(".ui-icon-plus")').length == 0) {
$("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#functionspager', {
...
});
}
The call $("#functionslist").jqGrid({/*parameters*/); convert the empty <table> to a grid having columns, capture, pager and so on. You should make the call once and not repeat it on every tab activation.
Exactly in the same way the methods navGrid and navButtonAdd should be called only once.
So you should decide what should be done if the user select the tab having jqGrid. You can for example call
$("#functionslist").trigger('reloadGrid', [{current:true}]);
(see here for details)

Resources