I am currently developing an application with Laravel 5.8 version and i use JQuery UI dialog as "pop-up" with some form to add datas in list.
So i have for example this type of form-popup :
<div class="dialog" id="addTr" data-open="{{ isset($_GET['popUpTr']) ? $_GET['popUpTr'] : 'close' }}" title="Ajouter une tranche">
<form method="POST" action="{{ route('tranches.store') }}">
#csrf
<input hidden type="text" name="ID_PROJET" value="{{ isset($projet->ID_PROJET) ? $projet->ID_PROJET : null }}">
<div class="row minimized">
<div class="col-3">
<span>Type contact</span><span class="required-star">*</span>
</div>
<div class="col-8">
<select name="TYPE_CONTACT_" class="form-control form-control-sm" id="select-typeContactAddTr" required>
<option value="">Aucun</option>
<!-- si le projet est reservé uniquement aux entreprises (ouverture projet = 2) -->
#if($projet->OUVERTURE_ == 2)
<option value="1" {{ old('TYPE_CONTACT_') == 1 ? 'selected' : null }}>Entreprises</option>
#else
#foreach($typesContact as $tp)
<option {{ old('TYPE_CONTACT_') == $tp->CLECOD ? 'selected' : null }} value="{{ $tp->CLECOD }}">{{ $tp->LIBCOD }}</option>
#endforeach
#endif
</select>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Numéro <span class="text-9">(numérique)</span></span><span class="required-star">*</span>
</div>
<div class="col-2">
<input name="CPT_TRANCHE" id="input-cptAddTr" maxlength="2" value="{{ old('CPT_TRANCHE') }}" type="text" class="form-control form-control-sm {{ $errors->first('CPT_TRANCHE') ? 'is-invalid' : '' }}" required>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Libellé</span><span class="required-star">*</span>
</div>
<div class="col-8">
<input name="LIBEL_TR" id="input-libelAddTr" type="text" value="{{ old('LIBEL_TR') }}" class="form-control form-control-sm" required>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>De</span><span class="required-star">*</span>
</div>
<div class="col-5">
<input name="MT_SOUTIEN_MINI" id="montant-min-input" type="text" value="{{ old('MT_SOUTIEN_MINI') }}" class="form-control form-control-sm budget-input" required>
<span>€</span>
</div>
<div class="col-4">
<span>à</span><span class="required-star">*</span>
<input name="MT_SOUTIEN_MAXI" id="montant-max-input" type="text" value="{{ old('MT_SOUTIEN_MAXI') }}" class="form-control form-control-sm budget-input" required>
<span>€</span>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Montant réel</span>
</div>
<div class="col-8">
<input name="MT_REEL" id="montant-reel-input" value="{{ old('MT_REEL') }}" type="text" class="form-control form-control-sm budget-input">
<span>€</span>
</div>
</div>
<div class="row minimized">
<button class="btn btn-info" type="submit">Enregistrer</button>
<button class="btn btn-info cancel-button" type="reset">Annuler</button>
</div>
</form>
</div>
The idea is that if the user make an error in the data typing, the datas are returning with the error thanks to the old function of Laravel : https://laravel.com/docs/5.8/requests#old-input
The problem is that these datas have to be delete when the user close the pop-up or click on the "cancel" button.
So i have create function that load pop up and manage the user action on it. Here is the JS code using JQuery UI (last stable version) :
var loadTrPopUp = function(elementID) {
$(function() {
$("#" + elementID).dialog({
autoOpen: false,
modale: false,
resizable: false,
height: 420,
width: 650,
closeText:"",
close: function() {
console.log("close an reset tranche")
$('#select-typeContactAddTr option:first').prop('selected',true);
$("#montant-min-input").attr("value","")
$("#montant-max-input").attr("value","")
$("#montant-reel-input").attr("value","")
$("#input-cptAddTr").attr("value","")
$("#input-libelAddTr").attr("value","")
}
})
})
$(function() {
$(".cancel-button").on('click', function() {
$("#" + elementID).dialog("close");
})
})
}
For the simple <input> that works great and the field are reinitialize when the user close the pop up. But for others types of field like <textarea> or <select>, the datas are not reinitialize.
I search on how i can reinitialize these types of input and i have adapted my code but that still not working so i think that the problem come from the old function. But i'm not sure so if someone have an idea or can help me that would be great!
Thanks in advance for your help.
Related
Does anyone know, How to resolve this issue of the crashed javascript script?
I am using 2 checkboxes to load some DOM.
1st checkbox is to expand textarea with the CKEditor script which is loaded with the JS but I have a wire model to send data to the controller.
Here is HTML for 1st checkbox:
<div class="form-group mt-25 d-flex flex-row">
<label class="checkbox-container form-group__label">
{{ __('Extended description') }}
<input type="checkbox" name="extended-description-checkbox" id="extended-description-checkbox" class="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group mt-25 cke d-none" id="extended-description-checkbox-div">
<label class="form-group__label" for="extended-description">{{ __('Extended description') }}</label>
<textarea wire:ignore.self wire:model.debounce.250ms.defer="extendedDescription" name="extended-description" id="extended-description" cols="30" rows="10"></textarea>
</div>
2nd checkbox is also handled with the JS and has a temporary URL method since the expanded DOM element should contain uploaded images for the gallery.
Here is HTML of the 2nd checkbox:
<div class="form-group mt-25 d-flex flex-row">
<label class="checkbox-container form-group__label">
{{ __('Use default images') }}
<input type="checkbox" name="use-default-images" id="use-default-images" class="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="d-none" id="use-default-images-div">
<div class="form-group mt-25">
<label class="form-group__label">{{ __('Service images') }}</label>
<div class="form-group__uploaded-images">
#if ($additionalImages)
#foreach($additionalImages as $image)
<img src="{{ $image->temporaryUrl() }}" alt="Temporary image">
#endforeach
#endif
</div>
</div>
<div class="custom-file ml-auto">
<button type="button" class="ml-auto styled-link">{{ __('Add images') }}</button>
<div class="row mt-25">
<div class="col-4 col-md-8"></div>
<div class="col-8 col-md-4">
<input wire:ignore.self wire:model.defer="additionalImages" type="file" multiple>
#error('images.*') {{ $message }} #enderror
</div>
</div>
</div>
</div>
Here are the scripts for expanding of the both DOM elements:
const extendedCheckbox = document.querySelector('#extended-description-checkbox');
const extendedDiv = document.querySelector('#extended-description-checkbox-div');
extendedCheckbox.addEventListener('change', function() {
if(extendedCheckbox.checked) {
extendedDiv.classList.remove('d-none');
} else {
extendedDiv.classList.add('d-none');
}
});
const defaultImagesCheckbox = document.querySelector('#use-default-images');
const defaultImagesDiv = document.querySelector('#use-default-images-div');
defaultImagesCheckbox.addEventListener('change', function() {
if(defaultImagesCheckbox.checked) {
defaultImagesDiv.classList.remove('d-none');
} else {
defaultImagesDiv.classList.add('d-none');
}
});
I have created the article post section in my project. In post article i want to store data automatically save as drft in my articles table.
Here I have put the blade file with form and ajax code. This ajax code is not working means nothing is happening in background. When I enter title no data is stored and when I open console and check it only works string running. plz see this link also https://imgur.com/9MGxojj
<form action="{{ route('articles.store') }}" method="POST" enctype='multipart/form-data'>
#csrf
<div class="card shadow">
<div class="card-body pt-3">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9">
<div class="form-group">
<div >
<input id="title" type="text" placeholder="Enter title here" class="form-control form--control{{ $errors->has('title') ? ' is-invalid' : '' }}" name="title" value="{{ old('title') }}">
#if ($errors->has('title'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('title') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div>
<textarea name="description" id="mytextarea" class="form-control textarea {{ $errors->has('description') ? ' is-invalid' : '' }}" placeholder="Description">{{old('description')}}</textarea>
#if ($errors->has('description'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('description') }}</strong>
</span>
#endif
</div>
</div>
</div> <div class="col-xs-3 col-sm-3 col-md-3">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="category_id">Choose category:</label>
<select name="category_id" id="category_id" class="form-control #error('category_id') is-invalid #enderror" value="{{ old('category_id') }}" >
<option value="0">Select Category</option>
#foreach($category as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
#endforeach
</select>
#error('category_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group">
<label for="subcategory_id">Sub category:</label>
<select id="subcategory_id" name="subcategory_id" class="form-control">
</select>
</div>
<div class="form-group">
<small>Publish Date</small>
<div>
<input id="datepicker" type="text" class=" py-2 form-control{{ $errors->has('show_date') ? ' is-invalid' : '' }}" name="show_date" value="#if(old('show_date')=="") {{date('Y-m-d')}} #else {{ old('show_date') }} #endif">
#if ($errors->has('show_date'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('show_date') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div>
<small>Featured image</small>
<input id="image" name="image" type="file" class="form-control {{ $errors->has('image') ? ' is-invalid' : '' }}" value="{{ old('image') }}">
#if ($errors->has('image'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('image') }}</strong>
</span>
#endif
</div>
</div>
</div>
</div><!-- End Right Col -->
<div class="card">
<div class="card-body">
<strong>Tag :</strong>
<section id='outside-of-the-box'>
<aside class='rightSide'>
<input name='tags' class='tagify--outside form-control' value='' placeholder='write some tags'>
<small>Tag's with comma separator</small>
</aside>
</section>
</form>
</div>
</div>
Cancel
<input type="submit" class="btn btn-primary font-weight-normal px-3" name="publish" value="Publish">
<input type="submit" class="btn btn-outline-secondary font-weight-normal mx-2" name="save" value="Save as Draft">
</div>
</div>
</div><!-- End Row -->
</div>
</form>
This is the scripting ajax code...
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
function autoSave()
{
var title = $('#title').val();
var description = $('#mytextarea').val();
// var category_id = $('#category_id').val();
if(title != '' && description != '')
{
$.ajax({
url:"{{url('articles')}}",
method:"POST",
data:{title:title, description:description},
dataType:"text",
success:function(data)
{
// if(data != '')
// {
// $('#category_id').val(data);
// }
$('#autoSave').text("Post save as draft");
setInterval(function(){
$('#autoSave').text('');
}, 3000);
},
});
}
}
setInterval(function(){
autoSave();
}, 3000);
});
</script>
This is my resource route
This is my resource route
Route::resource('articles','ArticleController');
datatabel column fields are
title
description
category_id
show_date
slug
draft
I would recommend doing some changes in your ajax part, just copy my code.
$.ajax({
method:"POST",
url:"{{ route('articles.store') }}", //Here you are using just `articles` so which route ? You have to write something like mine. Because it's a resource route.
data:{title:title, description:description,_token:#json(csrf_token())}, //You also need to pass token here as well, like I have done for you
success:function(data)
{
console.log(data);
},
error: function(data){
console.log(data);
}
});
And from controller first return just a simple hello message to see, like return "Hello"; when you receive a message then the rest you can carry on.
One important thing I want to mention that you are using resource routes and controller, so your route names would be like this.
articles.index
articles.store
articles.create etc...
If you want to see all routes of your resource route, run this command in cmd within your project directory
php artisan route:list --path=articles
Hi there i'm new to web developing and have encounter this problem can anyone help me
so the code is
<div id="compatibility-clone" class="row" style="display: none;">
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_brand">
<option></option>
#foreach ($vehicleBrands as $key => $val)
<option value="{{ $val->id }}" {{ (old('vehicle_brand') == $val->id) ? 'selected' : '' }}>{{ $val->name }}</option>
#endforeach
</select>
</div>
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_model"></select>
</div>
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_type"></select>
</div>
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_year"></select>
</div>
</div>
is being cloned to this div
<div id="compatibility" class="form-group">
<label for="Compatibilities" style="width: 100%">Compatibilities</label>
<button id="addCompatibilities" type="button" class="btn btn-outline-info">Add Compatibilites</button>
</div>
My Js and Jquery is
$("#addCompatibilities").on('click', function(e){
e.preventDefault();
var compatibilitiesClone = $('#compatibility-clone').clone();
compatibilitiesClone.removeAttr('id');
$('#addCompatibilities').before(compatibilitiesClone.show())
$('#compatibility').find('.compatibility-item').select2({
placeholder: "Select",
allowClear: true,
width: '100%',
});
$('#compatibility').find('.row').each(function() {
$(this).find('select[name="vehicle_brand"]').change(function(){
console.log($(this).val());
$(this).find("select[name=vehicle_model]").empty();
generateModels($(this).val());
});
});
});
if i try to create 2nd or 3rd... row then i click the button, the error occur because apparently my drop down in cloned div compatibility-clone also changed. i wonder if there is a way too solve this??
P.S
sorry for the bad grammar
I have a blade form which has a repeater input box and a select box, the repeater works fine but how do i pass the data from those fields to back-end controller in laravel?
add.balde.php
<!--begin::Add-Invoice-Form-->
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" action="{{route('store_invoice')}}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-4">
<label>
Customer Name:
</label>
<select class="form-control m-select2" id="m_select2_1" name="customerId">
#foreach($customer_list as $customer)
<option value=" {{ $customer->id }} ">
{{ $customer->fName }} {{ $customer->mName }} {{ $customer->lName }}
</option>
#endforeach
</select>
</div>
<div class="col-lg-4">
<label>
Invoice Type:
</label>
<div class="m-radio-inline">
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" checked value="billable">
Billable
<span></span>
</label>
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" value="nonbillable">
Non Billable
<span></span>
</label>
</div>
</div>
</div>
<div id="m_repeater_1">
<div class="form-group row" id="m_repeater_1">
<div data-repeater-list="" class="col-lg-12">
<div data-repeater-item class="form-group m-form__group row align-items-center">
<div class="col-lg-4">
<label>
Summary Number:
</label>
<select class="form-control m-select2" id="m_select2_2" name="certificateId[]">
#foreach($certificate_list as $certificate)
<option value=" {{ $certificate->id }} ">
{{ $certificate->summary_no }} ( {{ $certificate->certificateType() }} )
</option>
#endforeach
</select>
</div>
<div class="col-lg-3">
<label>
Rate:
</label>
<input type="number" class="form-control m-input" name="rate" placeholder="Enter rate">
</div>
<div class="col-lg-3">
<br/>
<div data-repeater-delete="" class="btn btn btn-danger m-btn m-btn--icon">
<span>
<i class="la la-trash-o"></i>
<span>
Remove
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="m-form__group form-group row">
<div class="col-lg-4">
<div data-repeater-create="" class="btn btn btn-warning m-btn m-btn--icon">
<span>
<i class="la la-plus"></i>
<span>
Add
</span>
</span>
</div>
</div>
</div></div>
</div>
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
<div class="m-form__actions m-form__actions--solid">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<button type="submit" class="btn btn-primary">
Submit
</button>
<button type="reset" class="btn btn-secondary">
Cancel
</button>
</div>
</div>
</div>
</div>
</form>
<!--end::Add-Invoice-Form-->
How do I send the values in array format when multiple select box have been filed using repeater?This images shows the UI for the form
Thank you
you can try something like this
<input type="text" value="val" name="somename[]">
<select name="someSelectName[]">
<option value="value">select 1
</option>
</select>
on server side you will receive selected values as array with given name
Change your
<div data-repeater-list="" class="col-lg-12">
To
<div data-repeater-list="arrayName" class="col-lg-12">
and It should work.
This makes the all the input names to have an array format of arrayName[number][input] and the number increments for each input and finally in the request sent you will have all the inputs in the arrayName
I have a form that looks like this:
<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
<div class="form-group col-xs-3" >
<label for="powerPlantName">PowerPlant Name</label>
<input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantType">PowerPlant Type</label>
<select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
<option value="" disabled>--Select Type--</option>
<option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
{{ powerPlantType }}
</option>
</select>
</div>
<div class="form-group col-xs-3" >
<label for="organizationName">Organization Name</label>
<input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantStatus">PowerPlant Active Status</label>
<select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus">
<option value="" disabled>--Select Status--</option>
<option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses">
{{ powerPlantStatus }}
</option>
</select>
</div>
<div class="form-group col-md-3 col-xs-4">
<button [disabled]="loading" class="btn btn-primary">Search</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
<div class="form-group col-md-3 col-xs-3">
<button class="btn btn-primary" (click)="f.reset()">Reset</button>
</div>
</form>
The layout for which looks like this:
When I click the Reset button, the default values for the drop down disappears - as shown in the figure below.
How do I make sure that the default value is retained even after hitting the Reset button?
Any ideas?
Have an additional value in the list of elements with id = -1
types:any[]=[
{id:-1,Name:'Select One'},
{id:1,Name:'abc'},
{id:2,Name:'abdfsdgsc'}
];
HTML will look as
<select [(ngModel)]="selectedElement.id">
<option *ngFor="let type of types" [ngValue]="type.id"> {{type.Name}}</option>
</select>
On Reset
reset(){
this.selectedElement = {id:-1,Name:'Select One'};
}
LIVE DEMO
Remove the form reference from f.reset(), change to reset(). Where reset() is the component class method:
reset(){
this.model.powerPlantType = '';
this.model.powerPlantStatus = '';
// and other input resettings too
}
And then change
<button type="button" (click)="reset()">Reset</button>
DEMO
Change the button type from "button" to "reset":
<button type="reset>Reset</button>
Demo