I'm new in Ajax. I'm trying to pass ajax data as variable to view, but it shows "undefined variable" error.
Here is my functions in controller:
public function anything(Request $request)
{
$id = $request->modalId;
$single_menu = Menu::find($id);
$decodedMenu = json_decode($single_menu);
$modal_name = $decodedMenu->name;
$modal_desctiption = $decodedMenu->description;
dump($modal_desctiption);
}
public function menu(Request $request)
{
$category = Category::orderBy('name')->get();
// SEARCH
$search = \Request::get('search');
$menu = Menu::orderBy('name');
if ($search) {
$menu = $menu->where('name', 'LIKE', "%{$search}%");
}
$menu = $menu->paginate(12);
return view('programs.menu', compact('menu', 'category', 'search'));
}
My menu view:
@extends('layouts.app')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".modal-show-menu").click(function () {
var modalId = $(this).attr('id');
$.ajax({
url: 'menu/' + modalId,
method: "get",
data: {'modalId': modalId},
success: data => {
$('#myModal').html(data)
}
});
});
});
</script>
@section('content')
<section class="banner banner-image menu-page-banner">
<div class="bannerwrap">
<figure><img src="{{ Config::get('settings.menu_background') }}" alt="Menu page banner"/></figure>
<div class="banner-text text-center">
<h1 class="text-uppercase"><strong>{{ __('programs.menu.title') }}</strong></h1>
<p class="text-sp ">{{ __('programs.menu.subtitle') }}</p>
</div>
</div>
</section>
<main>
<section class="block menu-page-block">
<div class="container">
<div class="row">
@include('sections.menu.sidebar')
<div class="col-xs-12 col-sm-9">
<div class="row menu-listing-wrap gd-view">
@foreach($menu as $single_menu)
<div class="col-xs-12 col-sm-4 menu-item wow fadeInLeft">
<div class="text-center menu-item-wrap">
<figure><a href="#">
<img class="img-responsive"
src="{{ $single_menu->image }}"
alt="Menu image"></a></figure>
<div class="content mar-top">
<h1>{{ $single_menu->id }}</h1>
<h4><a href="#">{{ $single_menu->name }}</a></h4>
<span>{{ $single_menu->subtitle }}</span>
<div class="bottom">
<div class="facts-table">
<table>
<tbody>
<tr>
<td><span>{{ __('programs.menu.calories') }}</span></td>
<td><span>{{ $single_menu->calories }}gr</span></td>
</tr>
<tr>
<td><span>{{ __('programs.menu.proteins') }}</span></td>
<td><span>{{ $single_menu->proteins }}gr</span></td>
</tr>
<tr>
<td><span>{{ __('programs.menu.fats') }}</span></td>
<td><span>{{ $single_menu->fats }}gr</span></td>
</tr>
<tr>
<td><span>{{ __('programs.menu.carbohydrates') }}</span></td>
<td><span>{{ $single_menu->carbs }}gr</span></td>
</tr>
</tbody>
</table>
</div>
<a id="{{ $single_menu->id }}"
href="{{ route('anything',$single_menu->id) }}"
class="modal-show-menu btn" data-toggle="modal"
data-target="#myModal">{{ __('programs.menu.more') }}</a>
</div>
</div>
</div>
</div>
@endforeach
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 text-center menu-pegination wow fadeInUp">
{{ $menu->links() }}
</div>
</div>
</div>
</div>
</div>
</section>
</main>
@include('sections.menu.modal')
@endsection
My modal view:
<div class="modal fade menu-pop-up" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<figure>
<img src="http://madang_h1.kenzap.com/images/menu-popup.png" alt="Menu image">
</figure>
<!--inner starts-->
<div class="inner">
<div class="row">
<div class="col-xs-12 col-sm-12 top text-sp">
<h3 class="modal-name">{{ $single_menu->name }}
<span class="modal-subtitle"> {{ $single_menu->subtitle }} </span>
</h3>
</div>
<div class="col-xs-12 col-sm-12">
<hr>
</div>
<div class="col-xs-12 col-sm-12 content">
<p>{{ $single_menu->description }}</p>
</div>
<div class="col-xs-12 col-sm-6 ingredients">
<h6>INGREDIENTS</h6>
<ul>
<li>{{ $single_menu->ingredients }}</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6">
<h6>NUTRITION FACTS</h6>
<div class="facts-table">
<table>
<tbody>
<tr>
<td><span>Calories</span></td>
<td><span>{{ $single_menu->calories }}</span></td>
</tr>
<tr>
<td><span>Proteins</span></td>
<td><span>{{ $single_menu->proteins }}g</span></td>
</tr>
<tr>
<td><span>Fats</span></td>
<td><span>{{ $single_menu->fats }}g</span></td>
</tr>
<tr>
<td><span>Carbohydrates</span></td>
<td><span>{{ $single_menu->carbs }}g</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
my route:
Route::get('menu', 'ProgramsController@menu')->name('menu');
Route::get('menu/{id}', 'ProgramsController@anything')->name('anything');
My problem is when i dump it, it shows all data , but when I'm trying to pass it as variable to modal view ,like $modal_name, $modal_description or $decodedMenu->name , it returns and error as i mentioned before. My question is it any more simple way to make modal dynamically load data, and if i do something wrong? Thanks everyone for your answer in advance
execute{{ $menu }} in blade file, you get any data
move to @section('content') in script or new footer session create and added
@extends('layouts.app')
@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".modal-show-menu").click(function () {
var modalId = $(this).attr('id');
$.ajax({
url: 'menu/' + modalId,
method: "get",
data: {'modalId': modalId},
success: data => {
$('#myModal').html(data)
}
});
});
});
</script>
<section class="banner banner-image menu-page-banner">
<div class="bannerwrap">
<figure><img src="{{ Config::get('settings.menu_background') }}" alt="Menu page banner"/></figure>
<div class="banner-text text-center">
<h1 class="text-uppercase"><strong>{{ __('programs.menu.title') }}</strong></h1>
<p class="text-sp ">{{ __('programs.menu.subtitle') }}</p>
</div>
</div>
</section>