$(document).ready(function () {
$("#formIsValid").val("false");
$('#form1').validate({
rules: {
<%= CmyCd.UniqueID %>: { required:true },
<%= CmyName.UniqueID %>: { required:true },
},
messages: {
},highlight: function(element, errorClass) {
$(element).addClass("redBorder");
},
unhighlight: function(element, errorClass) {
$(element).removeClass("redBorder");
},
submitHandler: function(form){
$("#formIsValid").val("true");
}
});
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckValidationStatus);
function CheckValidationStatus(sender, args) {
if($("#formIsValid").val() == "false") {
args.set_cancel(true);
}
}
});
<input type="hidden" name="formIsValid" id="formIsValid" value="false" />
I had search through the web and create a function to use jQuery validation on asp.net ajax updatepanel, if validate failed, the code work fine, but the issue is, if all the condition are met, I need to click twice to actually submit the form, due to formIsValid onload is false, and I have no idea how to actually fix this, any guide to fix the issue?
All this formIsValid hidden field stuff is totally unnecessary. There is a method already built into the jQuery Validate plugin called .valid() which triggers a validation test and returns a boolean value.
$(document).ready(function () {
$('#form1').validate({
rules: {
<%= CmyCd.UniqueID %>: { required:true },
<%= CmyName.UniqueID %>: { required:true },
},
messages: {
},
highlight: function(element, errorClass) {
$(element).addClass("redBorder");
},
unhighlight: function(element, errorClass) {
$(element).removeClass("redBorder");
}
});
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckValidationStatus);
function CheckValidationStatus(sender, args) {
if ($('#form1').valid()) {
args.set_cancel(true);
}
}
});
Alternatively, you might possibly be able to just use the submitHandler callback function to run your function more directly. (Since the submitHandler is only fired on a valid form, it makes externally testing for validity seem redundant in this case.)
$(document).ready(function () {
$('#form1').validate({
rules: {
<%= CmyCd.UniqueID %>: { required:true },
<%= CmyName.UniqueID %>: { required:true },
},
messages: {
},highlight: function(element, errorClass) {
$(element).addClass("redBorder");
},
unhighlight: function(element, errorClass) {
$(element).removeClass("redBorder");
},
});
);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckValidationStatus);
function CheckValidationStatus(sender, args) {
if ($('#form1').valid()) {
args.set_cancel(false);
} else{
args.set_cancel(true);
}
}
Related
I am using Vue.js 2 and Laravel 7.
I want to pass some errors from the child component to the parent controller. But for some reasons emit did not work.
This is the method of the child component AllocateTask:
methods: {
assignTask: function() {
this.form.task_id = this.user.tasks;
this.form.user_id = this.dev.id;
alert(this.form.task_id);
alert(this.form.user_id);
axios.post('/ticketsapp/public/api/store_task_user', this.form)
.then((response) => {
console.log(response.data);
alert('ok');
this.errors = response.data;
alert(Object.keys(this.errors).length);
if (Object.keys(this.errors).length === 0) {
alert('viva');
} else {
alert('noviva');
this.$emit('failure');
this.$emit('pass-errors', this.errors);
}
})
.catch(error => {
alert('no ok');
console.log(error);
});
}
}
This is the parent component TheReporterTickets:
<template>
<div>
<allocate-task :dev="dev" :tasks="tasks" #pass-errors="onPassErrors" #failure="displayErrors=true" #success="displaySuccess=true"></allocate-task>
<hr>
<validated-errors :errorsForm="errorsTicket" v-if="displayErrors===true"></validated-errors>
</div> </template>
<script>
import AllocateTask from "./AllocateTask.vue"
import ValidatedErrors from "./ValidatedErrors.vue"
export default {
components: {
'allocate-task': AllocateTask,
'validated-errors': ValidatedErrors
},
props: {
dev: {
type: Array,
required: true,
default: () => [],
},
tasks: {
type: Array,
required: true,
default: () => [],
}
},
mounted() {
console.log('Component mounted.');
},
data: function() {
return {
displayErrors: false,
errorsTicket: []
}
},
methods: {
onPassErrors(value) {
alert('error');
console.log('errors passed');
const values = Object.values(value);
this.errorsTicket = values;
console.log(this.errorsTicket);
}
}
} </script>
As you can imagine, I am unable to call the method onPassErrors located in the parent component. I visualize correctly the alert in the else statement of the child component, so I suppose that I am unable to pass the data from the child to the parent component.
Can help?
I got an vue-warning (which results to as an error on my end coz my code is not working) that says:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "editmode"
With it, tried the suggestion here but can't make it work. Below is my work:
props:{
editmode:{
type: Boolean,
default: false,
}
},
methods:{
toggleM(){
var editmode = this.editmode;
editmode = !editmode;
this.editmode = editmode;
if(editmode == false){
//dothis
}else{
//dothat
}
},
}
TEMPLATE
<template>
<div class="ui-table-container-body">
<div class="ui-table" v-if="Boolean(items.length) || Boolean(Object.keys(items).length)" v-cloak>
<ui-table-body ref="body" v-model="items"
:editmode="editmode"
>
</ui-table-body>
</div>
</div>
</template>
The line this.editmode = editmode; is the one pointed in my console, is there any way I can surpass this?
You must use a data variable as a gateway to your prop.
In your component, the code code should look like this:
props:{
editmode:{
type: Boolean,
default: false,
}
},
data: {
dataEditMode = false
},
watch: {
'editmode': {
handler: 'onEditmodeChanged',
immediate: true,
},
'dataEditMode': {
handler: 'onDataEditModeChanged'
}
},
methods:{
toggleM(){
var editmode = this.dataEditMode;
editmode = !editmode;
this.dataEditMode = editmode;
if(editmode == false){
//dothis
}else{
//dothat
}
},
onEditmodeChanged (newVal) {
this.dataEditMode = newVal
},
onDataEditModeChanged (newVal) {
this.$emit('editmodeChanged', newVal)
}
}
and the the inclusion of this component in your parent-component should look like this:
<my-component-name :editmode="editmode" #editmodeChanged="(e) => { editmode = e }"></my-component-name>
You shouldn't mutate props from the component itself. See the One Way Data Flow section of the guide. You can use a prop as the initial value, and then keep a value in the data section and mutate that:
props: {
editmode: {
type: Boolean,
default: false,
}
},
data () {
return {
emode: this.editmode,
}
},
methods: {
toggleM () {
let editmode = this.emode;
editmode = !editmode;
this.emode = editmode;
if (editmode == false) {
// dothis
} else {
// dothat
}
},
}
Demo
Vue.component('editbox', {
template: '<div>' +
'<button #click="toggleM">{{ btext }}</button>' +
'<input v-if="emode" />' +
'</div>',
props: ['editmode'],
data () {
return {
emode: this.editmode,
}
},
computed: {
btext () {
return this.emode ? "Text" : "Edit";
}
},
methods:{
toggleM() {
this.emode = !this.emode;
},
}
})
var app = new Vue({
el: '#app',
data: {
mode: true,
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<editbox :editmode="mode" />
</div>
I would send back an event to the parent so it could modify its value:
For example (not tested):
Child Component
props:{
editmode:{
type: Boolean,
default: false,
}
},
methods:{
toggleM(){
var editmode = !this.editmode;
this.$emit('changeEditMode', editmode);
if (editmode == false){
//dothis
} else {
//dothat
}
},
}
Parent
<child-component #changeEditMode="editModeChanged" :editmode="editmode"></child-component>
...
methods:{
editModeChanged(value){
this.editmode = value
},
}
I am trying to update a row from a grid in a mobile app , but the model is not sent to the server.
I am using kendo 2015.1.429
My view is this:
<div data-role="view" data-init="initGrid" data-stretch="true">
<div data-role="header">
</div>
<div id="grid">
</div>
</div>
<script type="text/javascript">
function initGrid() {
var dataSource3 = new kendo.data.DataSource({
transport: {
read: {
url: "#Url.Action("GetAll")",
dataType: "json"
},
update: {
url: "#Url.Action("Update")",
dataType: "json"
},
destroy: {
url: "#Url.Action("Destroy")",
dataType: "json"
},
create: {
url: "#Url.Action("Create")",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: false,
schema: {
data:"Data",
model: {
id: "ID",
fields: {
ID: { type: "number", editable: false, nullable: false },
Name: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource:dataSource3,
pageable: true,
mobile: "tablet",
height: kendo.support.mobileOS.wp ? "24em" : 430,
resizable: true,
editable: {
mode: "popup"
},
toolbar: ["create"],
columns: [
{ field: "ID", title: "ID", width: 200},
{ field: "Name", title: "Name"},
{ command: ["edit", "destroy"] }
]
});
}
</script>
The Update method in controller is this:
public ActionResult Update([DataSourceRequest] DataSourceRequest request, Model viewModel)
{
return Json(new[] { viewModel }.ToDataSourceResult(request, ModelState));
}
<--EDITED 2 -->
I saw in Fiddler that no data is sent to my method Update.
What am I forgetting to do? What am I doing wrong?
If I remove parameterMap
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
It works fantastic.
Thanks!
I have the following Kendo MVVM grid:
<div id="permissionTypeGrid" data-role="grid"
data-sortable="true"
data-scrollable="true"
data-editable="true"
data-toolbar="['create', 'save', 'cancel']"
data-bind="source: permissionTypes"
data-auto-bind="true"
data-columns="[
{ 'field': 'PermissionType', 'width': 60 },
{ 'field': 'Description', 'width': 300 },
{ 'field': 'DisplayOrder', 'width': 60 },
{ 'command': [{name: 'destroy', text: 'Delete'}], 'width': 40 }
]">
</div>
And the following view model:
self.permissionTypeGrid = kendo.observable({
isVisible: true,
permissionTypes: new kendo.data.DataSource({
schema: {
parse: function (results) {
var permissionTypes = [];
for (var i = 0; i < results.Data.Data.length; i++) {
var permissionType = {
PermissionType: results.Data.Data[i].SystemPermissionTypeCode,
Description: results.Data.Data[i].SystemPermissionTypeDescription,
DisplayOrder: results.Data.Data[i].DisplayOrder
};
permissionTypes.push(permissionType);
}
return permissionTypes;
}
},
transport: {
read: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes",
},
create: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes"
},
update: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes"
},
destroy: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#permissionTypeGrid"), self.permissionTypeGrid);
Transport.read works fine, but the url for transport.create is never executed, nor is the parameterMap function. If I add a new record to the grid and then click "Save Changes", shouldn't the parameterMap function always be called? Also, an http request for the read is made as expected, but none gets generated for a create.
You schema needs and ID.
If you add the line model: { id: "DisplayOrder" }, after schema your create will begin firing when you click save changes.
Of course this is not likely to be the field that you will want to use for an ID but it should get you working.
schema: {
model: { id: "DisplayOrder" },
parse: function (results) {
...
}
In my jqGrid I'm using both inline editing and form editing.
One of my columns should not be editable in inline editing so I put the attribut editable to false in my colModel, but this column should be visible in form editing (readonly when editing and editable when adding).
Here is what I have tried :
colModel:[{name:'bordereau',index:'BORDEREAU',width:60,align:'center',title:false,editable:false,editoptions: { readonly: true },editrules:{required:true},sortable:true,search:true},
function addRowForm(){
grid.editGridRow("new",{
width:'auto',
height:'auto',
reloadAfterSubmit:true,
recreateFilter:true,
beforeInitData: function() {
grid.jqGrid('setColProp','bordereau',{editable:true});
grid.jqGrid('setColProp','bordereau',{editoptions: {readonly: false}});
},
afterShowForm: function() {
$("#editmod"+gridId).css("top",Math.round(((hauteurFenetreUtilisable)/2)-($("#editmod"+gridId).height()/2))+"px");
$("#editmod"+gridId).css("left",Math.round(((largeutFenetreUtilisable)/2)-($("#editmod"+gridId).width()/2))+"px");
grid.jqGrid('setColProp','bordereau',{editable:false});
grid.jqGrid('setColProp','bordereau',{editoptions: {readonly: true}});
$("#TblGrid_listeVar2 tr:visible:odd").addClass("jqgrow ui-row-ltr odd");
},
onclickPgButtons : function (which, formid, numeroBordereau) {
},
onClose: function() {
},
afterComplete: function() {
}
});
}
function editRowForm(numeroBordereau){
grid.restoreRow(numeroBordereau);
resetGridVar();
grid.editGridRow(numeroBordereau,{
width:'auto',
height:'auto',
reloadAfterSubmit:true,
recreateFilter:true,
beforeInitData: function() {
grid.jqGrid('setColProp','bordereau',{editable:true});
},
afterShowForm: function() {
$("#editmod"+gridId).css("top",Math.round(((hauteurFenetreUtilisable)/2)-($("#editmod"+gridId).height()/2))+"px");
$("#editmod"+gridId).css("left",Math.round(((largeutFenetreUtilisable)/2)-($("#editmod"+gridId).width()/2))+"px");
$("#TblGrid_listeVar2 tr:visible:odd").addClass("jqgrow ui-row-ltr odd");
grid.jqGrid('setColProp','bordereau',{editable:false});
},
onclickPgButtons : function (which, formid, numeroBordereau) {
},
onClose: function() {
},
afterComplete: function() {
}
});
}