I'm trying to add dynamically input fields and when I select an element from the selected box it should show an image in the same line of the additional input fields.
So I'm using the following code.
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
console.log(index);
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row"><div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting" >
<option selected>Choose...</option>
@foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-2"><label for="inputState">Type de contrat</label><select id="id_modele_contrat" class="form-control" name="rows[${index}][id_modele_contrat]"> <option selected>Choose...</option><option>...</option>
@foreach($models_contrat as $model_contrat)
<option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
@endforeach</select></div>
<div class="form-group col-md-2">
<label for="date_de_fin_du_contrat">Date de fin du contrat</label>
<div class="input-group date">
<input type="text" class="form-control" id="date_premiere_diffusion" name="date_premiere_diffusion">
<span class="input-group-text input-group-append input-group-addon" id="spanEstPaymentDate">
<i class="simple-icon-calendar"></i>
</span>
</div>
</div><div class="card-body "><button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button></div>
</div></div></div> `);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
$("body").on("click", ".remove_node_btn_frm_field", function() {
var index = $(this).closest(".outer").data('index')
//get index
$(".casting_details [data-index= " + index + "]").remove() //remove genrated casting_details2 as well
$(this).closest(".outer").remove()
})
$("body").on("change", ".maintCostField", function() {
var index = $(this).closest(".outer").data('index') //get outer div index..
console.log(index);
//check if the data-id not there
if ($(".casting_details [data-index= " + index + "]").length == 0) {
//append new...
$(".casting_details").append(`<div data-index= "${index}" class="casting_details2"> <div class="d-flex flex-row mb-6 casting_details"> <a class="d-block position-relative" href="#"><img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake" class="list-thumbnail border-0" /> <span class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span></a></div></div> `);
}
/*let id_casting = $(this).find("option:selected").data("id");*/
var id_casting = $(this).find("option:selected").data("id");
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
$.ajax({
url: "getCasting/" + id_casting,
type: "GET",
success: function(html) {
console.log(html);
$(".casting_details [data-index= " + index + "]").html(`<div class='d-flex flex-row mb-6'><a class='d-block position-relative' href='#'><img src="{{ URL::to('/') }}/castingimages/${html.castings[0].photo} " alt='' class='list-thumbnail border-0' /> <div
class="card-body align-self-center d-flex flex-column justify-content-between min-width-zero align-items-lg-center">
<a href="Apps.MediaLibrary.ViewImage.html" class="w-100">
<p class="list-item-heading mb-1 truncate">${html.castings[0].nom} ${html.castings[0].prenom}</p>
</a>
<p class="mb-1 text-muted text-small w-100 truncate">${html.castings[0].date_naissance}</p>
</div></a></div>`);
}
});
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</br>
</br>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField select2" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
@foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-2">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="rows[1][id_modele_contrat]">
<option selected>Choose...</option>
@foreach($models_contrat as $model_contrat)
<option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-2">
<label for="date_de_fin_du_contrat">Date de fin du contrat</label>
<div class="input-group date">
<input type="text" class="form-control" id="date_premiere_diffusion" name="date_premiere_diffusion">
<span class="input-group-text input-group-append input-group-addon" id="spanEstPaymentDate">
<i class="simple-icon-calendar"></i>
</span>
</div>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>The problem is the image is not displayed in the same line as the dynamically added input fields it is displayed shifted from the added line.
I get a result like that :
The second image is shifted from the line added with the input fields.
The problem is in my Html code, if you have any idea please help !