Related
I am having an issue with my validation with my .Net MVC5 form. When I submit my form I get the validation summary as well as the validation messages under each field that's invalid. The problem is when I start entering information into the fields, the errors don't go away like they're supposed to. I included jquery validation min underneath my form as well as jquery validation unobtrusive min but it still doesn't work for me
This is my View:
<h2>Add</h2>
<link href="~/Content/css/result-light.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<style id="compiled-css" type="text/css">
body {
font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
font-size: 1rem !important;
line-height: 1.5 !important;
}
html {
font-size: 100% !important;
}
.col-xs-3 {
width: 25% !important;
}
.stepwizard-step p {
margin-top: 0px;
color: #666;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
/*opacity: 1 !important;
filter: alpha(opacity=100) !important;*/
}
.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
opacity: 1 !important;
color: #bbb;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-index: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
.green {
border: solid green 1px;
}
.error {
border: solid red 1px;
}
.select2-container--default .select2-selection--single {
border: 1px solid #ccc !important;
border-radius: 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.428571429 !important;
padding: 6px 12px !important;
}
.select2-container .select2-selection--single {
height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
margin-top: 0;
}
/* EOS */
</style>
<script id="insert"></script>
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
1
<p><small>Personal Information</small></p>
</div>
<div class="stepwizard-step col-xs-3">
2
<p><small>Security</small></p>
</div>
<div class="stepwizard-step col-xs-3">
3
<p><small>Church Affiliation</small></p>
</div>
<div class="stepwizard-step col-xs-3">
4
<p><small>Payment</small></p>
</div>
</div>
</div>
#using (Html.BeginForm("Create", "Login", new { #id = string.Empty }, FormMethod.Post, new { #id = "payment-form" }))
{
#Html.AntiForgeryToken()
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Personal Information</h3>
</div>
<div class="panel-body">
#Html.ValidationSummary(false, "Please fix errors before submitting the form:", new { #class = "text-danger" })
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">First Name</label>
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #id = "firstName", #class = "form-control", #placeholder = "Enter First Name" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="form-group col-md-6">
<label class="control-label">Last Name</label>
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #id = "lastName", #class = "form-control", #placeholder = "Enter Last Name" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Company</label>
#Html.EditorFor(model => model.logins.Company, new { htmlAttributes = new { #id = "company", #class = "form-control", #placeholder = "Company" } })
#Html.ValidationMessageFor(model => model.logins.Company, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">E-mail</label>
#Html.EditorFor(model => model.logins.UserName, new { htmlAttributes = new { #id = "email", #class = "form-control", #placeholder = "E-mail" } })
#Html.ValidationMessageFor(model => model.logins.UserName, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address</label>
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #id = "address", #class = "form-control", #placeholder = "Address" } })
#Html.ValidationMessageFor(model => model.logins.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address 2</label>
#Html.EditorFor(model => model.Address2, new { htmlAttributes = new { #id = "address2", #class = "form-control", #placeholder = "Address2" } })
#Html.ValidationMessageFor(model => model.Address2, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label">City</label>
#Html.EditorFor(model => model.logins.City, new { htmlAttributes = new { #id = "city", #class = "form-control", #placeholder = "City" } })
#Html.ValidationMessageFor(model => model.logins.City, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-4">
<label class="control-label">Zip</label>
#Html.EditorFor(model => model.logins.Zip, new { htmlAttributes = new { #id = "zip", #class = "form-control", #placeholder = "Zip" } })
#Html.ValidationMessageFor(model => model.logins.Zip, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Phone</label>
#Html.EditorFor(model => model.logins.Phone, new { htmlAttributes = new { #id = "phone", #type = "tel", #class = "form-control", #placeholder = "Phone" } })
#Html.ValidationMessageFor(model => model.logins.Phone, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Cell Phone</label>
#Html.EditorFor(model => model.logins.CellPhone, new { htmlAttributes = new { #id = "cell", #type = "tel", #class = "form-control", #placeholder = "Cell Phone" } })
#Html.ValidationMessageFor(model => model.logins.CellPhone, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Musician Type 1</label>
#Html.DropDownListFor(model => model.musicianTypes, new SelectList(Model.musicianTypes, "id", "TypeName"), "None", new { #id = "musicianType1", #class = "form-control" })
<small class="form-text"></small>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Musician Type 2</label>
#Html.DropDownListFor(model => model.musicianTypes, new SelectList(Model.musicianTypes, "id", "TypeName"), "None", new { #id = "musicianType2", #class = "form-control" })
<small class="form-text"></small>
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2">
<div class="panel-heading">
<h3 class="panel-title">Account Security</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Password</label>
#Html.EditorFor(model => model.logins.Password, new { htmlAttributes = new { #id = "password", #type = "password", #class = "form-control", #placeholder = "Password" } })
#Html.ValidationMessageFor(model => model.logins.Password, "", new { #class = "text-danger" })
<ul class="form-text text-muted">
<li>Must be 8-20 characters long</li>
<li>Must contain at least 1 number</li>
<li>Must contain at least 1 uppercase letter</li>
<li>Must contain at least 1 lowercase letter </li>
<li>Must contain a special character (e.g. ! ; # * %)</li>
</ul>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Confirm Password</label>
#Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new { #id = "cnfPassword", #type = "password", #class = "form-control", #placeholder = "Confirm Password" } })
#Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Security Question</label>
#Html.DropDownListFor(model => model.chlist, new SelectList(Model.seclist, "id", "Question"), "Select", new { #id = "securityQuestion", #class = "form-control" })
<small class="form-text"></small>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Security Answer</label>
#Html.EditorFor(model => model.logins.SecretAnswer, new { htmlAttributes = new { #id = "answer", #type = "text", #class = "form-control", #placeholder = "Security Question Answer" } })
#Html.ValidationMessageFor(model => model.logins.SecretAnswer, "", new { #class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Account PIN</label>
#Html.EditorFor(model => model.logins.AccountPasscode, new { htmlAttributes = new { #id = "pin", #maxlength = "6", #type = "password", #class = "form-control", #placeholder = "Pin" } })
#Html.ValidationMessageFor(model => model.logins.AccountPasscode, "", new { #class = "text-danger" })
<small class="form-text"></small>
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3">
<div class="panel-heading">
<h3 class="panel-title">Church Affiliation</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 1</label><br />
#Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { #id = "churchAffiliation1", #class = "select2 form-control", #style = "width:100%" })
<small class="form-text"></small>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 2</label><br />
#Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { #id = "churchAffiliation2", #class = "select2 form-control", #style = "width:100%" })
<small class="form-text"></small>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 1</label><br />
#Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { #id = "churchAffiliation3", #class = "select2 form-control", #style = "width:100%" })
<small class="form-text"></small>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 4</label><br />
#Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { #id = "churchAffiliation4", #class = "select2 form-control", #style = "width:100%" })
<small class="form-text"></small>
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-4">
<div class="panel-heading">
<h3 class="panel-title">Payment</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="cardName">Name on Card</label>
#Html.EditorFor(model => model.logins.Name, new { htmlAttributes = new { #id = "cardName", #class = "form-control", #placeholder = "Name On Card" } })
#Html.ValidationMessageFor(model => model.logins.Name, "", new { #class = "text-danger" })
</div>
<row>
<div class="form-group">
<label for="plan" class="control-label">Select a Plan</label><br />
#Html.DropDownListFor(model => model.subscriptionTypes, new SelectList(Model.subscriptionTypes, "id", "SubscriptionType1"), "None", new { #id = "plan", #class = "form-control" })
</div>
<div class="form-group">
<label for="card-number">
Credit or debit card
</label>
<div id="card-number">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="card-vc">
CVC
</label>
<div id="card-cvc">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="col-md-6">
<label for="card-expiration">
Exp
</label>
<div id="card-expiration">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
</div>
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
<div class="form-group">
<button class="form-control btn btn-primary" type="submit">Submit Payment</button>
</div>
</div>
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-success').addClass('btn-default');
$item.addClass('btn-success');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function () {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input, select"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-success').trigger('click');
});
</script>
<script>
$('.select2').select2();
</script>
This is my _Layout:
<!-- Custom fonts for this template-->
<link href="~/Content/AdminTemplate/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />
<!-- Custom styles for this template-->
<link href="~/Content/AdminTemplate/css/sb-admin-2.min.css" rel="stylesheet">
<link href="~/Content/AdminTemplate/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Content/AdminTemplate/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="~/Content/AdminTemplate/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="~/Content/AdminTemplate/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="~/Content/AdminTemplate/vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="~/Content/AdminTemplate/js/demo/chart-area-demo.js"></script>
<script src="~/Content/AdminTemplate/js/demo/chart-pie-demo.js"></script>
<!-- Page level plugins -->
<script src="~/Content/AdminTemplate/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="~/Content/AdminTemplate/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Page level custom scripts -->
<script src="~/Content/AdminTemplate/js/demo/datatables-demo.js"></script>
#RenderSection("stripe", required: false)
</body>
</html>
This is my controller:
public ActionResult Create()
{
if (string.IsNullOrEmpty(Convert.ToString(Session["UserName"])))
{
return RedirectToAction("Login", "Home");
}
/* var mymodel = new LoginSecurityQuestionsViewModel();
mymodel.logins = db.logins.ToList();
ViewBag.securityquestions = db.secretquestions.ToList();
ViewBag.churches = db.churches.ToList();
ViewBag.subscriptionTypes = db.subscriptiontypes.ToList();
ViewBag.musicianTypes = db.musiciantypes.ToList();
return View(mymodel);*/
LoginSecurityQuestionsViewModel multi_Dropdownlist = new LoginSecurityQuestionsViewModel
{
seclist = GetSecurityQuestionList(),
chlist = GetChurchList(),
subscriptionTypes = GetSubscriptionTypes(),
musicianTypes = GetMusicianTypes()
};
return View(multi_Dropdownlist);
}
// POST: login/Create
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
public ActionResult Create(ChargeDTO chargeDto)
{
if (ModelState.IsValid == false)
{
LoginSecurityQuestionsViewModel multi_Dropdownlist = new LoginSecurityQuestionsViewModel
{
seclist = GetSecurityQuestionList(),
chlist = GetChurchList(),
subscriptionTypes = GetSubscriptionTypes(),
musicianTypes = GetMusicianTypes()
};
return View(multi_Dropdownlist);
}
}
I can't figure out why the errors don't go away when I fix the validation errors. Also, each time my form loads it displays Please fix errors before submitting the form: in red. The errors only go away when I click submit. Maybe this has something to do with my javascript on the view page?
I'm trying to integrate ckeditro with laravel livewire but everytime I enter content into the editor, livewire removes the editor from my textarea.
My code is as follows
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model="description"
></textarea>
</div>
The following is the javascript
$(document).ready(function () {
CKEDITOR.instances['description'].on('change', function(e){
#this.set('description', e.editor.getData());
});
});
Any help would be appreciated
Thanks
Update
I am slowly getting there. The only issue I have is that when I save the form, the ckeditor is removed from the textarea.
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model.debounce.9999999ms="description"
x-data
x-init="
CKEDITOR.instances['description'].on('change', function(e){
$dispatch('input', e.editor.getData())
});
"></textarea>
</div>
How I did solved CKEDITOR problem in Laravel-Livewire.
Textarea
<div wire:ignore class="form-group row">
<x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
<div class="col-md-9">
<textarea wire:model="message" class="form-control required" name="message" id="message"></textarea>
<x-error-message :value="__('message')" />
</div>
</div>
CKEDITOR-4
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>
const editor = CKEDITOR.replace('message');
editor.on('change', function(event){
console.log(event.editor.getData())
#this.set('message', event.editor.getData());
})
</script>
CKEDITOR-5
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#message'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('message', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
Livewire has a .defer modifier that batches data updates with the next network request. More on Livewire Official Documentation
Tested on Laravel 8.4
Livewire v2.0
<form wire:submit.prevent="submit">
<div wire:ignore>
<textarea wire:model.defer="description" class="form-control" id="description" name="description">{!! $description !!}</textarea>
</div>
</form
Your CK editor instance
<script>
ClassicEditor
.create(document.querySelector('#description'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
I had the same problem.
You can re-initialize ckeditor with 'dehydrate'.
public function dehydrate() {
$this->emit('initializeCkEditor');
}
And in the parent view you can initialize the CKEditor again
Livewire.on('initializeCkEditor', function () {
ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
});
When you save the form, Livewire reloads the Livewire component. Currently, you are loading ckeditor when the doc is ready.
On your save event, emit an event like:
$this->emitUp('postAdded');
And then in your javascript, add a listener for the event like:
<script>
window.livewire.on('postAdded' => {
CKEDITOR.instances['description'].on('change', function(e){
#this.set('description', e.editor.getData());
});
});
</script>
This should load ckeditor on the newly updated component code.
(https://laravel-livewire.com/docs/events)
Also, I would recommend changing this:
wire:model.debounce.9999999ms="description"
to this:
wire:model.lazy="description"
as this will wait until the textarea loses focus for Livewire to update.
(https://laravel-livewire.com/docs/properties#lazy-updating)
use wire:ignore in your container. This will prevent livewire to re-rendered the component. The explanation is here, just search in the code.
https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker
<div id="where-the-livewire-id-attached">
<div id="container-wrapper" wire:ignore>
<textarea id="your-editor" cols="30" rows="10"></textarea>
<div id="word-count"></div>
</div>
</div>
I did this using alpinejs x-init initialize the editor wire:model binds data value from the editor wire:ignore is for letting know livewire to skip the editor from re-rendering when the state changes
<div class="row">
<div class="col mb-3">
<label for="productDescription" class="form-label">Product
Description</label>
<div wire:ignore>
<textarea x-data x-init="ClassicEditor
.create(document.querySelector('#description'), {
})
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData());
})
})
.catch(err => {
console.error(err.stack);
});" id="description" wire:model.lazy="description" name="description" required>
{!! $description !!}
</textarea>
</div>
#error('description')
<span
class="text-warning"><small><strong>{{ $message }}</strong></small></span>
#enderror
<div class="form-text"><small class="text-muted">Enter a detailed
description of the product</small></div>
</div>
</div>
To make it work with ckeditor here is how we can do it
ClassicEditor
.create( document.querySelector( '#yourCkId' ) )
.then( editor => {
console.log( editor );
editor.model.document.on( 'change:data', () => {
// Below #this.set breaks down my ckeditor so I am avoiding it to set ckeditor value
// #this.set("description", editor.getData());
//instead use this
$('#yourTextAreaId').val(editor.getData());
} );
} )
.catch( error => {
console.error( error );
} );
and the HTML
<form wire:submit.prevent="store(document.querySelector('#yourTextAreaId').value)">
<div wire:ignore>
<div id="yourCkId">{!! $description !!}</div>
</div>
<textarea id="yourTextAreaId" wire:key="uniqueKey" wire:model="description" style="display: none">
{!! $description !!}
</textarea>
</form>
And Your Livewire Controller
public function store($note){
$this->note = $note;
}
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div>
<div wire:ignore>
<textarea class="form-control" wire:model="description" x-data x-init="
ClassicEditor
.create( $refs.editorDescription)
.then(function(editor){
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData())
})
})
.catch( error => {
console.error( error );
} );" x-ref="editordescription">
</textarea>
</div>
I need to improve a client's website and I had detect an strange error in their behaivour.
When the web call one ajax action, it is called twice. I have breakpoints in js call and in the PHP action code, and the js run once (it is good) but PHP run twice.
I don't know what else test.
I had checked:
No break links (favicons, or css and js resources, etc)
At begining of the event which call the actio, I just had event.preventDefault();
At the ending of this event, I had added: return false;
At the form tag, I have this: onsubmit="event.returnValue = false; return false;"
Edit: I have this issue over all browsers.
Edit II: code
The action in the controller:
public function getMapOffers() {
$temporal = $this->getOffers('all');
return $temporal;
}
public function getOffers($offerType = 'all',$opciones=false) {
// loadModels
$this->loadModel('Offer');
$this->autoRender = false; // We don't render a view in this example
//$this->request->onlyAllow('ajax'); // No direct access via browser URL
$this->loadModel('Customer');
$customer = $this->Auth->user();
$customer['googleaddress'] = $this->Customer->getDetaultGoogleAddress($customer);
$latitude_customer = isset($customer['latitude']) ? $customer['latitude'] : 0;
$longitude_customer = isset($customer['longitude']) ? $customer['longitude'] : 0;
$data = array();
$options = array();
//$pagination_limit = 600;
$page = isset($this->request->data['page']) ? $this->request->data['page'] : NULL;
$latitude = isset($this->request->data['latitude']) ? $this->request->data['latitude'] : $latitude_customer;
$longitude = isset($this->request->data['longitude']) ? $this->request->data['longitude'] : $longitude_customer;
$category = isset($this->request->data['category']) ? $this->request->data['category'] : '';
$keyword = isset($this->request->data['keyword']) ? $this->request->data['keyword'] : '';
//jfc
$nacionales = isset($this->request->data['nacionales']) && $this->request->data['nacionales'] === "true" ? TRUE : FALSE;
if( $nacionales ){
$array_filters = array('national' => 1, 'map' => 'true', 'page' => $page, 'keyword' => $keyword, 'category' => $category, 'latitude' => $latitude, 'longitude' => $longitude);
}
else{
$array_filters = array('map' => 'true', 'page' => $page, 'keyword' => $keyword, 'category' => $category, 'latitude' => $latitude, 'longitude' => $longitude);
}
//!jfc
if ($offerType == 'featured') {
$isFeaturedRequest = true;
}
if ($offerType == 'lastminute') {
$isLastMinuteRequest = true;
}
if ($offerType == 'all') {
$isFeaturedRequest = true;
$isLastMinuteRequest = true;
$data['page'] = $page;
$options['page'] = $page;
}
if(isset($this->request->data['firstsearch']) && intval($this->request->data['firstsearch']) < 2){
$options['limit'] = 100;
}
$result = $this->Offer->getPublishedOffers($array_filters, $options);
$data['total'] = 10000;
$data['map'] = true;
$data['offers'] = $this->prepareOfferContent($result['offers'],$opciones);
if ($isFeaturedRequest) {
$data['featured'] = $this->prepareOfferContent($result['featured'],$opciones);
}
if ($isLastMinuteRequest) {
$data['lastminute'] = $this->prepareOfferContent($result['lastminute'],$opciones);
}
if (isset($data['offers']) && empty($data['offers'])) {
$data['offers'] = '';
}
if (isset($data['featured']) && empty($data['featured'])) {
$data['featured'] = '';
}
if (isset($data['lastminute']) && empty($data['lastminute'])) {
$data['lastminute'] = '';
}
$temporal2 = json_encode($data);
/*try{
file_put_contents('offers.log', print_r($data, true));
}
catch (Exception $e){
//json_encode($e);
}*/
return $temporal2;
}
ctp file:
<!--Search-->
<div class="row">
<form id="offer-search" class="form form-horizontal" method="post" action="#" accept-charset="UTF-8" onsubmit="event.returnValue = false; return false;">
<div class="col-md-12">
<h1>Buscador de ofertas</h1>
<div class="col-sm-3 offer-search-item">
<input type="hidden" value="1" name="data[firstsearch]" id="firstsearch" />
<?php echo $this->Form->input('keyword' , array('class'=>'form-control' ,'id' => 'keywordoffersearch', 'placeholder' => 'Nombre de oferta', 'label' => false )); ?>
</div>
<div class="col-sm-4 offer-search-item" id="divDireccion">
<div class="input-group">
<span class="input-group-addon" id="mapcurrentgeoposition" title="<?php echo __('I want to send my current position') ?>"><i class="icon-screenshot"></i></span>
<?php
if( $customer['googleaddress'] === Configure::read("App.DefaultDataGoogleMaps") ||$customer['googleaddress'] === Configure::read("App.DefaultDataGoogleMaps").", Madrid, Madrid, 28013" ){
//todo: quitar el OR, está por un error en la página de perfil
$customer['googleaddress'] = "";
}
echo $this->Form->input('googlemapsaddress' , array('class'=>'form-control' ,'id' => 'googlemapsaddress', 'placeholder' => 'Ubicación', 'label' => false , 'default' => $customer['googleaddress'] ));
echo $this->Form->input('latitude', array('type' => 'hidden', 'value' => $latitude , 'id' => 'latitude' ) );
echo $this->Form->input('longitude', array('type' => 'hidden', 'value' => $longitude, 'id' => 'longitude' ) );
?>
</div>
</div>
<div class="col-sm-3 offer-search-item">
<?php echo $this->Form->input('categories', array('options' => $categories,'empty' => __('Todos los sectores'), 'class'=>'form-control', 'label' => false, 'id' => 'categorymapfilter'));?>
</div>
<div class="col-sm-2 offer-search-item">
<button type="submit" id="submitOfferFilter" class="btn btn-default btn-success"><i class="icon-refresh"></i> <?php echo __('Actualizar ofertas') ?></button>
</div>
<div class="col-sm-12 offer-search-item">
<?php echo $this->Form->input('nacionales', array('onchange' => 'changeNacionales(this);', 'type' => 'checkbox', 'label' => 'Mostrarme sólo las ofertas nacionales.' , 'id' => 'chkNacionales' ) ); ?>
</div>
</div>
</form>
</div>
<hr class="normal">
<!--./Search-->
<!--Map-->
<div class="row" style="position: relative">
<div id="loadingMap" class="col-lg-12" style="position: absolute;z-index: 9999; background-color: #f5f6f6; width: 100%">
<p class="text-center" style="height: 400px; position: relative">
<?php echo $this->Html->image("loading.gif", array('width' => '32', 'height' => '32', 'style' => 'position: absolute; top: 50%')) ?>
</p>
</div>
<div class="col-md-12">
<div id="map-canvas" class="map map_canvas"></div>
<hr class="hr-normal">
</div>
</div>
<!--./Map-->
<!-- Last Minute -->
<div id="lastMinuteList" class="row" style="margin: 0 -30px">
</div>
<hr class="offers-separator" style="margin: 20px -30px;">
<!-- ./Last Minute -->
<!--Offers-->
<div class="row" style="position: relative">
<div id="loadingOffers" class="col-lg-12" style="position: absolute;z-index: 9999; background-color: #f5f6f6; width: 100%">
<p class="text-center" >
<?php echo $this->Html->image("loading.gif", array('width' => '32', 'height' => '32', 'style' => 'position: absolute; top: 50%')) ?>
</p>
</div>
<div id="featuredOffers" class="hide">
<div class="row">
<p class="view-all-featured-wrapper align-left featured-title">
<span class="lead"><img width="20" src="/img/mobile/ic_destacado.png" /> Ofertas destacadas</span>
<button id="view-all-featured" class="btn btn-link bnt-xs pull-right">
<span id="message-link-featured">
<i class="icon-chevron-down"></i> Mostrar todas</span>
</button>
</p>
</div>
<div clas="row">
<div id='lista-main'>
<div id="mi-lista-contenedor" class="row" style="position: relative">
<ul id='mi-lista'>
</ul>
</div>
<div class="controls center">
<button class="btn prev"><i class="icon-chevron-left"></i></button>
<button class="btn next"><i class="icon-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div id="offers" style="display: none">
<!-- Featured -->
<!-- <div id="featuredOffers" class="hide">
<div class="row">
<p class="view-all-featured-wrapper align-left featured-title">
<span class="lead"><img width="20" src="/img/mobile/ic_destacado.png" /> Ofertas destacadas</span>
<button id="view-all-featured" class="btn btn-link bnt-xs pull-right">
<span id="message-link-featured">
<i class="icon-chevron-down"></i> Mostrar todas</span>
</button>
</p>
</div>
<div clas="row">
<div id='lista-main'>
<div id="mi-lista-contenedor" class="row" style="position: relative">
<ul id='mi-lista'>
</ul>
</div>
<div class="controls center">
<button class="btn prev"><i class="icon-chevron-left"></i></button>
<button class="btn next"><i class="icon-chevron-right"></i></button>
</div>
</div>
</div>
</div>-->
<hr class="offers-separator">
<!-- List offers -->
<div class="list-offers row">
<div id="filterList"></div>
</div>
<!-- ./List offers -->
<!-- Paginator -->
<!-- <div id="paginator-offers" class="text-center"></div>-->
</div>
</div>
<!--./Offers-->
<?php echo $this->element('customer/mapoffers') ?>
<!-- JFC appbanner -->
<div class="row">
<div class="col-sm-12">
<div style="text-align:center;">
<a title="<?php echo __("Descarga la APP de Start Discount Club en tu móvil"); ?>" href="/pages/descarga-app-start-club/">
<img style="margin: 15px 25px 0; max-width: 90%;" src="/img/banner_footer.jpg" />
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var espublic=false;
function changeNacionales(that){
var divDireccion = $("#divDireccion");
if( $(that).is(':checked') ){
divDireccion.hide('slow');
}
else{
divDireccion.show('slow');
}
}
</script>
Ajax call:
this.getListOffers = function(options){
var that = this;
var config = options ? options : {};
var page = config.page ? config.page : 1;
var data = {
'page': page,
'keyword': this.$keywordOfferSearch.val(),
'category': this.$categoryMapFilter.val(),
'latitude': this.$latitude.val(),
'longitude': this.$longitude.val(),
'nacionales': this.$chkNacionales.prop( "checked" ),
'firstsearch': this.$firstsearch
};
//console.log("--------DATA-------");
//console.log(data);
//console.log("------END DATA-----");
$.ajax({
'type': 'post',
'url': this.urlAPI,
'data': data,
'dataType': 'json',
success: function( locations ) {
that.$firstsearch += 1;
that.createListOffers( locations );
if (offerMapDesktop.mapType === "mobile") {
that.setListLoaded({'state': true});
}
},
error: function(e) {
$.jGrowl(messages.error.basic);
}
});
};
Solved, there was other js file with other ajax call...
I am trying to make a popup dialog to allow the user to fill in a form.
When they click submit I want to submit the form.
I figured out how to make the modal popup but cannot figure out how to get it to submit the form when the form is clicked. Does anyone know how to do this?
#using (Html.BeginForm())
{
<div>
<fieldset>
<legend>Account Information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type="submit" value="Log On" />
</p>
</fieldset>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
You need to make sure you have a valid POST method in your controller for the form to submit to. Your form here looks valid as long as you aren't expecting the dialog's submit button to submit the form. If that is the case then you will need to give the form an ID and call submit from your function for the dialog "Submit" button.
<div id="dialog-form">
#using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "LogOnForm" })) {
<div>
<fieldset>
<legend>Account Information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type="submit" value="Log On" style="display:none;" />
</p>
</fieldset>
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
modal: true,
buttons: {
"Submit": function () {
$("#LogOnForm").submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
We are using MVC3 to develop an application. We need to create multiple entities - like customers - from the Main page. Same partial view is used to create this entity. These partial views are loaded on to Jquery model dialog(Different div tags are used) one by one on demand when clicked on a link/button. When we creates the first entity, it creates successfully and corresponding key is set to the main page. But when we try to create the second entity, the data passed to the controller is same as the first one and an exception is thrown because of unique key constraint. We tried by adding Modelstate.clear() , but no success. Now the surprise is that if we add the entities from bottom by clicking the button in reverse order (ie 3,2,1) it is getting created. Can anybody solve this?
Controller for partial View Loading and submission
public PartialViewResult _CustomerCreate()
{
CustomerViewModel customerviewmodel = new CustomerViewModel();
ModelState.Clear();
return PartialView(customerviewmodel);
}
public ActionResult _CustomerCreate(CustomerViewModel customerviewmodel)
{
CustomerBL customerBL = new CustomerBL();
ModelState.Clear();
if (ModelState.IsValid)
{
string path = Request.UrlReferrer.AbsolutePath;
}
int id = customerBL.SaveData(customerviewmodel);
string customer = Convert.ToString(customerviewmodel.FSTNAME + " " + customerviewmodel.MDLNAME + " " + customerviewmodel.LSTNAME);
return Json(new { Customerid = id, CustomerName = customer });
}
Sample script on the main page which loads partial View to Jquery Dialog
<script type="text/javascript">
$(function () {
$(".divnewnominee").dialog({
autoOpen: false, width: 800, height: 590, modal: true,
buttons: {
"Save": function () {
if ($("#CustomerFormID").validate().form()) {
$.post("/Customer/_CustomerCreate",
$("#CustomerFormID").serialize(),
function (data) {
$("#NOMINAME").val(data.CustomerName);
$("#NOMINEE").val(data.Customerid);
$(".divnewnominee").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".newnominee").click(function () {
$(".divnewnominee").html("")
.dialog("option", "title", "New Customer")
.load("/Customer/_CustomerCreate", function () { $(".divnewnominee").dialog("open"); });
});
});
<script type="text/javascript">
$(function () {
$(".divfamily").dialog({
autoOpen: false, width: 800, height: 590, modal: true,
buttons: {
"Save": function () {
if ($("#CustomerFormID").validate().form()) {
$.post("/Customer/_CustomerCreate",
$("#CustomerFormID").serialize(),
function (data) {
$("#DEPOSITCUST").val(data.CustomerName);
$("#DEPOSITBY").val(data.Customerid);
$(".divfamily").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".newfamily").click(function () {
$(".divfamily").html("")
.dialog("option", "title", "New Customer")
.load("/Customer/_CustomerCreate", function () { $(".divfamily").dialog("open"); });
});
});
Partial view which is loaded into the divs
#model ccs.Models.ViewModels.CustomerViewModel
#{
ViewBag.Title = "Create";
}
<h2>Customer</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/ccsjs/ChooseFromList.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false, width: 800, height: 500, modal: true,
buttons: {
"Save": function () {
if ($("#AddressLookup").validate().form()) {
$.post("/Customer/AddressLookupCreate",
$("#AddressLookup").serialize(),
function (data) {
$("#CustAddress").val(data.address);
$("#AddrID").val(data.Adressid);
$("#dialog").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".Address").click(function () {
$("#dialog").html("")
.dialog("option", "title", "Address")
.load("/Customer/_AddressLookupCreate", function () { $("#dialog").dialog("open"); });
});
});
<script type="text/javascript" >
$(function () {
$("#addr").dialog({
autoOpen: false, width: 800, height: 550, modal: true,
buttons: {
"Add": function () {
if ($("#AddressLookupList").validate().form()) {
$.post("/Customer/_AddressLookupList",
$("#AddressLookupList").serialize(),
function (data) {
$("#CustAddress").val(data.address);
$("#AddrID").val(data.Adressid);
$("#addr").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".searchaddr").click(function () {
$("#addr").html("")
.dialog("option", "title", "Address List")
.load("/Customer/_AddressLookupList", function () { $("#addr").dialog("open"); });
});
});
<script type="text/javascript">
$(function () {
$("#divcust").dialog({
autoOpen: false, width: 250, height: 500, modal: true
});
$("#custbtn").click(function () {
$("#divcust").html("")
.dialog("option", "title", "Customer List")
.load("/Customer/_CustomerList", function () { $("#divcust").dialog("open"); });
});
});
#using (Html.BeginForm("_CustomerCreate", "Customer", FormMethod.Post, new { id="CustomerFormID" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Create</legend>
<div style="float:left; width:100%;">
<div class="row-style">
<div class="labels">
#Html.Label("Customer Code")
</div>
<div id="Cust" class="fields">
#Html.TextBoxFor(model => model.CUSTCODE)
<div>#Html.ValidationMessageFor(model => model.CUSTCODE)</div>
</div>
<div class="labels">
#Html.Label("First Name")
</div>
<div class="fields">
#Html.EditorFor(model => model.FSTNAME)
<div> #Html.ValidationMessageFor(model => model.FSTNAME)</div>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Middle Name")
</div>
<div class="fields">
#Html.EditorFor(model => model.MDLNAME)
#Html.ValidationMessageFor(model => model.MDLNAME)
</div>
<div class="labels">
#Html.Label("Last Name")
</div>
<div class="fields">
#Html.EditorFor(model => model.LSTNAME)
#Html.ValidationMessageFor(model => model.LSTNAME)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Date of Birth")
</div>
<div class="fields">
#Html.TextBoxFor(model => model.DOB, new { #class = "datePicker", id = "DOB", style = "width:170px;" })
<div> #Html.ValidationMessageFor(model => model.DOB)</div>
</div>
<div class="labels">
#Html.Label("Gender")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.Gender, new SelectList(Model.Gendr, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.Gender)
</div>
</div>
<div >
<div class="labels">
#Html.Label("Address ")
</div>
<div class="fields">
#Html.TextAreaFor(model => model.ADDRESS, new { #name = "ADDRESS", #readonly = "readonly", style = "width:170px;height:50px;" ,id="CustAddress"})
<img src="../../Content/themes/base/ccsimages/Search-icon.png" class="searchaddr" alt="Account Code" />
<img src="../../Content/themes/base/ccsimages/New.jpg" alt="Account Code" class="Address" width="16Px" height="16Px"/>
#* #Html.ActionLink("New Address", "AddressCreate")*#
#Html.ValidationMessageFor(model => model.ADDRESS)
</div>
<div class="labels">
#Html.Label("Photo ")
</div>
<div class="fields">
<p>
<input type="file" id="PhotoUpload" name="PhotoUpload" />
</p>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Pan No")
</div>
<div class="fields">
#Html.EditorFor(model => model.ITPAN)
<div>#Html.ValidationMessageFor(model => model.ITPAN)</div>
</div>
<div class="labels">
#Html.Label("Tax Circle/Ward/District")
</div>
<div class="fields">
#Html.EditorFor(model => model.WARD)
#Html.ValidationMessageFor(model => model.WARD)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Mobile No")
</div>
<div class="fields">
#Html.EditorFor(model => model.MOBILE)
#*#Html.CheckBoxFor(model => model.SNDSMS, new { #value = Model.MOBILE, #onchange = "check(value)" })*#
<div> #Html.ValidationMessageFor(model => model.MOBILE)</div>
</div>
<div class="labels">
#Html.Label("Email ")
</div>
<div class="fields">
#Html.EditorFor(model => model.EMAIL)
#*#Html.CheckBoxFor(model => model.SNDMSG)*#
<div> #Html.ValidationMessageFor(model => model.EMAIL)</div>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Phone No ")
</div>
<div class="fields">
#Html.EditorFor(model => model.PHONE)
<div> #Html.ValidationMessageFor(model => model.PHONE)</div>
</div>
<div class="labels">
#Html.Label("Fax ")
</div>
<div class="fields">
#Html.EditorFor(model => model.FAX)
<div>#Html.ValidationMessageFor(model => model.FAX)</div>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Family")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.FMLY, new SelectList(Model.Famly, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.FMLY)
</div>
<div class="labels">
#Html.Label("Customer Type")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.CUSTYPE, new SelectList(Model.CustTyp, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.CUSTYPE)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Repledge")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.REPLEDG, new SelectList(Model.Repldg, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.REPLEDG)
</div>
<div class="labels">
#Html.Label("ID Proof Type")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.IDPRTYPE, new SelectList(Model.IdProoflist, "IDPRCODE", "IDPRNAME", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.IDPRTYPE)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("ID Proof No")
</div>
<div class="fields">
#Html.EditorFor(model => model.IDPNO)
#Html.ValidationMessageFor(model => model.IDPNO)
</div>
<div class="labels">
#Html.Label("ID Proof ")
</div>
<div class="fields">
<p>
<input type="file" id="IDProofUpload" name="IDProofUpload" />
</p>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Father/Husband Name")
</div>
<div class="fields">
#Html.TextBoxFor(model => model.FNAME, new { #name = "FNAME", #class = "FNAME", style = "width:170px;" })
#*<img src="../../Content/themes/base/ccsimages/Search-icon.png" alt="Account Code" onclick="openCustPickerDialog(window, document.forms[0].FCUSTID,document.forms[0].FNAME, '/Customer/_CustomerLookupIndex/')" />*#
<img src="../../Content/themes/base/ccsimages/Search-icon.png" alt="Account Code" id="custbtn"/>
#Html.ValidationMessageFor(model => model.FNAME)
#Html.HiddenFor(model => model.FID)
</div>
</div>
</div>
#Html.HiddenFor(model => model.FCUSTID, new { #name = "FCUSTID",#class="FCUSTID", style = "width:130px;" })
<div class="fields">
#Html.HiddenFor(model => model.AVASRVCE)
</div>
<div class="fields">
#Html.HiddenFor(model => model.ADDRID, new { #name = "ADDRID", style = "width:130px;",id="AddrID" })
#Html.ValidationMessageFor(model => model.ADDRID)
</div>
#*<div id="NoteListBlock">#{Html.RenderPartial("_AddressLookupCreate");}</div>*#
<div id="dialog" title="Address Lookup"></div>
<div id="addr" title="Address"></div>
<div id="divcust" title="Customer List"></div>
<div class="row-style">
<div class="errorfield">
<div class="message"> #Html.ValidationMessageFor(model => model.CUSTCODE) #Html.ValidationMessageFor(model => model.FSTNAME) #Html.ValidationMessageFor(model => model.ADDRESS)</div>
</div>
</div>
</fieldset>
}
When First Div is submitted the data gets saved properly. When Second one submits the viewmodel retains the values from the first div
We solved our issue. We added on single line of code to the Java script which invoked the partial view. The code is given below
<script type="text/javascript">
$(function () {
$(".divnewnominee").dialog({
autoOpen: false, width: 800, height: 590, modal: true,
buttons: {
"Save": function () {
if ($("#CustomerFormID").validate().form()) {
$.post("/Customer/_CustomerCreate",
$("#CustomerFormID").serialize(),
function (data) {
***$(".divnewnominee").html(data);***
$("#NOMINAME").val(data.CustomerName);
$("#NOMINEE").val(data.Customerid);
$(".divnewnominee").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".newnominee").click(function () {
$(".divnewnominee").html("")
.dialog("option", "title", "New Customer")
.load("/Customer/_CustomerCreate", function () { $(".divnewnominee").dialog("open"); });
});
});