HTML code dynamiccaly generated by JS not performing Interactive

HTML code dynamiccaly generated by JS not performing Interactive - javascript

I have a form wizard and I am trying to dynamically add select tags and I have added a click-to-add button to generate the HTML code snippet. However, the css styles and select-2 don't apply to the code generated by the js click event and the attached event to the dynamic code also doesn't fire when clicked.
I have tried rearranging the js files but can't figure out why it still doesn't work.
In my below laravel code snippet, I have placed the js implementation directly below jquery cos it was implemented using jquery but it still doesn't work.
#section('scripts')
<!-- BEGIN: Vendor JS-->
<script src="{{ asset('backend/app-assets/vendors/js/vendors.min.js') }}"></script>
<script>
$(document).ready(function() {
var maxWeek = 53;
var i = 2;
$('#btn-add-week').click(function () {
var weekData = '<div>\
<div class="row">\
<div class="d-flex justify-content-between">\
<h4 class="mb-0">Week '+i+'</h4>\
<button type="button" class="btn btn-outline-danger btn-remove-week"><i data-feather="minus"></i></button>\
</div>\
<div class="mb-1 col-md-12">\
<label class="form-label" for="day-1">Day 1</label>\
<select class="select2 form-select" id="week-'+i+'-day-1-id" name="week_'+i+'_day_1_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
</div>\
<div class="row">\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-2">Day 2</label>\
<select class="select2 form-select" id="week-'+i+'-day-2-id" name="day_2_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-3">Day 3</label>\
<select class="select2 form-select" id="week-'+i+'-day-3-id" name="day_3_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-4">Day 4</label>\
<select class="select2 form-select" id="week-'+i+'-day-4-id" name="day_4_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-5">Day 5</label>\
<select class="select2 form-select" id="week-'+i+'-day-5-id" name="day_5_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-6">Day 6</label>\
<select class="select2 form-select" id="week-'+i+'-day-6-id" name="day_6_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-7">Day 7</label>\
<select class="select2 form-select" id="week-'+i+'-day-7-id" name="day_7_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<hr class="text-primary">\
</div>\
</div>';
if(i <= maxWeek) {
i++;
$("#week-data").append(weekData);
}
});
$('.btn-remove-week').click(function (e) {
e.preventDefault();
$(this).parent('div').remove();
i--;
});
});
</script>
<!-- BEGIN Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{ asset('backend/app-assets/vendors/js/forms/wizard/bs-stepper.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{ asset('backend/app-assets/js/core/app-menu.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/js/core/app.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/js/scripts/customizer.min.js') }}"></script>
<!-- END: Theme JS-->
<!-- BEGIN: Page JS-->
<script src="{{ asset('backend/app-assets/js/scripts/forms/form-wizard.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/ckeditor/ckeditor.js') }}"></script>
<!-- END: Page JS-->
<script>
CKEDITOR.replace( 'description' );
$(window).on('load', function () {
if (feather) {
feather.replace({
width: 14,
height: 14
});
}
})
</script>
#endsection
#section('content')
<!-- BEGIN: Content-->
<div class="app-content content ">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper container-xxl p-0">
<div class="content-header row">
<div class="content-header-left col-md-9 col-12 mb-2">
<div class="row breadcrumbs-top">
<div class="col-12">
<h2 class="content-header-title float-start mb-0">Workout Wizard</h2>
<div class="breadcrumb-wrapper">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Workouts
</li>
<li class="breadcrumb-item active">
Create Workout
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content-body">
<!-- Horizontal Wizard -->
<section class="horizontal-wizard">
<div class="bs-stepper horizontal-wizard-example">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#account-details" role="tab" id="account-details-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">1</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Basic Details</span>
<span class="bs-stepper-subtitle">Basic workout info</span>
</span>
</button>
</div>
<div class="line">
<i data-feather="chevron-right" class="font-medium-2"></i>
</div>
<div class="step" data-target="#personal-info" role="tab" id="personal-info-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">2</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Workout Details</span>
<span class="bs-stepper-subtitle">Workout schedule details</span>
</span>
</button>
</div>
<div class="line">
<i data-feather="chevron-right" class="font-medium-2"></i>
</div>
<div class="step" data-target="#address-step" role="tab" id="address-step-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">3</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Address</span>
<span class="bs-stepper-subtitle">Add Address</span>
</span>
</button>
</div>
<div class="line">
<i data-feather="chevron-right" class="font-medium-2"></i>
</div>
<div class="step" data-target="#social-links" role="tab" id="social-links-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">4</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add Social Links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<div id="account-details" class="content" role="tabpanel"
aria-labelledby="account-details-trigger">
<div class="content-header">
<h5 class="mb-0">Basic Details</h5>
<small class="text-muted">Enter basic workout details</small>
</div>
<form>
<div class="row">
<div class="mb-1 col-md-12">
<label class="form-label" for="title">Title</label>
<input type="text" name="title" id="title" class="form-control" placeholder="Jumping Jack Pro Max" />
</div>
</div>
<div class="row">
<div class="mb-1 col-md-12">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" rows="3" id="description" name="description" placeholder="Enter Workout Description"></textarea>
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="goal">Goal</label>
<select class="select2 form-select" id="goal-id" name="goal_id">
<option>Select Goal</option>
#foreach ($goals as $goal)
<option value="{{ $goal->id }}">{{ ucfirst($goal->title) }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="level">Level</label>
<select class="select2 form-select" id="level-id" name="level_id">
<option>Select Level</option>
#foreach ($levels as $level)
<option value="{{ $level->id }}">{{ ucfirst($level->title) }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="bodyparts">Bodyparts</label>
<select class="select2 form-select" id="bodypart-id" name="bodypart_id[]" multiple>
<option disabled>Select Body Part</option>
#foreach ($bodyparts as $bodypart)
<option value="{{ $bodypart->id }}">{{ ucfirst($bodypart->title) }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="equipment">Equipments</label>
<select class="select2 form-select" id="equipment-id" name="equipment_id[]"multiple>
<option disabled>Select Equipment</option>
#foreach ($equipments as $equipment)
<option value="{{ $equipment->id }}">{{ ucfirst($equipment->title) }}</option>
#endforeach
</select>
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled>
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none">Next</span>
<i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
</button>
</div>
</div>
<div id="personal-info" class="content" role="tabpanel" aria-labelledby="personal-info-trigger">
<div class="content-header">
<h5 class="mb-0">Workout Details</h5>
<small>Workout schedule details</small>
</div>
<form>
<div id="week-data">
<div class="row">
<div class="d-flex justify-content-between">
<h4 class="mb-0">Week 1</h4>
<button type="button" class="btn btn-outline-primary" id="btn-add-week"><i data-feather="plus"></i></button>
</div>
<div class="mb-1 col-md-12">
<label class="form-label" for="day-1">Day 1</label>
<select class="select2 form-select" id="week-1-day-1-id" name="day_1_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="day-2">Day 2</label>
<select class="select2 form-select" id="week-1-day-2-id" name="day_2_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-3">Day 3</label>
<select class="select2 form-select" id="week-1-day-3-id" name="day_3_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-4">Day 4</label>
<select class="select2 form-select" id="week-1-day-4-id" name="day_4_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-5">Day 5</label>
<select class="select2 form-select" id="week-1-day-5-id" name="day_5_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-6">Day 6</label>
<select class="select2 form-select" id="week-1-day-6-id" name="day_6_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-7">Day 7</label>
<select class="select2 form-select" id="week-1-day-7-id" name="day_7_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<hr class="text-primary">
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none">Next</span>
<i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
</button>
</div>
</div>
<div id="address-step" class="content" role="tabpanel" aria-labelledby="address-step-trigger">
<div class="content-header">
<h5 class="mb-0">Address</h5>
<small>Enter Your Address.</small>
</div>
<form>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="address">Address</label>
<input type="text" id="address" name="address" class="form-control"
placeholder="98 Borough bridge Road, Birmingham" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="landmark">Landmark</label>
<input type="text" name="landmark" id="landmark" class="form-control"
placeholder="Borough bridge" />
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="pincode1">Pincode</label>
<input type="text" id="pincode1" class="form-control" placeholder="658921" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="city1">City</label>
<input type="text" id="city1" class="form-control" placeholder="Birmingham" />
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none">Next</span>
<i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
</button>
</div>
</div>
<div id="social-links" class="content" role="tabpanel" aria-labelledby="social-links-trigger">
<div class="content-header">
<h5 class="mb-0">Social Links</h5>
<small>Enter Your Social Links.</small>
</div>
<form>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="twitter">Twitter</label>
<input type="text" id="twitter" name="twitter" class="form-control"
placeholder="https://twitter.com/abc" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="facebook">Facebook</label>
<input type="text" id="facebook" name="facebook" class="form-control"
placeholder="https://facebook.com/abc" />
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="google">Google+</label>
<input type="text" id="google" name="google" class="form-control"
placeholder="https://plus.google.com/abc" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="linkedin">Linkedin</label>
<input type="text" id="linkedin" name="linkedin" class="form-control"
placeholder="https://linkedin.com/abc" />
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</div>
</div>
</section>
<!-- /Horizontal Wizard -->
</div>
</div>
</div>
<!-- END: Content-->
#endsection

Change this line
$('#btn-add-week').click(function () {
to this
$(document).on('click', '#btn-add-week', function () {

Related

Redirect to form with input value from previous form in Laravel

I'm working with Form in Laravel. In that form have a modal that containts another form.
Here's the screenshot of the Form :
SS1 (I can't post an image because my reputation is not enough)
when I click on New button (besides of Customer Name input text) there will be a modal that containts form to input new customers and new unit. Here's the screenshot of the modal :
SS2
and the idea is,after I complete the input of new customer and unit, the data i've inputted will automatically input the main form.
and this is what I've done so far :
$("#main_form2").on("submit", function(event) {
event.preventDefault();
value = $(this).serialize();
alert(value);
$.ajax({
type: 'post',
url: $(this).attr('action'),
data: {
'value': value
},
success: function(data) {
$('#customer_id').val(data.customer_id)
$('#customer_name').val(data.customer_name)
$('#customer_pic').val(data.customer_pic)
$('#unit_province').val(data.customer_province)
$('#unit_cities').val(data.customer_site)
$('#unit_sn').val(data.unit_sn)
$('#unit_brand').val(data.unit_brand)
$('#unit_type').val(data.unit_type)
$('#unit_model').val(data.unit_model)
},
error: function() {}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="{{route('ticket-service/store')}}" method="POST" id="main_form">
#csrf
<div class="panel panel-inverse">
<div class="panel-heading ui-sortable-handle">
<h4 class="panel-title">Ticket Service Create</h4>
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_inquiry_from"><b>Inquiry From</b> <span class="text-danger">*</span></label>
<select class="form-control ticket_inquiry_from form-control-sm" name="ticket_inquiry_from" id="ticket_inquiry_from">
<option value="">Select Option</option>
<option value="Phone">Phone</option>
<option value="Website">Website</option>
<option value="WhatsApp">WhatsApp</option>
<option value="Email">Email</option>
</select>
<span class="text-danger error-text ticket_inquiry_from_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ticket_inquiry_to"><b>Inquiry To</b> <span class="text-danger">*</span></label>
<select class="form-control ticket_inquiry_to form-control-sm" name="ticket_inquiry_to" id="ticket_inquiry_to">
<option value="">Select Option</option>
<option value="Marketing">Marketing</option>
<option value="Service">Service</option>
<option value="Sparepart">Sparepart</option>
</select>
<span class="text-danger error-text ticket_inquiry_to_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ticket_inquiry_pic"><b>Inquiry PIC</b><a class="text-danger"> *</a></label>
<select class="js-example-basic-multiple" class="form-control form-control-sm form-select form-select-sm" name="ticket_inquiry_pic[]" multiple="multiple" style="width:100%;">
#foreach(SiteHelpers::get_user_all() as $pic)
<option value="{{$pic->id}}" <?php echo (old( 'ticket_inquiry_pic')==$ pic->user_name) ? 'selected' : ''?>>{{$pic->user_name}}</option>
#endforeach
</select>
<span class="text-danger error-text ticket_inquiry_pic_error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_date"><b>Ticket Date</b></label>
<div class="col-sm-13">
<input type="text" class="form-control form-control-sm" name="ticket_date" value="{{date('Y/m/d')}}" readonly/>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="service_request_date"><b>Service Request Date</b> <span class="text-danger">*</span></label>
<div class="col-sm-13">
<div class="input-group date" id="datepicker-disabled-past" data-date-format="dd-mm-yyyy" data-date-start-date="Date.default">
<input type="text" class="form-control form-control-sm" name="service_request_date" value="{{old('service_request_date')}}" />
<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
</div>
<span class="text-danger error-text service_request_date_error"></span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="liability_charges"><b>Charges To</b> <span class="text-danger">*</span></label>
<select class="form-control liability_charges form-control-sm" name="liability_charges" id="liability_charges">
<option value="">Select Option</option>
<option value="Principal">Principal</option>
<option value="Dept. Marketing">Dept. Marketing</option>
<option value="Dept. Part">Dept. Part</option>
<option value="Dept. Service">Dept. Service</option>
<option value="Customer">Customer</option>
<option value="Free Charge">Free Charge</option>
</select>
<span class="text-danger error-text liability_charges_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ticket_category"><b>Category</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="ticket_category" id="ticket_category">
<option value="">Select Category</option>
<option value="Inspection">Inspection</option>
<option value="Commissioning">Commissioning</option>
<option value="Regular Service">Regular Service</option>
<option value="Repair / Troubleshooting">Repair / Troubleshooting</option>
<option value="Training">Training</option>
<option value="Warranty">Warranty</option>
<option value="Sparepart">Sparepart</option>
<option value="Unit">Unit</option>
<option value="Other">Other</option>
</select>
<span class="text-danger error-text ticket_category_error"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="customer_id"><b>Customer</b><span class="text-danger"> *</span></label>
<div class="input-group">
<input type="hidden" id="customer_id" name="customer_id" value="{{(isset($data)) ? $data->customer_id : ''}}">
<input type="text" class="form-control form-control-sm" placeholder="Customer Name" id="customer_name" href="{{route('population/popup_media')}}" data-toggle="modal" data-target="#modal-default" value="{{(isset($data)) ? $data->customer_name : ''}}">
<div class="input-group-prepend">
<span style="cursor:pointer;" class="input-group-text form-control-sm" href="#modal-new-customer" id='new-customer' rel='tooltip' data-placement='top' data-toggle='modal' title='Add New Customer'><i class="fa fa-user"></i>&nbsp<b>New</b></span>
</div>
</div>
<span class="text-danger error-text customer_id_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_pic"><b>Customer PIC</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="customer_pic" name="customer_pic" placeholder="Customer PIC">
<span class="text-danger error-text customer_pic_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_phone"><b>Customer Phone</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="customer_phone" name="customer_phone" placeholder="Customer Phone">
<span class="text-danger error-text customer_phone_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_email"><b>Customer Email</b></label>
<input type="text" class="form-control form-control-sm" id="customer_email" name="customer_email" placeholder="Customer Email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="unit_sn"><b>Unit SN</b></label>
<input type="text" class="form-control form-control-sm" id="unit_sn" name="unit_sn" placeholder="Unit SN" readonly>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_brand"><b>Unit Brand</b></label>
<input type="text" class="form-control form-control-sm" id="unit_brand" name="unit_brand" placeholder="Unit Brand" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="category"><b>Unit Type</b></label>
<input type="text" class="form-control form-control-sm" id="category" name="category" placeholder="Type" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_model"><b>Unit Model</b></label>
<input type="text" class="form-control form-control-sm" id="unit_model" name="unit_model" placeholder="Unit Model" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="province_name"><b>Unit Province</b> <span class="text-danger">*</span></label>
<select class="form-control form-control-sm province_name" name="unit_province" id="unit_province">
<option value="" disabled="true" selected="true">Choose Province</option>
#foreach(SiteHelpers::get_province() as $province)
<option value="{{$province->id}}">{{$province->province_name}}</option>
#endforeach
</select>
<span class="text-danger error-text unit_province_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="cities"><b>Unit City</b> <span class="text-danger">*</span></label>
<select class="form-control form-control-sm cities" name="unit_cities" id="unit_cities">
<option value="0" disabled selected>Select City</option>
</select>
<span class="text-danger error-text unit_cities_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_site"><b>Site/Workshop Address</b> <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" id="unit_site" name="unit_site" placeholder="Unit Site">
<span class="text-danger error-text unit_site_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_status"><b>Unit Status</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="unit_status" id="unit_status">
<option value="">Select Status</option>
<option value="Breakdown">Breakdown</option>
<option value="Stand By">Running</option>
<option value="Working">Stand By</option>
</select>
<span class="text-danger error-text unit_status_error"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ticket_complaints"><b>Informed Issue</b> <span class="text-danger">*</span></label>
<textarea name="ticket_complaints" id="ticket_complaints" class="form-control form-control-sm" style="height: 99px;"></textarea>
<span class="text-danger error-text ticket_complaints_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ticket_notes"><b>Notes</b></label>
<textarea name="ticket_notes" id="ticket_notes" class="form-control form-control-sm" style="height: 99px;"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_status"><b>Ticket Status</b> </label>
<select class="form-control category form-control-sm" name="ticket_status" id="ticket_status">
<option value="OPEN">OPEN</option>
<option value="Finished">Finished</option>
</select>
<span class="text-danger error-text ticket_status_error"></span>
</div>
</div>
<div class="col-md-3 ticket-detail" style="display:none;">
<div class="form-group">
<label for="ticket_guidance"><b>Ticket Guidance</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="ticket_guidance" id="ticket_guidance">
<option value="">Select Guidance</option>
<option value="Phone">Phone</option>
<option value="Other">Other</option>
</select>
<span class="text-danger error-text ticket_guidance_error"></span>
</div>
</div>
<div class="col-md-6 ticket-detail" style="display:none;">
<div class="form-group">
<label for="ticket_guide_name"><b>Guide Name</b> <span class="text-danger">*</span></label>
<input type="text" name="ticket_guide_name" id="ticket_guide_name" class="form-control form-control-sm">
<span class="text-danger error-text ticket_guide_name_error"></span>
</div>
</div>
</div>
<button type="submit" class="btn btn-sm btn-success m-r-5">Submit</button>
Cancel
</div>
</div>
</form>
<!-- the modal -->
<div class="modal fade" id="modal-new-customer" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Customer</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="{{ route('customer/storeWithPopulation') }}" method="POST" id="main_form2">
#csrf
<div class="modal-body">
<div class="panel-body">
<label for="unit"><b><i>Customer(s)</i></b></label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer_name"><b>Customer Name</b> <span class="text-danger">*</span></label>
<input type="hidden" name="customer_id" value="temp">
<input type="hidden" name="unit_status_stock" value="DELIVERED">
<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Customer Name" value="{{old('customer_name')}}">
<span class="text-danger error-text customer_name_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="PIC"><b>PIC</b></label>
<input type="text" class="form-control" id="customer_pic" name="customer_pic" placeholder="PIC" value="{{old('customer_pic')}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="province_name"><b>Unit Province</b> <span class="text-danger">*</span></label>
<select class="form-control province_name" name="customer_province" id="customer_province">
<option value="" disabled="true" selected="true">Choose Province</option>
#foreach(SiteHelpers::get_province() as $province)
<option value="{{$province->id}}">{{$province->province_name}}</option>
#endforeach
</select>
<span class="text-danger error-text customer_province_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="cities"><b>Site</b> <span class="text-danger">*</span></label>
<select class="form-control cities" name="customer_site" id="customer_site">
<option value="0" disabled selected>Select City</option>
</select>
<span class="text-danger error-text customer_site_error"></span>
</div>
</div>
</div>
</br>
<label for="unit"><b><i>Population(s)</i></b></label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="brand"><b>Brand</b><span class="text-danger"> *</span></label>
<select class="form-control brand form-control-sm" name="unit_brand" id="unit_brand">
<option value="">Chose Brand</option>
#foreach($brands as $brand)
<option value="{{$brand->brand}}">{{$brand->brand}}</option>
#endforeach
</select>
<span class="text-danger error-text unit_brand_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="model"><b>Category</b><span class="text-danger"> *</span></label>
<select class="form-control category form-control-sm" name="unit_category" id="unit_category">
<option value="" disabled>Select Category</option>
</select>
<span class="text-danger error-text unit_category_error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 tes">
<div class="form-group">
<label for="model"><b>Model</b><span class="text-danger"> *</span></label>
<select class="form-control model form-control-sm" name="unit_model" id="unit_model">
<option value="" disabled>Select Model</option>
</select>
<span class="text-danger error-text unit_model_error"></span>
</div>
<div class="form-group">
<label for="serial_number"><b>Serial Number</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="unit_sn" name="unit_sn" placeholder="Unit Serial Number">
<span class="text-danger error-text unit_sn_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="year"><b>Unit Year</b><span class="text-danger"> *</span></label>
<input type="number" class="form-control form-control-sm" id="unit_year" name="unit_year" placeholder="Unit Year">
<span class="text-danger error-text unit_year_error"></span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="background-color:#cccccc;">
Close
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
here's my Controller :
public function storeWithPopulation(Request $request){
abort_unless(\Gate::allows('master-customer-create'),403);
$validator = Validator::make($request->all(),Customer::$createRules,Customer::$customMessage);
$validator2 = Validator::make($request->all(),Population::$createRules,Population::$customMessage);
if(!$validator->passes() && !$validator2->passes()){
$errors = array_merge($validator->errors()->toArray(),$validator2->errors()->toArray());
return response()->json(['status'=>0, 'error'=>$errors]);
}else{
$last_id = Customer::all()->last();
$customer_id = 'CUST-'.$last_id->id;
$values_customer = [
'customer_id'=>$customer_id,
'customer_name'=>$request->customer_name,
'customer_pic'=>$request->customer_pic,
'customer_site'=>$request->customer_site,
'customer_province'=>$request->customer_province,
];
$values_population = [
'customer_id' => $customer_id,
'unit_model'=>$request->unit_model,
'unit_sn'=>$request->unit_sn,
'unit_year'=>$request->unit_year,
'unit_status_stock'=>$request->unit_status_stock,
];
$new_customer = Customer::create($values_customer);
$new_population = Population::create($values_population);
if( $new_population ){
$brands = DB::table('t_brand')->get();
$data = SiteHelpers::get_population_by_sn($new_population->unit_sn);
return response()->json(['status'=>1, 'url'=>'/service/forms/ticket-service/create',['data'=>$data,'brands'=>$brands]]);
// return response()->json(['status'=>1, 'url'=>'/service/forms/ticket-service/create',['data'=>$data,'brands'=>$brands]]);
}
}
}
The problem is, everytime I succeeded create new customer in the modal it also redirect into the main form,but got refreshed and the main form completely in blank condition. I want to grab all the new customer I've just inputed into the main form.
hopefully somebody can help me. Thank you in advance.

How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

this is my JavaScript code. i tried my best can anyone help me.How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to .
$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control #error('category_id') is-invalid #enderror" name="category_id[]">
<option>Select Category</option>
#foreach($categories as $category)
<option value="{{$category->id}}" >{{$category->cat_name}}</option>
#if(count($category->childs))
#foreach($category->childs as $cat)
<option class="sub_child" value="{{$cat->id}}">-- {{$cat->cat_name}}</option>
#endforeach
#endif
#endforeach
</select>
#error('category_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty[]" class="form-control #error('qty') is-invalid #enderror" placeholder="Qty on combo" value="{{ old('qty') ?? 1 }}" required data-error="This field is required." />
<div class="help-block with-errors"></div>
#error('qty')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control #error('product_id') is-invalid #enderror" multiple name="product_id[]">
</select>
#error('product_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>

$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control" name="category_id">
<option>Select Category</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option class="sub_child" value="1"> 1</option>
<option class="sub_child" value="2"> 2</option>
<option class="sub_child" value="3"> 3</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty" class="form-control" placeholder="Qty on combo" value="1" required data-error="This field is required." />
<div class="help-block with-errors"></div>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control is-invalid" multiple name="product_id">
<option value="a" >a</option>
<option value="b" >a</option>
<option value="c" >c</option>
<option value="d" >d</option>
<option value="e" >e</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>

How to update the cart with ajax json response

I am adding items to cart with ajax request but i don't know how to update the cart with ajax response.
This is my index.blade.php code from where i am adding items to cart with some inputs in cart:
<form id="product-1">
#csrf
<div class="modal-body cart-addon" style="margin-top: 20px">
<div class="food-item white">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="item-img pull-left">
<a class="restaurant-logo pull-left" href="#"><img id="image"/> </a>
</div>
<div class="rest-descr">
<h6><input id="name" name="name" style="width: 200px; border: none; margin-top: 15px" readonly></h6>
</div>
</div>
<!-- end:col -->
<div class="col-xs-6 col-sm-2 col-lg-2 text-xs-center"> <span class="price pull-left">$<input id="price" name="price" style="width: 50px; border: none" readonly></span></div>
<div class="col-xs-6 col-sm-4 col-lg-4">
<div class="row no-gutter">
<div class="form-group">
<select class="form-control" id="quantity" name="quantity" required>
<option selected="selected" disabled="disabled" value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control" id="spice" name="spice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Spice</option>
<option value="Mild" style="font-size: 14px">Mild</option>
<option value="Medium" style="font-size: 14px">Medium</option>
<option value="Hot" style="font-size: 14px">Hot</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="naan" name="naan" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Naan</option>
<option value="No Naan" style="font-size: 14px">No Naan</option>
<option value="Naan" style="font-size: 14px">Naan</option>
<option value="Garlic Naan" class="red">Garlic Naan +$1.00</option>
<option value="Roti" style="font-size: 14px">Roti</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="rice" name="rice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Lunch Rice</option>
<option value="No Rice" style="font-size: 14px">No Rice</option>
<option value="Rice" style="font-size: 14px">Rice</option>
</select>
</div>
<input class="form-control" name="instructions" id="instructions" placeholder="Instruction"/>
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-2">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div class="col-md-3">
<input hidden name="products_id" id="products_id">
<button type="submit" class="btn theme-btn">Add to cart</button>
</div>
</div>
</div>
</form>
Ajax Request:
<script>
$("#product-1").submit(function (e){
e.preventDefault();
let quantity = $("#quantity").val();
let spice = $("#spice").val();
let naan = $("#naan").val();
let rice = $("#rice").val();
let instructions = $("#instructions").val();
let products_id = $("#products_id").val();
let _token = $("input[name=_token]").val();
$.ajax({
url: "{{route('product.addToCart')}}",
type: "get",
data:{
products_id:products_id,
quantity:quantity,
spice:spice,
naan:naan,
rice:rice,
instructions:instructions,
_token:_token
},
beforeSend: function() {
},
success:function(response)
{
$("#product-1")[0].reset();
$('#product-modal').modal('hide');
$('#product-modal').trigger("click");
}
})
});
and this is my controller:
public function getAddToCart(Request $request)
{
$products = Products::find($request->products_id);
$quantity = $request->input('quantity');
$instructions = $request->input('instructions');
$spice = $request->input('spice');
$naan = $request->input('naan');
$rice = $request->input('rice');
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
for ($i = 1; $i <= $quantity; $i++)
{
if ($naan == "Garlic Naan"){
$cart->garlic_add($products, $products->id, $instructions, $spice, $naan, $rice);
} else
$cart->add($products, $products->id, $instructions, $spice, $naan, $rice);
}
$request->session()->put('cart', $cart);
$oldCart = Session::get('cart');
$cart = new Cart($oldCart);
$request->session()->put('cart', $cart);
return back();
return redirect('/');
}
This is my blade part where i am showing cart.
#if(Session::has('cart'))
#foreach($carts as $product)
<div class="order-row bg-white">
<div class="widget-body">
<div class="title-row">{{ $product['item']['name'] }}
<form id="reduceProduct">
<input name="id" id="id" value="{{$product['item']['id']}}">
<button type="submit" style="background-color: transparent; border: 0;"><i class="fa fa-trash pull-right" style="color: #FF3300"></i></button>
</form>
</div>
<div class="title-row">{{ $product['instructions'] }}</div>
<div class="title-row">{{ $product['spice'] }}</div>
#if(!empty($product['rice']))
<div class="title-row">{{ $product['rice'] }}</div>
#endif
<div class="form-group row no-gutter">
<div class="col-xs-8">
<select class="form-control b-r-0" id="exampleSelect1">
<option>Size SM</option>
<option>Size LG</option>
<option>Size XL</option>
</select>
</div>
<div class="col-xs-4">
<input class="form-control" type="number" value="{{ $product['qty'] }}" id="example-number-input">
{{ $product['item']['price'] }}
{{ $product['price'] }}
</div>
</div>
</div>
</div>
#endforeach
<!-- end:Order row -->
<div class="widget-delivery clearfix">
<form>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio4" name="radio" type="radio" class="custom-control-input" checked=""> <span class="custom-control-indicator"></span> <span class="custom-control-description">Delivery</span> </label>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio3" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Takeout</span> </label>
</div>
</form>
</div>
<div class="widget-body">
<div class="price-wrap text-xs-center">
<p>TOTAL</p>
<h3 class="value"><strong>$ 25,49</strong></h3>
<p>Free Shipping</p>
<button onclick="location.href='checkout.html'" type="button" class="btn theme-btn btn-lg">Checkout</button>
</div>
</div>
Can any help me with the code that how can i update the cart with ajax response.
ThankYou

dropdown binding and removing option from remaining dropdowns

I have 3 dropdowns and that 3 dropdowns has same options.
options ex... kiran, viran, charan, narine.
If i select kiran in first dropdown that has to be not showing in remaining dropdowns(should show only viran, charan,narine). And if i select viran in next two dropdowns of anyone. The 3rd dropdown should show only charan and narine.
And i have 3 scope variables in my html for 3 dropdowns. u can see below please help me guys.
Here is my Html and am using Angular Js for this:
<html>
<body>
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Primary Physician</option>
</select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Secondary Physician</option>
</select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option>
</select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>
</html>
<script>
$scope.createOrUpdateResidentProvider = function () {
blockUI.start();
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
residentService.post($scope.constants.API.CREATE_NEW_RESIDENT_PROVIDER, $scope.residentprovider).then(
function (response) {
toaster.pop('success', response.message);
blockUI.stop();
},
function (response) {
toaster.pop('error', response.message);
blockUI.stop();
})
}
</script>

Use disable when ... ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders"
var app = angular.module('myApp',[]);
app.controller('appCtrl', function($scope){
$scope.serviceProviders =[{"ServiceProviderID":1,personbase:{"FullName":"AAA"}},{"ServiceProviderID":2,personbase:{"FullName":"BBB"}},{"ServiceProviderID":3,personbase:{"FullName":"CCC"}}];
$scope.createOrUpdateResidentProvider = function () {
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="appCtrl">
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Primary Physician</option></select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Secondary Physician</option></select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID || residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option></select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<br>{{residentprovider.pPhysician}}
{{residentprovider.sPhysician}} {{residentprovider.aPhysician}}<br>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>

ng-change event of dropdown can be used to change the options of other dropdown
for eg.
<div ng-app="App" >
<div ng-controller="ctrl">
option 1:
<select id="ddl1" ng-model="dataSelected1" ng-change="removeValue(dataSelected1)"
data-ng-options="data as data.name for data in datas">
<option value="">Select</option>
</select>
<br/>
option 2:
<select id="ddl2" ng-model="dataSelected2"
data-ng-options="data as data.name for data in datas">
<option value="">Select</option>
</select>
</div>
</div>
$scope.datas=[{id:1,name:"kiran"},{id:2,name:"viran"},{id:3,name:"charan"},{id:4,name:"narine"}]
$scope.removeValue=function(item){
alert(item.name);
$('#ddl2 option')
.filter(function(i, e) { return $(e).text() == item.name}).remove();
}
demo sample
demo Updated

How to create pop up box in PHP laravel 5

i created one view.blade.php page. There in table added column action, inside that given to button, Delete and View/Edit. When i click on View/Edit button one form page should come as pop up box. For that how can i write javascript. I am a beginner in laravel. So can any one please help me out?
My view.blade page is given is given below
userAdmin.blade.php
#extends('app')
#section('content')
<div class="templatemo-content-wrapper" xmlns="http://www.w3.org/1999/html">
<ol class="breadcrumb">
<li><font color="green">Home</font></li>
<li class="active">user information</li>
</ol>
<div class="templatemo-content">
<h1>View/Edit user information</h1>
<div>
<div>
<div>
<table id="example" class="table table-striped table-hover table-bordered" bgcolor="#fff8dc">
<h3>Select User :</h3>
<thead>
<tr>
<th>User ID</th>
<th>User Desc</th>
<th>Contact Name</th>
<th>Contact Email</th>
<th>Time Zone</th>
<th>Active</th>
<th>Last Login (GMT+05:30)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{--{{ UserController::getIndex() }}--}}
#foreach($name as $nam)
<tr>
<td>{{ $nam->userID }}</td>
<td>{{ $nam->description }}</td>
<td>{{ $nam->contactName }}</td>
<td>{{ $nam->contactPhone }}</td>
<td>{{ $nam->timeZone }}</td>
<td>
#if($nam->isActive == '1')
Yes
#else
No
#endif
</td>
<td>{{ date('Y/m/d H:i:s',($nam->lastLoginTime)) }}</td>
<td>
{{--#if ( in_array($nam->isActive, array('Yes','No')) )--}}
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
{{--#if ($nam->isActive == 'Yes')--}}
<li data-toggle="modal" data-target="#acceptModal" data-bookingid="{{ $nam->userID }}">View/ Edit
</li>
{{--#endif--}}
<li>Delete</li>
</ul>
</div>
{{--#endif--}}
</td>
</tr>
#endforeach
</tbody>
</table>
{{$name->links()}}
</div>
</div>
</div>
</div>
</div>
</br>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
#endsection
and the form page i need to pop up is
#extends('app')
#section('content')
<div class="templatemo-content-wrapper">
<div class="container">
<ol class="breadcrumb">
<li><font color="green">Home</font></li>
<li class="active">View/Edit User</li>
</ol>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-success">
<div class="panel-heading">View/Edit User Information</div>
<div class="panel-body">
#if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form class="form-horizontal" role="form" method="POST" action="{{ url('accountAdmin') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-md-4 control-label">User ID</label>
<div class="col-md-6">
<input type="text" class="form-control" name="userID" value="{{ old('userID')}}" placeholder="Enter User ID">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Active</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('isActive') }}" name="isActive" >
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">User Description</label>
<div class="col-md-6">
<input type="text" class="form-control" name="description" value="{{ old('description') }}" placeholder="Enter the description">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Contact Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="contactName" value="{{ old('contactName') }}" placeholder="Enter Contact Name">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Contact Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" name="contactPhone" value="{{ old('contactPhone') }}" placeholder="Enter Mobile Number">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Contact Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="contactEmail" value="{{ old('contactEmail') }}" placeholder="Enter E-Mail Address">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Notify Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="notifyEmail" value="{{ old('notifyEmail') }}" placeholder="Enter E-Mail Address">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Time Zone</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('timeZone') }}" name="timeZone" >
<option value="0">GMT+05:30</option>
<option value="Inactive">xyz</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Authorized Group</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('distanceUnits') }}" name="distanceUnits" >
<option value="0">all</option>
<option value="1">Km</option>
<option value="2">Nm</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">First Login page</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('firstLoginPageID') }}" name="firstLoginPageID" >
<option value="0">Main Menu</option>
<option value="1">Liter</option>
<option value="2">IG</option>
<option value="3">ft^3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Maximum Access Level</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('maxAccessLevel') }}" name="maxAccessLevel" >
<option value="3">New/Delete</option>
<option value="1">Read/View</option>
<option value="2">Write/Edit</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-warning">
Save
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
userController page is
class UserController extends Controller
{
public $type = 'User';
public function getIndex()
{
$name = DB::table('user')->simplePaginate(10);
return view('user.userAdmin')->with('name', $name);
}
public function getData()
{
$name = DB::table('user');
return view('user.add')->with('name', $name);
}
public function userInsert()
{
$postUser = Input::all();
//insert data into mysql table
$data = array('userID'=> $postUser['userID']
);
// echo print_r($data);
$ck = 0;
$ck = DB::table('user')->Insert($data);
//echo "Record Added Successfully!";
$name = DB::table('user')->simplePaginate(10);
return view('user.userAdmin')->with('name', $name);
}
public function delete($id)
{
DB::table('user')->where('userID', '=', $id)->delete();
return redirect('userAdmin');
}
}
routes.php is
Route::any('userAdmin', 'UserController#getIndex');
Route::any('user/add', 'UserController#getData');
Route::any('user/delete/{id}', 'UserController#delete');
Route::post('userAdmin', 'UserController#userInsert');
Anyone please tell me how to write js code for that

Develop Reference

JavaScript is the programming language of the Web.

HTML code dynamiccaly generated by JS not performing Interactive - javascript

Change this line $('#btn-add-week').click(function () { to this $(document).on('click', '#btn-add-week', function () {

Related

Redirect to form with input value from previous form in Laravel

How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

How to update the cart with ajax json response

dropdown binding and removing option from remaining dropdowns

How to create pop up box in PHP laravel 5

Categories

Resources