Develop Reference

Uncaught TypeError: Cannot read property '' of undefined using Laravel and AJAX

I have the following select box:
<select class="form-control select2-single" data-width="100%" name="numero_projet" id="numero_projet">
<option label=" "> </option>
#foreach($projets as $projet)
<option data-id="{{$projet->id_projet}}" value="{{$projet->id_projet}}">{{$projet->numero_projet}}</option>
#endforeach
</select>
And the following ajax code to get data :
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
success:function(html){
var content = html.content;
$("div.name_casting").append(content.id_casting);
}
})
})
})
</script>
And the following controller:
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return response()->json(['projets_casting' => $projets_casting]);
}
}
And I have the following view where I should display the data that I get from controller:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select from Library</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#foreach($projets_casting as $projet_casting)
<div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
<div class="accordion" id="accordion">
<div class="mb-2">
<button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="icon-container">
<i class="simple-icon-arrow-down"></i>
</span>
<span class="folder-name">Castings</span>
</button>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100">
<p class="truncate mb-0">{{$projet_casting->id_casting}}</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary sfl-submit">Selectionner</button>
</div>
</div>
</div>
It should display in this div the id_casting of each projects
<div class="w-100 name_casting">
<p class="truncate mb-0">ok</p>
</div>
But I get the following error:
Uncaught TypeError: Cannot read property 'id_casting' of undefined
What is wrong with my code?
Update
I have the following HTML in my view:
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container casting2">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100 castings">
<p class="truncate mb-0">OK</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I'm trying the following script:
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = ` <div">
<p class="truncate mb-0">${json.id_casting}</p>
</div>`;
$("div.name_casting").append(content);
}
})
})
</script>
But I have nothing. I have always OK and I have no error!
UPDATE2
Now I can get the data that I want, but I get multiple rows in the same time so I should having multiple divs in my HTML.
I'm getting the following result:
While I shoult get the 18 in a div and 19 in other div and not in the same place.

Analogous to #professor's answer:
Use the JSON (recommended)The Controller doesn't have to be modifiedIn your blade/JavaScript, change the following:
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = `<div>
${json.castings.map((casting) => casting.id_projet)}
</div>`;
$("div.name_casting").append(content);
}
Use the HTMLThe blade view and JavaScriptIn your controller, change the following:
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return view('your-view', ['projets_casting' => $projets_casting]);
}
}

how to delete a specific div from the page

I need to build notes app like site and I have to delete specific div with a click on x icon.
I think that i need to delete a object from the array with splice function, but I can't delete a specific object from it.
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv id="noteDvid">'
str += '<i class="fa fa-times-circle icon" aria-hidden="true" onclick="remove()"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str
}
function remove() {
notesArr.splice(0)
}
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId">
<div class="col-3 noteDv" id="noteDvid">
<i class="fa fa-times-circle icon" aria-hidden="true"></i>
<div class="textBox">
<div class="textDv">text</div>
<div class="timeDV">time</div>
<div class="dateDv">date</div>
</div>
</div>
</div>
</div>

You cannot reuse the ID, use the class instead
You likely want to do noteId.innerHTML += str to concatenate
remove onclick="remove()" from <i class="fa fa-times-circle icon" aria-hidden="true"></i> and add a class of remove to that <i>
add the index as an attribute
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
// a click in the output div
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
notesArr.splice(tgt.dataset.idx,1); // take it IDX and remove the item
printTohtml(); // re-render
}
})
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv">'
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str;
}
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) {
notesArr.splice(tgt.dataset.idx,1);
printTohtml()
}
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId"></div>
</div>
PS: If you want to delete the div instead of rewriting, you can do
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
this.closest(".noteDv").remove()
}
})

If you simply want to remove element from screen without ordering rest remaining elements in a view - then most easy way is to use node.removeChild(child) method :
<div id="container">
<h3>Click on a link to remove it !</h3>
<a href='#' onclick='this.parentNode.removeChild(this);'>Hot summer</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Pretty Autumn</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Cold winter</a>
</div>

Replace null with a string using JavaScript

