What causes a partial view to not run controller actions - asp.net-core-mvc

I have no idea what happened but suddenly the CRUD operations in my simple app no longer work. Clicking on the create button in my partial view, instead of running the controller create action, now looks for a create page instead. Not really sure what would cause this all I did was sleep.
Index
<div class="row">
<div class="col-lg-12">
<div class="card-title">
<h1>Clients</h1>
<div id="showmodal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
#{
#await Html.PartialAsync("_CreateClient");
}
</div>
</div>
</div>
<button class="btn btn-success" id='open' data-toggle="modal" data-target="#showmodal">Add New Client</button>
</div>
</div>
</div>
Partial View
#model Rabbit.Application.Models.Onboarding.Client
<div class="modal-header">
<h5 class="modal-title">Add Client Overview Record</h5>
<button type="button" id='close' class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="#Url.Action("Create", "Client")">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label asp-for="CompanyName" class="control-label"></label>
<input asp-for="CompanyName" class="form-control" />
<span asp-validation-for="CompanyName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="PhoneNo" class="control-label"></label>
<input asp-for="PhoneNo" class="form-control" />
<span asp-validation-for="PhoneNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ContactPerson" class="control-label"></label>
<input asp-for="ContactPerson" class="form-control" />
<span asp-validation-for="ContactPerson" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="SuiteNo" class="control-label"></label>
<input asp-for="SuiteNo" class="form-control" />
<span asp-validation-for="SuiteNo" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="State" class="control-label"></label>
<input asp-for="State" class="form-control" />
<span asp-validation-for="State" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ZipCode" class="control-label"></label>
<input asp-for="ZipCode" class="form-control" />
<span asp-validation-for="ZipCode" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" onclick="return processData()" value="Create" class="btn btn-primary" />
#* <input type="submit" value="Create" class="btn btn-primary" style="float: right;"/>*#
</div>
</div>
</div>
</div>
</div>
</form>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function () {
});
</script>
}
Controller
public IActionResult Create()
{
return View();
}
// POST: Onboarding/Client/Create
// To protect from overposting attacks, enable the specific properties you want to bind to.
// For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("VID,CompanyName,PhoneNo,ContactPerson,Email,Address,SuiteNo,City,State,ZipCode")] Client client)
{
_context.Add(client);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
return View(client);
}

Related

How to insert a selected dropdownlist text into database in laravel

