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 show data when using API?

Im trying to get data from an API using ajax request. I did it but im not sure how to show the information to the client. I want to search by artist and show their songs. Here is my code and link to the api. Please help me!
https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MusicApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MusicApp</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Lyrics</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row" style="margin-top:30px;">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<img class="thumbnail img-responsive" src="images/notes.jpg">
</div>
<div class="col-sm-8">
<input type="checkbox" class="form-check-input" id="sort">
<label class="form-check-label" for="sort">Sort</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="artist">Artist:</label>
<textarea class="form-control" rows="1" id="artist"></textarea>
</div>
</div>
</div>
</div>
<div class="panel-footer" style="height:55px;">
<button type="button" id="postComment" class="btn btn-primary pull-right publish"><span
class="glyphicon glyphicon-globe"></span> Search
</button>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Results</h3>
</div>
<ul class="list-group" style="min-height:241px;" id="contentList">
<li class="list-group-item" style="display:none" id="cloneMe">
<div class="row">
<div class="col-sm-2 col-xs-3">
<img src="images/notes.jpg" class="thumbnail img-responsive">
</div>
<div class="col-sm-7 col-xs-6">
<h4>Shakira</h4>
<p id="songName">some result </p>
<p id="lyricsLink">some result</p>
</div>
<div class="col-sm-3 col-xs-3">
<button type="button" class="btn btn-danger pull-right remove-post"><span
class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Delete</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";
$('#postComment').click(function(){
artistName=$('#artist').val();
console.log(artistName);
var settings = {
"async": true,
"crossDomain": true,
"url": "https://genius.p.rapidapi.com/search?q=" + artistName,
"method": "GET",
"headers": {
"x-rapidapi-host": "genius.p.rapidapi.com",
"x-rapidapi-key": "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"
}
}
$.ajax(settings)
.done(function (response) {
console.log(response.response.hits);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
console.log(r.result.header_image_url);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('#songName').html(r.result.full_title);
miniMe.find('#lyricsLink').html(r.result.url);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.find('checkbox').click(function(){
})
miniMe.show();
$('#contentList').append(miniMe);
});
});
return false;
});
});
</script>
</html>

You can iterate through the response with using this as your ajax block;
$.ajax(settings)
.done(function (response) {
// sort the response alphabetically
response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('p').html(r.result.full_title);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.show();
$('#contentList').append(miniMe);
});
});
You can see the working demo in codepen and you can look into this link if you want to learn about sort() function and how it works in JavaScript.

Using AngularJS to close Bootstrap Modal window

