- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的任务遇到一些问题。我不太擅长 JavaScript。请帮忙。
我将类别显示为按钮,并且我希望在按下按钮时显示分配给每个类别的产品,并且产品也以按钮的形式显示。在下一个任务中,我必须确保按下产品按钮时,该产品会添加到列表中,而且无需刷新页面。
Controller :
public function categories($id)
{
$table = Table::find($id);
$categories = Category::all();
return view('products', compact('table', 'categories'));
}
public function products($id)
{
$products = Products::find($id);
$response = '<button class="btn btn-dark product-button">{{$product->name}}</button>';
return response()->json([
'response' => $response
]);
}
路线:
Route::get('/masa/{id}','HomeController@categories')->name('table');
Route::get('/produse', 'HomeController@produse')->name('products');
Blade
@extends('layouts.app')
@section('content')
<div class="container-fluid">
<div class="row title">
<h2 style="text-align: center; margin: auto;">{{$table->name}}</h2>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4 col-md-4 col-lg-4 product-table">
<div class="row">
<button class="btn btn-dark product-button">
{{$table->name}}
</button>
</div>
</div>
<div class="col-sm-8 col-xs-8 col-md-8 col-lg-8 product-table">
<div class="row">
{{--Categorii--}}
@foreach($categories as $category)
<button class="btn btn-dark product-button" id="cat-{{$category->id}}">{{$category->name}}</button>
@endforeach
</div>
<hr><br>
<div class="row" id="products">
<button class="btn btn-dark product-button">Product Button</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
{{--<script src="{{asset('/js/script.js')}}"></script>--}}
<script type="text/javascript">
$('select[cat-{{$category->id}}]').on('click', function () {
$.ajax(
url: "{{route('products')}}",
type: 'post',
data: {
'category': '{{$category->name}}',
"_token": "{{ csrf_token() }}"
},
success: function (data) {
$('.product-table').after(data.response);
}
});
});
</script>
@endsection
最佳答案
您的数据库结构应该是,
迁移
类别
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('categories');
}
产品
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->integer('category_id')->unsigned();
$table->string('name');
$table->timestamps();
$table->foreign('category_id')->references('id')->on('categories');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
类别模型
class Category extends Model
{
//
public function products()
{
return $this->hasMany('App\Product');
}
}
产品型号
class Product extends Model
{
//
public function category()
{
return $this->belongsTo('App\Category');
}
}
现在,您应该拥有如下所示的 Controller 文件:
DropDownController
class DropDownController extends Controller
{
//
public function index(){
$categories = Category::all();
$products = Product::all();
return view('dropdown.dropdown', compact('categories','products'));
}
public function getProducts($id){
if($id!=0){
$products = Category::find($id)->products()->select('id', 'name')->get()->toArray();
}else{
$products = Product::all()->toArray();
}
return response()->json($products);
}
}
你的路线应该是这样的,
路线
Route::get('/dropdown','DropDownController@index');
Route::get('category/{id}/products', 'DropDownController@getProducts');
此后,在您想要显示类别的关联产品的编辑表单中,进行如下操作。
<div class="col-md-12">
<div class="col-md-6">
<label>Category</label>
<select class="form-control" name = "category">
<option value="0">Please Select Category</option>
@foreach($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label>Products</label>
<select class="form-control" name = "product">
<option value="0">Please Select Product</option>
@foreach($products as $product)
<option value="{{$product->id}}">{{$product->name}}</option>
@endforeach
</select>
</div>
</div>
你的ajax脚本就像,
AJAX
<script>
jQuery(document).ready(function ($) {
$('select[name=category]').on('change', function () {
var selected = $(this).find(":selected").attr('value');
$.ajax({
url: base_url + '/category/'+selected+'/products/',
type: 'GET',
dataType: 'json',
}).done(function (data) {
var select = $('select[name=product]');
select.empty();
select.append('<option value="0" >Please Select Product</option>');
$.each(data,function(key, value) {
select.append('<option value=' + key.id + '>' + value.name + '</option>');
});
console.log("success");
})
});
});
</script>
这是相当大的,但很容易理解它是如何工作的。希望您能理解。
关于javascript - 使用 ajax 在同一页面中显示特定类别的产品 - ajax、laravel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48766800/
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 9 个月前关闭。 Improve
我使用 partykit打包并遇到以下错误消息: Error in matrix(0, nrow = mi, ncol = nl) : invalid 'nrow' value (too large
我一直在尝试寻找一个量表或分类指标,为 VADER 情绪分析分配一些情感程度,而不仅仅是积极、消极或中性。如果有人可以分享他们的观点或资源来帮助按以下方式对 VADER 复合分数进行分类,我将非常感激
伙计们,我想自动循环..但我不知道是我放错了 while 还是循环错了? 我的数据库 标签:kt_barang kd_kategori | nama_kategori 1
我正在创建一个列出本地企业并按类别、子类别和关键字对它们进行分组的应用程序。以下是企业排序规则: 一个企业可以属于多个类别和子类别 一个企业可以有多个关键字 并非每个类别都有子类别,但有子类别的只有两
我有一系列单词 - 我的刺激 - 它们显示在屏幕上。然而,每个词都有另一个“条件”,即它们是类别 A、类别 B 或类别 C。这可能很简单,但我找不到答案并坚持下去。我的最终目标是在每次运行脚本时将类别
我正在使用 Laravel 5.5 和 MySql。如果不向 Services 表中添加 subCategoryID 列,我无法弄清楚如何将类别和子类别与服务相关联。 目前这是我的表结构 服务类别 i
我有两个部分/类别结构的链接表。 the section table structure id sec_title 1 section 1 2 section 2 the category str
我有一个类层次结构如下 @interface PTLDatasource : NSObject ... @interface PTLFetchedDatasource : PTLDatasource
我有一个 DataFrame df 一列,category 使用以下代码创建: import pandas as pd import random as rand from string import
我经常在多个类中设置获取请求以从核心数据(加上一些其他结果)中检索“allRecipes”或“lastModifiedDate”。 为此使用专门的类别 NSManagedObjectContext+R
可以在 Objective C 中创建类别之间的依赖关系吗?也在类别和它们的基类之间? 我知道在运行时应该没有区别,它们可能只是在编译时合并在一起。例如,假设我将 B 类分解为: B(base cla
这个问题在这里已经有了答案: 关闭 10 年前。
example img of a category selection by user 嘿,我正在尝试设置一个选择,用户必须选择一个类别和第二个类别,但我不知道如何获取他单击的信息。用户单击类别后,它
尝试将投资组合库添加到我正在制作的自定义 wp 主题中。我已经筋疲力尽地试图寻找甚至可以修改一些的解决方案和插件。我认为我在寻找解决方案时遇到的一个问题是我不完全确定哪些搜索词可以帮助我找到与我想要实
当我查看 Cocoa Touch API 时,我可以在同一个头文件中找到一些与类别一起声明的类,例如 @interface NSArray : NSObject @property (readonl
我的 log4j.properties 中有以下内容 log4j.rootLogger = debug, stdout, fileLog log4j.appender.stdout = org.apa
如果我在类中添加类别方法,比如NSXMLNode: @interface NSXMLNode (mycat) - (void)myFunc; @end NSXMLNode 的子类,例如 NSXMLEl
先说场景,wordpress的分类结构是这样的 Level 1: Top Level 2: -Nextme_1 Level 3: --Nextme_2 --Nextme_3 Leve
我有一个解析网络,现在我想浏览标签,或显示图表。我怎样才能得到图表?或者在树中导航。显示第一步然后其他等。并了解这棵树是如何 build 的。 import urllib from lxml impo
我是一名优秀的程序员,十分优秀!