I want to insert buyer name from dropdown list into database. how can I select my dropdown selected text and save it into database table. I have a dropdown field and some text field to insert data into my database table.
Here is my controller:
function GetBuyerList(){
$buyerList=BuyerModel::all();//get data from table
// $buyerList=BuyerModel::lists('buyer_name','id');
//return $buyer_name;
return view('order',compact('buyerList'));//send data to view
}
function CreateOrder(Request $request){
$user_id= $request->input('user_id');
$buyer_name= $request->input('buyer_name');
$style_name= $request->input('style_name');
$season= $request->input('season');
$brand_name= $request->input('brand_name');
$garmments_type= $request->input('garmments_type');
$order_quantity= $request->input('order_quantity');
$fob= $request->input('fob');
$total_fob= $request->input('total_fob');
$merchandiser_name= $request->input('merchandiser_name');
$order_no= $request->input('order_no');
$order_date= $request->input('order_date');
$status= $request->input('status');
$input_date= $request->input('input_date');
$note= $request->input('note');
$result=OrderModel::insert([
'user_id'=>$user_id,
'buyer_name'=>$buyer_name,
'style_name'=>$style_name,
'season'=>$season,
'brand_name'=>$brand_name,
'garmments_type'=>$garmments_type,
'order_quantity'=>$order_quantity,
'fob'=>$fob,
'total_fob'=>$total_fob,
'merchandiser_name'=>$merchandiser_name,
'order_no'=>$order_no,
'order_date'=>$order_date,
'status'=>$status,
'input_date'=>$input_date,
'note'=>$note,
]);
return view('order');
}
Here is my blade code
#extends('Layout.app')
#section('content')
<br><br><br><br>
<div class="orderDiv container col-8">
<div class="d-flex justify-content-center align-items-center my-10 ">
<div class="card full-width">
<div class="card-header">
<h3>Orders</h3>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Buyer Name</label>
</div>
<div class="col-md-4">
<select class="buyerselect form-control full-width" id="buyerSelectId" name="buyer" required="">
<option value="0" disabled="true" selected="true">-Select Buyer-</option>
#foreach($buyerList as $buyer)
<option value="{{$buyer->id}}">{{$buyer->buyer_name}}</option>
#endforeach
{{-- <option selected value="">Select Buyer</option>--}}
{{-- <option value='564'>564</option>--}}
</select>
{{-- {!! Form::select('id',$buyerList,null,['class'=>'form-control']) !!}--}}
</div>
<div class="col-md-4">
<button id="buyerModalBtnId" type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#addBuyerModal"><i class="fas fa-plus"></i>
Add New Buyer
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Style#</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Season</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Brand</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Garments Type</label>
</div>
<div class="col-md-4">
<select class="form-control select2" name="garmentstype" style="width: 75%;" required="">
<option selected value="">Select Garments</option>
<option value='Baby Jacket'>Baby Jacket</option>
</select>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"><i class="fas fa-plus"></i>
Add Germants Type
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Company Name</label>
</div>
<div class="col-md-4">
<select class="form-control full-width" name="buyer" required="">
<option selected value="">Select Company</option>
<option value='564'>Friend's Knittings</option>
<option value='Benetton'>Debonair Ltd</option>
<option value='HM'>Orbitex Knitting</option>
<option value='CA'>DPQSL</option>
</select>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Order Qty</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">FOB</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Concern Merchandiser</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-2">
<div class="col-md-2">
<label for="category" class=" control-label">orderDate</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">OrderNo</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-12">
<center>
<button type="submit" class="btn btn-success">Submit</button>
</center>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- modal 1 -->
<div class="modal fade" id="addBuyerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Buyer</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div id="addBuyerInformationId" class="form-group">
<label for="tstock" class="col-sm-2 control-label">Buyer Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addBuyerNameId" name="garmentstype" placeholder="Input Buyer Name">
</div><br>
<label for="tstock" class="col-sm-2 control-label">Buyer Country</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addBuyerCountryId" name="garmentstype" placeholder="Input Buyer Country">
</div>
<br>
</div><br>
<br>
<label for="tstock" class="col-sm-2 control-label">User Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addBuyerUserId" name="garmentstype" placeholder="Input User Id">
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button id="buyerAddConfirmButton" type="button" class="btn btn-primary" >Save changes</button>
</div>
<!-- modal2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create Garments Type</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="tstock" class="col-sm-2 control-label">Select</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="garmentstype" name="garmentstype" placeholder="Garments Type">
</div>
<br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End your project here-->
#endsection
I already insert data into buyer table
My custom.js file
$(document).ready(function () {
$('#VisitorDt').DataTable();
$('.dataTables_length').addClass('bs-select');
});
$('#buyerModalBtnId').click(function() {
$('#addBuyerModal').modal('show');
});
$('#buyerAddConfirmButton').click(function() {
// var id=$(this).data('id');
var name = $('#addBuyerNameId').val();
var country = $('#addBuyerCountryId').val();
var user=$('#addBuyerUserId').val();
BuyerAdd(name, country,user);
});
function BuyerAdd(buyerName, buyerCountry,buyerUserId) {
if (buyerName.length == 0) {
toastr.error('Buyer Name is Empty !');
} else if (buyerCountry.length == 0) {
toastr.error('Buyer Description is Empty !');
}
else if (buyerUserId.length == 0) {
toastr.error('Buyer User Id is Empty !');
}
else {
$('#buyerAddConfirmButton').html("<div class='spinner-border spinner-border-sm' role='status'></div>"); ///Animation Set
axios.post('/BuyerAdd', {
name: buyerName,
country: buyerCountry,
user_id:buyerUserId,
})
.then(function(response) {
$('#buyerAddConfirmButton').html("Add");
if (response.status == 200) {
if (response.data == 1) {
// alert('Success');
$('#addBuyerModal').modal('hide');
toastr.success('Add Successfull');
$('#buyerAddConfirmButton').addClass('data-mdb-dismiss');
//getServicesData();
} else {
// alert('Failed');
$('#addBuyerModal').modal('hide');
toastr.error('Add Failed !!');
//getServicesData();
}
} else {
$('#addBuyerModal').modal('hide');
toastr.error('Something Went Wrong');
}
})
.catch(function(error) {
$('#addBuyerModal').modal('hide');
toastr.error('Something Went Wrong');
});
}
}
// Order Data Part
Regardless of some formatting errors and codestyle, here is the short workflow for your question:
validate requested data
instead of insert, use OderModel::create($request->input())
make the fields in your Order Model fillable
if you still need to edit the request data, create a new array and then give it to the create method with (OrderModel::create($newModifiedRequestedData);)
Frontend/view is clear?
The request name which you are using in controller for buyer as buyer_name it should be same as select tag in name with buyer_name.
Replace you blade file with below code and check*
#extends('Layout.app')
#section('content')
<br><br><br><br>
<div class="orderDiv container col-8">
<div class="d-flex justify-content-center align-items-center my-10 ">
<div class="card full-width">
<div class="card-header">
<h3>Orders</h3>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Buyer Name</label>
</div>
<div class="col-md-4">
<select class="buyerselect form-control full-width" id="buyerSelectId" name="buyer_name" required="">
<option value="0" disabled="true" selected="true">-Select Buyer-</option>
#foreach($buyerList as $buyer)
<option value="{{$buyer->id}}">{{$buyer->buyer_name}}</option>
#endforeach
{{-- <option selected value="">Select Buyer</option>--}}
{{-- <option value='564'>564</option>--}}
</select>
{{-- {!! Form::select('id',$buyerList,null,['class'=>'form-control']) !!}--}}
</div>
<div class="col-md-4">
<button id="buyerModalBtnId" type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#addBuyerModal"><i class="fas fa-plus"></i>
Add New Buyer
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Style#</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Season</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Brand</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Garments Type</label>
</div>
<div class="col-md-4">
<select class="form-control select2" name="garmentstype" style="width: 75%;" required="">
<option selected value="">Select Garments</option>
<option value='Baby Jacket'>Baby Jacket</option>
</select>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"><i class="fas fa-plus"></i>
Add Germants Type
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Company Name</label>
</div>
<div class="col-md-4">
<select class="form-control full-width" name="buyer" required="">
<option selected value="">Select Company</option>
<option value='564'>Friend's Knittings</option>
<option value='Benetton'>Debonair Ltd</option>
<option value='HM'>Orbitex Knitting</option>
<option value='CA'>DPQSL</option>
</select>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Order Qty</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">FOB</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Concern Merchandiser</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-2">
<div class="col-md-2">
<label for="category" class=" control-label">orderDate</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">OrderNo</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-12">
<center>
<button type="submit" class="btn btn-success">Submit</button>
</center>
</div>
</div>
</div>
</form>