Does anyone know why my if statement doesn't do anything when running at the end of my program? I'm wanting to replace null returns with no office and I can't seem to run it afterwards.
for (z = 0; z < items.length; z++) {
var team = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].TeamName + '</p></div><div class="col-sm-4 office"><p style="margin-bottom: 0px;">' + items[z].Office + '</p></div></div>';
var single = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].Title + '</p></div><div class="col-sm-4"><p class="office" style="margin-bottom: 0px;">' + items[z].Office +
'</p></div></div>';
if (items[z].Office == 'null') {
$(".office").append('No office');
}
}
<div class="row" style="padding-bottom: 10px;">
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Single Users</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsSingles" style="padding-left:0px; border-right: solid 1px #DCE1E5;">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Teams</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsTeams" style="padding-left:0px;">
</div>
</div>
</div>
</div>

Remove the quotes from around null (and add another = to check for type, so === instead of ==)

The function deleting elements in jquery from html does not work correctly

I have this code:
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form3">Title</label>
<input type="text" id="form3" class="form-control validate val1" name="val1">
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">Desc</label>
<input type="email" id="form2" class="form-control validate val2" name="val2">
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div></div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div></div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div></div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div></div>
</div>
</div>
</div>
<form name="saveForm" action="#" method="post" style="margin-left: 15px">
<div class="itemsBox" >
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$(document).on("click", ".removeMe", function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.saveBtn').click(function(e) {
e.preventDefault();
var val1 = $(".val1").val(); // title
var val2 = $(".val2").val(); // description
var cX = $(".coorX").text();
var cY = $(".coorY").text();
var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
"<div>" +
"<a href='#' class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>' data-placement='top' data-html='true' rel='tooltip'></a>" +
"</div>" +
"</div>";
var nextObjNumber = $(".itemsBox").children("div").length + 1;
var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber +
"<div class='removeMe' id='"+nextObjNumber+"'>X</div>" +
"</div>";
$(".scalize").append(newPoint); // inserting new point
$(".itemsBox").append(newObject); // inserting new object
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
$("#modalSubscriptionForm").modal("hide");
$(".val1").val("");
$(".val2").val("");
alert('Add!');
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
});
</script>
I have a problem with deleting some elements. After clicking anywhere on the jacket's photo, a form will pop up adding a new point in the picture (where you click). Under the photo I have a list of point names from "X" which causes deleting points from the image. This works fine, but only for elements added at page startup (when the website is refreshed).
I have a problem with the newly added points in the image. They are deleting from the list below the picture. Points do not delete from the picture.
How to fix it?
Prview: http://serwer1356363.home.pl/pub/component/index2.html

When you're creating your new point, you have var newPoint = "<div class='item-point' data-top='" + cY + "' data-left='" + cX + "' id='point1'>" +. The id is being set to 'point1' for every new point added. If you update that to set the id dynamically to match the id of the remove button that you're creating, it should work as expected.

Dynamically create forms the on Click button not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
i am trying to create Bootstrap Panel dynamically by on click function but every Panel should create multiple forms by on click function.. In my code the first Panel create forms by clicking on button but the rest of panels doesn't create forms..
var counter=1;
$(".panel-increment").on("click", function(e){
e.preventDefault();
var panelHtml = '<div class="panel panel-info"> ' +
'<div class="panel-heading"> ' +
'<h4 class="panel-title"> ' +
'<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
'</div> ' +
'<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse"> ' +
'<div class="panel-body">' +
'<div class="row" > ' +
'<div class="col-md-12 sch-box">' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
'</div> ' +
'</div> ' +
'</div> ' +
'<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
'</div> ' +
'</div>';
$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);
counter++;
});
$(".panel-addbtn").on("click", function(e){
e.preventDefault();
var formHtml = '<div class="row" >' +
'<div class="col-md-12 sch-box"> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>' +
'</div>' +
'</div>';
$(this).closest(".panel-collapse").find(".panel-body").append(formHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 it-right-side">
<div>
<div class="col-md-12" id="dynamicInput">
<!--Start Panel-->
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Day 1
<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" id="formcreation">
<!--Schedule-->
<div class="row" >
<div class="col-md-12 sch-box">
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
</div>
</div>
</div>
<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button>
</div>
</div>
</div>
</div>
<!--End panel-->
</div>
<button type="button" class="btn center-block panel-increment"><i class="fa fa-plus"></i> </button>
</div>

This is because:
$("selector").on("click", function(){
});
works for static html, in case of dynamic html use .on() like:
$("document").on("click", ".panel-addbtn", function() {
});

You can try defining an onclick event in the dynamic html like
<div onclick="myFunction()">
</div>
now you can create a javascript function and it would always work now matter the html is static or dynamic
function myFunction(){
//do something
}