I use the alpine.js to render a modal with a x-for loop who populate a select. Strange behavior, the x-for seems looping 2 times and I can't understand why:
the code:
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('load', () => ({
indicateurs: [],
indicateurDictionnaireForm: {},
typeIndicateurs: {},
detectedTypeIndicateur: '',
loadIndicateur() {
$('#overlay').fadeIn();
fetch('<%= request.getContextPath() %>/mesures.load.action')
.then(response => response.json())
.then(data => {
this.indicateurs = data;
$('#overlay').fadeOut();
})
.catch(error => {
});
},
deleteIndicateur(id) {
$.ajax({
type: "DELETE",
url: "<%= request.getContextPath() %>/mesures.delete.action?indicateurDictionnaireId=" + id,
}).then(() => this.loadIndicateur());
},
postForm() {
return {
submitData() {
$.ajax({
type: "POST",
url: "<%= request.getContextPath() %>/mesures.save.action",
data: JSON.stringify(this.indicateurDictionnaireForm),
dataType: "JSON",
contentType: "application/json; charset=utf-8",
}).then(() => {
this.loadIndicateur();
this.resetForm();
$('#modalIndicateur').modal('hide');
})
},
}
},
editIndicateur(id) {
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.load.type-indicateur.action"
}).then(data => {
this.typeIndicateurs = data;
}).then(
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.edit.action?indicateurDictionnaireId=" + id,
}).then(data => {
this.indicateurDictionnaireForm = data;
this.detectedTypeIndicateur = data.typeIndicateur.code;
this.loadIndicateur();
$('#modalIndicateur').modal('show');
})
);
},
resetForm() {
this.indicateurDictionnaireForm = {};
}
}))
})
</script>
the modal code:
<div class="modal" tabindex="-1" role="dialog" id="modalIndicateur">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><s:text name="indicateur.ce.add"/></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<%= request.getContextPath() %>/save.action"
method="POST"
class="w-64 mx-auto" x-data="postForm()" #submit.prevent="submitData">
<div class="form-group" style="padding-left: 15px; padding-bottom: 5px">
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="libelle_fr">
<s:text name="indicateur.ce.libelle_fr"/></label>
<div class="col-md-8">
<input id="libelle_fr" type="text"
name="indicateurDictionnaireForm.libelleFr"
class="form-control input-sm"
x-model="indicateurDictionnaireForm.libelleFr">
</div>
</div>
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="libelle_nl">
<s:text
name="indicateur.ce.libelle_nl"/></label>
<div class="col-md-8">
<input id="libelle_nl" type="text"
name="indicateurDictionnaireForm.libelleNl"
class="form-control input-sm"
x-model="indicateurDictionnaireForm.libelleNl">
</div>
</div>
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="code">
<s:text name="indicateur.ce.code"/></label>
<div class="col-md-8">
<input id="code" type="text"
name="indicateurDictionnaireForm.typeIndicateurCode"
class="form-control input-sm"
x-model="indicateurDictionnaireForm.code">
</div>
</div>
<div class="row">
<label class="control-label col-md-2" style="text-align: left"
for="code">
<s:text name="indicateur.ce.code"/></label>
<div class="col-md-4">
<div class="flex flex-col w-full md:w-2/3">
<select x-model="indicateurDictionnaireForm.typeIndicateurCode"
class="form-control input-sm">
<template x-for="option in typeIndicateurs" x-effect="console.log(detectedTypeIndicateur)">
<option :key="option.code"
:value="option.code"
selected="option.code === detectedTypeIndicateur"
x-effect="console.log('code:', option.code, ' type: ', detectedTypeIndicateur)"
x-text="option.libellefr"></option>
</template>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
#click="resetForm()">
<s:text name="common.button.quitter"/>
</button>
<button type="submit" class="btn btn-primary">
<s:text name="common.button.save"/>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
With the x-effect tag, I tried to log the value of the the detected item to be selected in the select tag and the value itself.
this is the console output when the modal is open:
// first loop
<empty string>
code: RESULTAT type: <empty string>
code: INCIDENCE type: <empty string>
code: REALISATION type: <empty string>
// second loop
REALISATION
code: RESULTAT type: REALISATION
code: INCIDENCE type: REALISATION
code: REALISATION type: REALISATION
In the first loop I see the value from my function editIndicateur() is empty so I assume, alpine.s tries to render the modal before the call back and then do a second loop.
Have you an idea why the modal is populate before the value is return by the function and also why it loops a second time?
Thanks for your help
You bind the select element to the indicateurDictionnaireForm.typeIndicateurCode variable and its options to the typeIndicateurs variable (via loopig over it).
So when you call the editIndicateur method:
First you load only the select options via AJAX call and pass it to Alpine.js by this.typeIndicateurs = data.
Alpine detects that you changed typeIndicateurs and renders the template. This is the first loop. However neither indicateurDictionnaireForm or detectedTypeIndicateur have been set at this point, therefore these will be empty.
After that you make a new AJAX call, where you load additional form data and set indicateurDictionnaireForm and detectedTypeIndicateur variables.
Alpine.js detects that you changed two additional variables and renders the template again. This is the second loop.
This is normal behavior if you have two separate AJAX calls because the changes wont be in the same update queue. To fix this issue, you should create a local (non-reactive) variable inside editIndicateur function, then store the options's array in this variable at the first AJAX call. Then at the second AJAX call you set all 3 Alpine.js reactive variables together, therefore the changes will be in the same update queue, so Alpine.js renders the template only once.
editIndicateur(id) {
let indicators;
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.load.type-indicateur.action"
}).then(data => {
indicators = data;
}).then(
$.ajax({
type: "GET",
url: "<%= request.getContextPath() %>/mesures.edit.action?indicateurDictionnaireId=" + id,
}).then(data => {
this.indicateurDictionnaireForm = data;
this.detectedTypeIndicateur = data.typeIndicateur.code;
this.typeIndicateurs = indicators;
this.loadIndicateur();
$('#modalIndicateur').modal('show');
})
);
},
Related
I am trying to save a ViewModel object from a partial view in a modal, and I get a 404 error when I try to post it. The url is being called, but the ViewModel data isn't being sent. I have been reading similar questions on here and on MSN for hours and nothing I've tried fixes the problem. I took out the repetitive days of the week code for brevity, but I can
add them back in if anyone wants a complete working example. Here is the code
EmployeeViewModel
public class EmployeeViewModel
{
public bool Monday { get; set; } = false;
//...bool properties for Tuesday through Sunday
public Employee Employee { get; set; }
}
Employee/ _AddEmployeeModalPartial
#model JSarad_C868_Capstone.ViewModels.EmployeeViewModel
#Html.AntiForgeryToken()
<div class="modal modal-fade" id="addEmployee">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addEmpoyeeLabel">Add Employee</h4>
<button type=button class="close" data-bs-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form action="Add">
<div class="form-group">
<input asp-for="Employee.Id" class="form-control" />
<input asp-for="Employee.Availability" class="form-control" />
<label asp-for="Employee.Role"></label>
<select asp-for="Employee.Role" class="form-control">
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
</select>
<span asp-validation-for="Employee.Role" class="text-danger"></span>
</div>
#*<div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Name"></label>
<input asp-for="Employee.Name" class="form-control" />
<span asp-validation-for="Employee.Name" class="text-danger"></span>
</div>
#* <div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Phone"></label>
<input asp-for="Employee.Phone" class="form-control" />
<span asp-validation-for="Employee.Phone" class="text-danger">
</span>
</div>
#*<div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Email"></label>
<input asp-for="Employee.Email" class="form-control" />
<span asp-validation-for="Employee.Email" class="text-danger">
</span>
</div>
#*<div class="mb-3">*#
<div class="form-group">
<label asp-for="Employee.Address"></label>
<input asp-for="Employee.Address" class="form-control" />
<span asp-validation-for="Employee.Address" class="text-danger">
</span>
</div>
#* <div class="mb-3">*#
<div class="form-group">
<label>Availabiliy</label>
</div>
<div class="row pb-4">
<div class="col">
<div class="form-check">
<input asp-for="Monday" class="form-check-input"
type="checkbox" />
<label asp-for="Monday" class="form-check-label"></label>
</div>
<!--...//form check boxes for Tuesday trough Sunday -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
data-bs-save="modal">Save</button>
</div>
</div>
</div>
</div>
EmployeeController.cs
[HttpGet]
public IActionResult Add()
{
EmployeeViewModel viewModel = new EmployeeViewModel();
return PartialView("_AddEmployeeModalPartial", viewModel); ;
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Add(EmployeeViewModel viewModel) //code never reaches this Action
{
viewModel.Employee.Availability = ConvertDaysToChar(viewModel.Employee.Availability)
if (ModelState.IsValid)
{
_db.Employees.Add(viewModel.Employee);
_db.SaveChanges();
return RedirectToAction("Index");
}
else
{
return PartialView("_AddEmployeeModelPartial", viewModel);
}
}
site.js
$(function () {
var PlaceHolderElement = $('#PlaceHolderHere');
$('button[data-bs-toggle="ajax-modal"]').click(function (event) {
/* event.preventDefault();*/
var url = $(this).data('url');
console.log(url)
$.get(url).done(function (data) {
PlaceHolderElement.html(data);
PlaceHolderElement.find('.modal').modal('show');
})
})
PlaceHolderElement.on('click', '[data-bs-save="modal"]', function (event) {
event.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
console.log(actionUrl);
var sendViewModel = form.serialize();
console.log(sendViewModel);
//$.post(actionUrl, sendViewModel).done(function (data) {
// PlaceHolderElement.find('.modal').modal('hide');
/*above is the code from a tutorial for modals. It also doesn't send the object to
post action*/
$.ajax({
type: 'POST',
url: actionUrl,
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(sendViewModel),
success: function (result) {
console.log('Data received: ');
console.log(result);
}
})
})
})
When I click the save button on the model, the console.log(sendViewModel) returns the correct Serialization with all of the properties and their correct names. And the properties change correctly when there is input.
Employee.Id=&Employee.Availability=&Employee.Role=Bartender&Employee.Name=&Employee.Phone=&Employee.Email=&Employee.Address=&Monday=false&Tuesday=false&Wednesday=false&Thursday=false&Friday=false&Saturday=false&Sunday=false
But I get an error "Failed to load resource: the server responded with a status of 404 ()"
and when I check it the page says "No webpage was found for the web address: https://localhost:44313/Add HTTP ERROR 404" as if it's trying to get a post. It is also missing the controller, but if I change my form action to "Employee/Add" in the _Partial view it still doesn't send the data along with the url, which is causing an entirely different problem. I would greatly appreciate any help or guess or input of any kind. I'm about five seconds away from throwing my laptop out the window on this one. Thanks.
1.Remove the #Html.AntiForgeryToken() inside your form,like below:
<form action="Add" >
#Html.AntiForgeryToken()
....
Then after you serialize the form you can get the AntiForgeryToken, like below:
Because when you don't add #Html.AntiForgeryToken()inside form, after you serialize the form you don't get the AntiForgeryToken, like below:
Besides, if you use <form asp-action="Add" > In ASP.Net Core anti forgery token is automatically added to forms, so you don't need to add #Html.AntiForgeryToken(),you can find in the below :
2.change your ajax like below:
$.ajax({
type: 'POST',
url:'/Employee/Add',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: sendViewModel,
success: function (result) {
console.log('Data received: ');
console.log(result);
}
})
result:
First, I had to change the form action from "Add" to "Employee/Add". ThenI had to remove the antiforgery token from my post action. The first code that is commented out actually works fine otherwise. In my defense I did remove the antiforgery token when I had the wrong URL, but I forgot to retest that when I had the correct one.
I create one form which includes select2 control.and i have data in database.
Now I want to fetch value of particular data value into select2 control when edit the form. My selected select value is store in one variable Now i want that value dispaly in select2 control inside the edit form and i dont know how ..
here is my edit form code:
<div id="editm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Rayon</h4>
</div>
<div class="modal-body">
<form id="validate1" method="POST">
<div class="form-group">
<label class="control-label">Kode Rayon</label>
<div>
<input type="text" class="form-control" id="edit_Kode_rayon" name="edit_Kode_rayon" placeholder="Kode Rayon" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Rayon</label>
<div>
<input type="text" class="form-control" id="edit_nama_rayon" name="edit_nama_rayon" placeholder="Nama Center" >
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Region</label>
<div>
<!-- HERE IS THE SELECT2 THAT IM TALKING ABOUT.. -->
<select class="form-control kode_region" id="nRegionE" name="kode_region" style="width: 100%;">
<option value=""></option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
here is jquery code for edit button:
$(document).on("click", "#edit", function(e){
e.preventDefault();
var editid = $(this).attr("value");
$.ajax({
url: "<?php echo base_url();?>Rayon/editdata",
type: "POST",
dataType: "json",
data:{editid: editid},
success: function(data){
if(data.responce == "success"){
$('#editm').modal('show');
$("#edit_Kode_rayon").val(data.posts.kode_rayon);
$("#edit_nama_rayon").val(data.posts.nama_rayon);
//$("#nRegionE").val(data.posts.kode_region);<-- I TRIED LIKE THIS .. NOT WORK -->
//$("#nRegionE").select2().select2('val',data.posts.kode_region);<-- I TRIED LIKE THIS . NOT WORK-->
$('#nRegionE').val(data.posts.kode_region).trigger("change");<-- EVEN THIS ONE IS NOT WORK -->
}else{
toastr["error"](data.message);}
}
});
});
and here is my Select2 script that im using it for inssert and my edit form:
$(function () {$('.kode_region').select2({
//placeholder: "Please select region",allowClear: true,
ajax: {
dataType: 'json',
url: '<?=site_url('Bonus/nregion')?>',
type: "post",
delay: 250,
data: function(params) {
return {search: params.term}},
processResults: function (data, page) {
return {results: data};
},
}
})});
just to make it clear i took a screenshot of my edit form:
all what i want is to fetch the value of data into select2 form control of Edit Form .. can anyone help me to do that ? n i'll be so thankful.
You are fetching options list correctly in data.posts.kode_region,
then update this line
$("#nRegionE").val(data.posts.kode_region);
to this
$("#nRegionE").html('<option value = "'+data.posts.kode_region+'" selected >'+data.posts.kode_region+'</option>');
and don't forget to comment this line
$('#nRegionE').val(data.posts.kode_region).trigger("change");
I am dam sure this will work for you
$("select#nRegionE option").val("hello"); //Change hello string to your record Id
$("select#nRegionE option").html(data.posts.kode_region);
I'm trying to save a data using ajax
this is my global function for api's, I'm using this global function even in show of data to table.
ajax = (action, data, method, callback) => {
return $.ajax({
type: method,
// url: `https://dev2.bliimo.net/${action}`,
url: `http://localhost:8080/${action}`,
contentType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", `Bearer ${gon.global.currentUser.access_token}`);
},
data: { data: data },
async: !1,
cache: false,
error: e => {
console.log(e.responseText);
console.log("Error occured");
}
});
};
when i click the "add new catalog" button, the modal appears,
inside the modal there is a form
Now, this is the form:
<form id="add-new-catalog-form" class="uk-form-stacked" method="post">
<div class="uk-grid uk-margin-remove uk-padding-remove uk-width-1-1">
<div class="uk-width-1-3 uk-padding-remove">
<div>
<div class="uk-margin">
<label class="uk-form-label uk-text-bold" for="add-catalog-name">Catalog Name</label>
<div class="uk-form-controls">
<input class="uk-input uk-form-width-medium category-input" id="add-catalog-name" type="text" autocapitalize="words" placeholder="Catalog Name" />
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label uk-text-bold" for="iconimg-output">Icon Image</label>
<%= image_tag('', id: 'iconimg-output')%>
<div class="js-upload" uk-form-custom>
<button class="uk-button uk-button-default upload-cloudinary-icon" type="button" tabindex="-1">UPLOAD</button>
</div>
</div>
</div>
</div>
<div class="uk-width-2-3 uk-margin-remove uk-padding-remove">
<div class="uk-grid uk-width-1-1 uk-margin-remove uk-padding-remove">
<div class="uk-width-1-2 uk-margin-remove uk-padding-remove">
<label class="uk-form-label uk-text-bold" for="landingpageimg-output">Landing Page Image</label>
<%= image_tag('', id: 'landingpageimg-output')%>
<div class="js-upload" uk-form-custom>
<button class="uk-button uk-button-default upload-cloudinary-landing" type="button" tabindex="-1">UPLOAD</button>
</div>
</div>
<div class="uk-width-1-2 uk-margin-remove uk-padding-remove">
<label class="uk-form-label uk-text-bold" for="categorypageimg-output">Catalog Cover Image</label>
<%= image_tag('', id: 'categorypageimg-output')%>
<div class="js-upload" uk-form-custom>
<button class="uk-button uk-button-default upload-cloudinary-category" type="button" tabindex="-1">UPLOAD</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type='submit'>Save</button>
</div>
</form>
when I click the save button in the modal, it will run this function
This is my submit function:
$('#add-new-catalog-form').on('submit', e => {
let catalog_name = $('#add-catalog-name').val();
let catalog_icon = $("#iconimg-output").attr('src');
let catalog_landing_image = $('#landingpageimg-output').attr('src');
let catalog_cover_image = $('#categorypageimg-output').attr('src');
let data = `name=${catalog_name}&thumbnail=${catalog_icon}&landingPageImage=${catalog_landing_image}&coverImage=${catalog_cover_image}`;
ajax("api/catalogs", `${data}`, "POST");
});
it says "Invalid mime type \"json\": does not contain '/'","code":500"
how to solve this?
dataType and contentType are not the same:
dataType: "json",
contentType: "application/json; charset=utf-8",
...
Done!
$('#add-new-catalog-form').on('submit', e => {
e.preventDefault();
let catalog_name = $('#add-catalog-name').val();
let catalog_icon = $("#iconimg-output").attr('src');
let catalog_landing_image = $('#landingpageimg-output').attr('src');
let catalog_cover_image = $('#categorypageimg-output').attr('src');
let data = { "name": catalog_name, "thumbnail": catalog_icon, "landingPageImage": catalog_landing_image, "coverImage": catalog_cover_image };
ajax("api/catalogs", JSON.stringify(data), "POST");
window.location.replace("/catalog");
});
I am trying to edit user data but when I click on user id, radio button is not selected as per it's value.
result.IsActive returns true or false.
I also try to set result.IsActive(true) by default in ajax response but it does't work.
Where I am going wrong?
Thanks in Advance
var self = this;
self.DealerId = ko.observable();
self.DealerName = ko.observable();
self.Gender = ko.observable();
self.Dealers = ko.observableArray(vm.Dealers());
$.ajax({
url: '#Url.Action("EditDealer", "Dealer")',
cache: false,
type: 'GET',
contentType: 'application/json',
data: { 'id': id },
success: function (result) {
self.DealerId(result.DealerId);
self.DealerName(result.DealerName);
self.IsActive = ko.observable(result.IsActive);
$('#basic').modal('show');
}
});
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:#4d90fe;padding-top:10px;padding-bottom:10px">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" style="color:white">Update Dealer Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Dealer Name</label>
<div class="col-md-9">
<input class="form-control" data-bind="value:DealerName" required="required"
data-parsley-required-message="Dealer name is required"></input>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Dealer Status</label>
<div class="col-md-9">
<label style="padding-left:0"><input type="radio" name="status" value="true" data-bind="checked: IsActive">Active</label>
<label ><input type="radio" name="status" value="false" data-bind="checked: IsActive">Inactive</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="margin-top:0;padding-top:10px;padding-bottom:10px">
<button type="button" id="cancelSave" class="btn default" data-dismiss="modal" >Cancel</button>
<button type="button" id="save" class="btn blue">Save</button>
</div>
</div>
</div>
</div>
It seems, like you are initializing the property self.IsActive of your ko-viewmodel in ajax-success callback. That means, that your observable IsActive property will be created only when ajax is completed. But ajax call is asynchronous. So, if you are binding the viewmodel without the instantiated self.IsActive property you will got an error from ko. (check the browsers console). Its not a good way to make ajax-calls in viewmodel constructor.
Try to declare the property before the ajax like this:
var self = this;
self.DealerId = ko.observable();
self.DealerName = ko.observable();
self.Gender = ko.observable();
self.Dealers = ko.observableArray(vm.Dealers());
self.IsActive = ko.observable(false);
$.ajax({
url: '#Url.Action("EditDealer", "Dealer")',
cache: false,
type: 'GET',
contentType: 'application/json',
data: { 'id': id },
success: function (result) {
self.DealerId(result.DealerId);
self.DealerName(result.DealerName);
self.IsActive(result.IsActive);
$('#basic').modal('show');
}
});
In this case your radio will have default checked-value (be inactive), until the ajax completes. Right after ajax completes it will become the correct value. The best way to avoid this temporally data-inconsistence, is to load all the data before the viewmodel is created and pass all ajax-data as constructor argument. This approach grants, that ko-viewmodel will have actual data in the moment of binding. (something like this:
$.ajax({
url: '#Url.Action("EditDealer", "Dealer")',
cache: false,
type: 'GET',
contentType: 'application/json',
data: { 'id': id },
success: function (result) {
//create your viewmodel inside the ajax-succcess and
//populate it with data
var myViewModel = new MyViewModel(result);
//and apply ko-binding here, after creating the viemodel
$('#basic').modal('show');
}
});
function MyViewModel(ajaxData){
var self = this;
self.DealerId = ko.observable(ajaxData.DealerId);
self.DealerName = ko.observable(ajaxData.DealerId);
self.Gender = ko.observable(ajaxData.DealerName);
self.IsActive = ko.observable(ajaxData.IsActive);
self.Dealers = ko.observableArray(vm.Dealers());
}
You need to assign equal name to both your <input type="radio"> to let the browser understand that they are related.
I have a modal this simple modal:
<div id="mod-quicksend" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<h4>Selecciona un correo electronico: </h4>
<div class="row">
<form id="modal-form-close" method="post">
<input type="text" hidden value="quicksendquote" name="type">
<input type="text" hidden value="{{ $quote->id }}" name="id">
<div class="form-horizontal">
<div class="col-sm-12 col-sm-offset-4">
<div class="input-group">
<select class="form-control" name="email[select]">
<option></option>
#foreach($quote->Customer->Contacts as $key)
<option value="{{ $key->email }}">{{$key->email}}</option>
#endforeach
</select>
</div>
</div>
<h2>ó</h2>
<h3>digita un correo electronico:</h3>
<div class="row">
<div class="form-horizontal">
<div class="col-sm-12 col-sm-offset-4">
<div class="input-group">
<input type="text" name="email[type]" class="form-control" id="getEmail" autocomplete="off" >
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Cerrar</button>
<button type="button" id="submit" data-dismiss="modal" class="btn btn-success">Aceptar</button>
</div>
</div><!-- /.modal-content-->
</div><!-- /.modal-dialog-->
</div><!-- /.modal-end-->
and this is the Js code:
$('#getEmail').autocomplete({
source: function (request, response) {
$.ajax({
url: '{{ URL::to('/ajax') }}',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'getEmail'
},
success: function (data) {
response($.map(data, function (item) {
var code = item.split("|");
return {
label: "this is a label",
value: code[0],
data: item
}
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function (event, ui) {
var names = ui.item.data.split("|");
$(this).val(names[0]);
}
});
My problem is that when start typing in the input box the label doesnt show inside the modal, I can see on firebug that the ajax request is successful and if I place the input box outside the modal the label displays fine, I even hard-coded "this is label" to test and still no dice.
Any ideas?
UPDATE:
I believe the label is showing below the modal box, see this example:
https://jsfiddle.net/5qewtgcr/ NOTE::::: You have to click run on jsfiddle for the label to show below the modal box, why? I dont know, maybe jsfiddle is having problems or my its just my browser.
Finally found the answer:
.ui-autocomplete
{
z-index: 99999; //Maximum and top of everything (not absolutely :| )
}
Got it from: JQuery UI autocomplete for content in bootstrap modal
jsfiddle: https://jsfiddle.net/5qewtgcr/2/
I have update your fiddle. Here is the updated fiddle , please check it https://jsfiddle.net/5qewtgcr/1/
I have add html class in autocomplete div tag : Here is jQuery code :
$('#getEmail').autocomplete({
source: function(request, response) {
$.ajax({
url: 'echo',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'getEmail'
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return $(document).find('.input-group-text').append("this is a label" +item + code[0]);
/*{
label: "this is a labelxysxysyxsyxsyxysxysxysyxsyxysxysyxsyxysxysyxsyxysyxysxysyxsyxysxysyxsyxy",
value: code[0],
data: item
}*/
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function(event, ui) {
var names = ui.item.data.split("|");
$(this).val(names[0]);
}
});