Populate form's data in modal with fragment thymeleaf

I'm using Spring boot and Thymeleaf.I have a modal form to create/edit information:
<div class="modal" id="myModal" th:fragment="content">
<form th:object="${object}">
<div class="modal-dialog">
<div class="modal-content">
<!– Modal Header –>
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">×</button>
</div>
</div>
<!– Modal body –>
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>
</div>
<!– Modal footer –>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
I can't place inside my index.html because the Object is null. When user click button to crate/edit user, the modal will pop-up with data.
The button is:
<button type="button" class="btn btn-success" onclick="triggerModal(null)">Create New</button>
My Jquery function:
function triggerModal(id) {
if(id==null){
var url = "/create";
}else{
var url = "/create/{"+id+"}";
}
$('#content').load(url);
$('#myModal').modal({show:true});
}
The controller:
#GetMapping(value = {"/create","/create/{id}"})
public String createObject(Model theModel, #PathVariable(required = false)String id){
if(id!=null){
Optional<Object> object= objectRepository.findById(id);
if(object.isPresent()){
theModel.addAttribute("Object", object.get());
return "/form-modal::content";
}
}
theModel.addAttribute("Object", new Object());
return "/form-modal::content";
}
This is the div tag I place on the index.html
<div id="content"></div>
I have successfully insert modal to HTML body with data loaded but the modal is not displayed correctly.
I have solved it.
Just place the th:fragment inside the modal class:
<div >
<form th:object="${object}" th:fragment="content">
<div class="modal-dialog">
<div class="modal-content">
<!– Modal Header –>
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">×</button>
</div>
</div>
<!– Modal body –>
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>
</div>
<!– Modal footer –>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
And change the div tag in the index file:
<div class="modal" id="myModal"></div>