I'm fairly new to AngularJS, so forgive me if this is a simple question;
I have an AngularJS (v 1.6) app with a user login via a bootstrap modal window.
After the user successfully logs in, I want the modal window to be closed by Angular;
The User login is via a POST call to PHP which queries the database - this all works as expected, but i need the modal window to close if the login was successful. (The PHP responds with a JSON object)
In particular, im looking to replace this code in the Angular controller:
//window.location.href = '/IDD';
with a command to close the modal window.
HTML Code:
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="">JDCSupport</a>
<div class="nav navbar-nav" style="flex-direction: row;">
<p class="text-center">{{usrName}}</p>
<div data-ng-show="btnLogin">
<button class="btn btn-success btn-sm pull-xs-right"
style="padding: 10px;" data-toggle="modal"
data-target="#loginModal">
Login
</button>
</div>
<div data-ng-show="btnLogout">
<button class="btn btn-warning btn-sm pull-xs-right"
style="padding: 10px; margin-right: 10px;"
type="button">
Logout
</button>
</div>
<div data-ng-show="btnMenu">
<button class="navbar-toggler pull-xs-right" style="padding: 10px;" id="navbarSideButton" type="button">☰</button>
</div>
</div>
<ul class="navbar-side" id="navbarSide">
<li class="navbar-side-item">
Home
</li>
<li class="navbar-side-item">
Staff Roster
</li>
<li class="navbar-side-item">
Photos
</li>
<li class="navbar-side-item">
Messages
</li>
</ul>
<div class="overlay"></div>
</nav>
<div id="loginModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="col-lg-8 col-sm-8 col-12 main-section">
<div class="modal-content">
<div class="col-lg-12 col-sm-12 col-12 user-img">
<img src="images/man.png" alt="">
</div>
<div class="col-lg-12 col-sm-12 col-12 user-name">
<h1>User Login</h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="col-lg-12 col-sm-12 col-12 form-input">
<form ng-submit="loginForm()" name="loginform" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" data-ng-model="user.username" name="username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" data-ng-model="user.password" name="password" required>
</div>
<button type="submit" class="btn btn-success">Login</button>
<div class="alert alert-danger" data-ng-show="errorMsg">{{error}}</div>
</form>
</div>
<div class="col-lg-12 col-sm-12 col-12 link-part">
Forgot Password?
</div>
</div>
</div>
</div>
</div>
And my Angular Controller:
app.controller ("logController", function ($scope, $http) {
$scope.btnLogin = true;
$scope.btnLogout = false;
$scope.btnMenu = false;
$scope.errorMsg = false;
$scope.loginForm = function() {
var ans="";
var encodedString = 'username=' +
encodeURIComponent(this.user.username) +
'&password=' +
encodeURIComponent(this.user.password);
$http({
method : 'POST',
url : 'php/login.php',
data : encodedString,
headers : {'Content-type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
console.log(response);
ans = response.data;
if (ans.message == 'correct' ) {
$scope.btnLogin = false;
$scope.btnLogout = true;
$scope.btnMenu = true;
//window.location.href = '/IDD';
} else {
$scope.errorMsg = true;
$scope.error = ans.error;
}
},
function (response) {
//error handling
});
};
});

use the following on login successful
$('#loginModal').modal('hide');

You can achieve that with $('loginModal').modal('hide'); or $('loginModal').modal('toggle');

*ngIf is not working like other *ngIf's

I encountered a strange problem with my *ngIf on one particular variable isAdmin (which should allow me to display the list of users in userList). I'm not sure why its behaving different from all the other *ngIf statements in the same component.
heres a snippet of my js code for the component. This is where isAdmin is being switched from false to true if the user is an Admin.
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
this.currentUser = Meteor.user(); //update the current user automatically
this.isLoggingIn = Meteor.loggingIn();
this.isLoggedIn = !!Meteor.user();
this.checkAndSub();
});
});
}
checkAndSub(){
if(this.isLoggingIn){
Meteor.call('checkAdmin', function(error, result) {
if (error) {
this.errors.push(error.reason || "call from server has an error");
}
this.isAdmin = result;
console.log(this.isAdmin);
if(this.isAdmin){
Meteor.subscribe("userList");
}
else console.log("User is not admin");
});
}
}
Heres the corresponding HTML
<span *ngIf="viewDetails">
<div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
<div class="row">
<!--PIZZA DESCRIPTION PANEL-->
<div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="panel" id="description_panel">
<div class="panel-body">
<div>
{{error}}{{message}}
<span *ngIf="isAdmin">
<p><h2>User List</h2></p>
<ul>
<li *ngFor="let iterate of usersList">
_id: {{iterate._id}}
<p>Emails: {{iterate.emails}}</p>
<p>username: {{iterate.username}}</p>
<p>isadmin: {{iterate.isAdmin}}</p>
</li></ul>
</span>
</div>
<h1>Description: </h1>
{{currentPizza.description}}
<p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>
</div>
</div>
</div><!--&&&&pizza description collapes&&&&-->
<!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="picture_panel">
<div class="panel-body" style="padding:0px;">
<img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
</div>
</div>
</div><!--&&&&pizza picture collapse&&&&-->
</div>
<div class="row">
<div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="style_panel">
<div class="panel-body">
<h4>Style:</h4>{{currentPizza.style}}
<h4>Location:</h4>
<span *ngIf="currentPizza.location.state">
{{currentPizza.location.state}} ,
</span>
{{currentPizza.location.country}}
<h4>Brand: </h4>{{currentPizza.brand}}
</div>
</div>
</div><!--&&&&pizza style collapse&&&&-->
<div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="vote_panel">
<div class="panel-body">
<h3>Pizza Spectrum Score: </h3>
{{currentPizza.votes}}
</div>
</div>
</div><!--&&&&pizza votes collapse&&&&-->
</div>
<div class="row">
<div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="user_panel">
<div class="panel-body">
<h3>SubmittedBy: </h3>
{{submittedBy(currentPizza._id)}}
<ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
</li>
</ul>
<p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>
<button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
I know isAdmin is true, but nothing shows up. If I create a separate button to toggle it then my userLIst shows up. Why won't it display properly when the page is loaded?
Thanks

Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem

ngZOne.run doesn't mark a component for change detection. All it does is execute the callback function inside the Angular error handler.
You need to inject ChangeDetechRef and call markForCheck.
public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}
then elsewhere:
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
//.....
this.checkAndSub();
this.cdr.markForCheck(); // <--- mark component dirty
});
});
}

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/