Showing the ajax-data in bootstrap

I have this code for viewing all the gathered data from database using ajax which is working but only when I use input tags read-only. Is there any way to show data like in Table (which i really want).
The view.blade
<div id="viewInfo" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="color: green;">
<h5 class="modal-title" id=""><strong>Full Details</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color: white;" >×</span>
</button>
</div>
<div class="modal-body" style="font-size: 10px;" >
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="name2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email/Username</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="email2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="address2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Phone Number</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="phone_number2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Household Type</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="type2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Active Status </label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="active_status2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Password </label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="password2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Transactions </label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The Script
$('.view_data').click(function(){
event.preventDefault();
var household_id = $(this).attr("id");
$.ajax({
url:"{{ route('householdInfo') }}",
method:"get",
data:{household_id:household_id},
dataType:"json",
success:function(data){
$('#name2').val(data.firstname);
$('#address2').val(data.address);
$('#phone_number2').val(data.phone_number);
$('#type2').val(data.type);
$('#email2').val(data.email);
$('#active_status2').val(data.active_status);
$('#password2').val(data.password);
$('#viewInfo2').appendTo('body').modal('show');
console.log(data);
}
});
});
I'd like to do it not using input tags in readonly. A very much thank you for anyone who could help me about this.
Make change to your blade file
<table>
<thead>
<tr>
<th>Sr no</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You just need to change the success function of the ajax
success: function(data) {
$.each(data.results, function(index,val){
$("tbody").append("<tr><td>"index+"</td><td>"+val.country+"</td></tr>");
});
},

How can I return a html view from an ajax call in Laravel 5.1?

I am trying to render an html view via ajax call and in success callback i will add this html to DOM.But i am not getting any response in the success callback.
public function create()
{
$format = new ProductFormat();
//return response()->view('cms.formats.create_modal', compact('format'));
return (String) view('cms.formats.create_modal', compact('format'));
}
$.ajax({
dataType: 'json',
method: 'GET',
type: 'html',
url: '{{ url("admin/formats/create") }}',
success: function (data) {
alert(data);
console.log(data);
$('#format_modal').html(data);
$('#add_edit_format_modal').modal('show');
}
}).error(function(e){
console.log(e);
});
error callback is getting the html response but why not in success call back?
my response is:
<div class="modal fade" id="add_edit_format_modal" tabIndex="-1">
<div class="modal-dialog">
<div class="modal-content"> <!--start modal content-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Product Format</h4>
</div>
<!--start modal body-->
<div class="modal-body">
<div class="form-horizontal" role="form" id="add_format">
<div class="form-group">
<label for="format_title_en" class="col-md-3 control-label">Title (en)</label
>
<div class="col-md-6">
<input id="format_title_en" value="" name="format_title_en" class="form-control"
type="text" required="required">
</div>
</div>
<div class="form-group">
<label for="format_title_fr" class="col-md-3 control-label">Title (fr)</label
>
<div class="col-md-6">
<input id="format_title_fr" value="" name="format_title_fr" class="form-control"
type="text">
</div>
</div>
<div class="form-group">
<label for="barcode" class="col-md-3 control-label">Barcode</label>
<div class="col-md-6">
<input id="barcode" value="" name="barcode" class="form-control" type="number"
>
</div>
</div>
<div class="form-group">
<label for="packaging_type" class="col-md-3 control-label">Packaging Type</label
>
<div class="col-md-6">
<select class="form-control" id="format_packaging_type" name="packaging_type"
>
<option value="">Other</option>
<option value="bottled">Bottled</option>
<option value="canned">Canned</option>
</select>
</div>
</div>
<div class="form-group">
<label for="amount_g" class="col-md-3 control-label">Size (g)</label>
<div class="col-md-6">
<input id="amount_g" value="" name="amount_g" class="form-control" type="number"
onkeydown="validateNumberAllowDecimal(event, true)">
</div>
</div>
<div class="form-group">
<label for="amount_ml" class="col-md-3 control-label">Size (ml)</label>
<div class="col-md-6">
<input id="amount_ml" value="" name="amount_ml" class="form-control" type
="number" onkeydown="validateNumberAllowDecimal(event, true)">
</div>
</div>
<div class="form-group">
<label for="size_indicated_amount" class="col-md-3 control-label">Size Indicated
Amount</label>
<div class="col-md-6">
<input id="size_indicated_amount" value="" name="size_indicated_amount" class
="form-control" type="number" onkeydown="validateNumberAllowDecimal(event, true)">
</div>
</div>
<div class="form-group">
<label for="size_indicated_unit" class="col-md-3 control-label">Size Indicated
Unit</label>
<div class="col-md-6">
<input id="size_indicated_unit" value="" name="size_indicated_unit" class
="form-control" type="text">
</div>
</div>
<div class="form-group">
<label for="store_code" class="col-md-3 control-label">Store Code</label>
<div class="col-md-6">
<input id="store_code" value="" name="store_code" class="form-control" type
="number">
</div>
</div>
<div class="form-group">
<label for="price" class="col-md-3 control-label">Price</label>
<div class="col-md-6">
<input id="price" value="" name="price" class="form-control" type="number"
>
</div>
</div>
</div>
</div> <!--end modal body-->
<div class="modal-footer">
<button type="button" class="btn btn-success" id="save_product_format">
Save
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div> <!--end modal content-->
</div>
</div>

Populating a textbox using Ajax and Servlet

I am trying to get a value from a Servlet to an input box of a JSP using Ajax. I have managed to get that value to an Alert box. But it didn't work when I tried to get that value into an input box. Please see the following code.
This is the ajaxtTestServlet
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
String text = "some text";
response.setCharacterEncoding("UTF-8");
response.getWriter().write(text);
}
There is where the input box with the id "firstName" is.
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Edit New Member</b></font></span> </div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="EditOnlySrvlt?idEmployee=<%=request.getParameter("idEmployee")%>"" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-6">
<input name="firstName" id="firstName" type="text" class="form-control input-md" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Middle Name</label>
<div class="col-md-6">
<input name="middleName" type="text" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Last Name</label>
<div class="col-md-6">
<input name="lastName" type="text" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
<div class="col-md-6">
<input name="dateOfBirth" type="date" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Passport Number</label>
<div class="col-md-6">
<input name="passportNumber" type="text" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- /Edit Job modal -->
this is the Script
<script>
$(function() {
//twitter bootstrap script
$("tr#somebutton").click(function(){
$.get("ajaxTestSrvlt", function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$('#firstName').text(responseText) ; // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
});
</script>
if it's a input, you should give
$('#firstName').val(responseText);

Resources