Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Right got it working
{id: "6", colour: "blue", size: "20"}
colour: "blue"
id: "6"
size: "20"
is returned when selecting blue, so now I need to get the size to then show in the size option select like so
$('#sizes').append('<option value="'+subcatObj.size+'">'+subcatObj.size+'</option>');
So the size is there within the json response but is not getting returned to the size select
Make sure your size select has an id of "sizes" if yes, add this
alert(subcatObj);
under this line
$.each(data, function(index, subcatObj){
so that we can see what's returned
alerting results in
[object Object]
cool, what's the result when you alert "alert(subcatObj.size);" ?
alerts a number so the size in this case for black is '17'
it means there's no problem in the JS, can u show me your HTML.
So JS looks like: which we've established is fine:
$('#category').on('change', function(e){
console.log(e);
var cat_id = e.target.value;
//ajax
$.get('/related-sizes?cat_id=' + cat_id, function(data){
console.log(data);
$('#sizes').empty();
$.each(data, function(index, subcatObj){
//alert(subcatObj.size);
$('#sizes').append('<option value="'+subcatObj.size+'">'+ subcatObj.size +'</option>');
//console.log(subcatObj);
});
});
});
HTML is
@if($item->availableColours())
Colour:
<select name="colour" id="category">
@foreach($selects as $colour)
<option value="{{ $colour->id }}">{{ $colour->colour }}</option>
@endforeach
</select>
@endif
Size:
<select name="size" id="sizes">
<option value="">---</option>
</select>
does it add a new option with blank value and title, or nothing at all?
check the page source.
Wrapping the size select within a @if($item->availableSizes()) works!!!! YIPEEEEEE
But now I have another issue, if a black t-shirt has size 17 and 18 it shows twice.
Table
Browser:
When really it should just show black once then append the two sizes.
As i see the problem is that it shows all the colors for a given product, you need to add another verification for the size
$('#category').on('change', function(e){
var cat_id = e.target.value;
//ajax
$.get('/related-sizes?info=' + cat_id, function(data){
$.each(data, function(index, subcatObj){
$('#sizes').append('<option value="'+subcatObj.size+'">'+subcatObj.size+'</option>');
});
});
})
<select name="colour" id="category">
@foreach($selects as $colour)
<option value="{{ $colour->id }}-{{ $colour->colour }}">{{ $colour->colour }}</option>
@endforeach
</select>
public function selectedColour()
{
$info = explode('-', Input::get('info'));
$cat = Options::where('product_id', $info[0])
->where('color', $info[1])
->get(['id', 'size']);
return Response::json($cat, 200);
}
That still has
this repsonse.
And this Options::where('product_id', $info[0]) should use 'id' like so Options::where('id', $info[0]) to match the id in the table shown above
You should not use **Options::where('id', $info[0]) **, because if a color have 2 sizes then it won't work.
I think the 2 conditions i did are fine. what does your browser show when u enter that route ?
also, add this
$('#sizes').empty();
before
$.each(data, function(index, subcatObj){
Ok I'll try that just had to nip out
trying in browser shows []
So method looks like:
public function selectedColour()
{
$info = explode('-', Input::get('info'));
$cat = Options::where('product_id', $info[0])
->where('colour', $info[1])
->get(['id', 'size']);
return Response::json($cat, 200);
}
JS
$('#category').on('change', function(e){
console.log(e);
var cat_id = e.target.value;
//ajax
$.get('/related-sizes?info=' + cat_id, function(data){
$('#sizes').empty();
$.each(data, function(index, subcatObj){
$('#sizes').append('<option value="'+subcatObj.size+'">'+ subcatObj.size +'</option>');
});
});
});
HTML
@if($item->availableColours())
Colour:
<select name="colour" id="category">
<option selected>Select Colour</option>
@foreach($selects as $colour)
<option value="{{ $colour->id }}-{{ $colour->colour }}">{{ $colour->colour }}</option>
@endforeach
</select>
@endif
<br />
@if($item->availableSizes())
Size:
<select name="size" id="sizes">
<option value=""></option>
</select>
@endif
Figured it out.
<option value="{{ $colour->id }}-{{ $colour->colour }}">{{ $colour->colour }}</option>
should be
<option value="{{ $colour->product_id }}-{{ $colour->colour }}">{{ $colour->colour }}</option>
But still shows black for example twice in the first list
I also need to show size in desc order, like 12, 14, 16 not 16,14,12 which it currently shows.
Fixed order by
$info = explode('-', Input::get('info'));
$cat = Options::where('product_id', $info[0])
->where('colour', $info[1])
->orderBy('size', 'asc')
->get(['id', 'size']);
return Response::json($cat, 200);
Just need it to display the colours once not multiple times like shown above
added the full database back in and got a HUGE list now this isn't right.
<option value="30-Black">Black</option>
<option value="30-Blue">Blue</option>
<option value="36-Black">Black</option>
<option value="52-Red">Red</option>
<option value="52-Red">Red</option>
<option value="52-Red">Red</option>
<option value="52-Red">Red</option>
<option value="52-Red">Red</option>
<option value="55-Black">Black</option>
<option value="55-Black">Black</option>
<option value="55-Black">Black</option>
<option value="112-Grey">Grey</option>
<option value="116-Mustard">Mustard</option>
<option value="123-Grey">Grey</option>
<option value="123-Grey">Grey</option>
<option value="124-Grey">Grey</option>
<option value="124-Black">Black</option>
<option value="126-Grey">Grey</option>
<option value="126-Brown">Brown</option>
<option value="136-Black">Black</option>
<option value="136-Wine ">Wine </option>
<option value="136-Grey">Grey</option>
<option value="136-Aubergine">Aubergine</option>
<option value="138-Black">Black</option>
<option value="141-Black">Black</option>
<option value="144-Black">Black</option>
<option value="145-Black">Black</option>
<option value="145-Black">Black</option>
<option value="146-Wine ">Wine </option>
<option value="146-Wine ">Wine </option>
<option value="147-Pink">Pink</option>
<option value="148-Brown">Brown</option>
<option value="149-Grey">Grey</option>
<option value="156-Black">Black</option>
<option value="156-Cream">Cream</option>
<option value="156-Camel">Camel</option>
<option value="157-Patterned">Patterned</option>
<option value="157-Patterned">Patterned</option>
<option value="157-Patterned">Patterned</option>
<option value="157-Patterned">Patterned</option>
<option value="158-Black">Black</option>
<option value="158-Grey">Grey</option>
<option value="159-Grey">Grey</option>
<option value="159-Black">Black</option>
<option value="160-Black">Black</option>
<option value="160-Grey">Grey</option>
<option value="161-Grey">Grey</option>
<option value="162-Grey">Grey</option>
<option value="162-Mustard">Mustard</option>
<option value="163-Grey">Grey</option>
<option value="164-Black">Black</option>
<option value="165-Patterned">Patterned</option>
<option value="165-Patterned">Patterned</option>
<option value="165-Patterned">Patterned</option>
<option value="165-Patterned">Patterned</option>
<option value="166-Red">Red</option>
<option value="166-Grey">Grey</option>
<option value="167-Wine ">Wine </option>
<option value="168-Pink">Pink</option>
<option value="168-Black">Black</option>
<option value="169-Black">Black</option>
<option value="169-Orange">Orange</option>
<option value="170-Leopard Print">Leopard Print</option>
<option value="170-Leopard Print">Leopard Print</option>
<option value="170-Leopard Print">Leopard Print</option>
<option value="170-Leopard Print">Leopard Print</option>
<option value="171-Black">Black</option>
<option value="171-Black">Black</option>
<option value="171-Black">Black</option>
<option value="171-Black">Black</option>
<option value="171-Black">Black</option>
<option value="172-Mustard">Mustard</option>
<option value="172-Black">Black</option>
<option value="174-Yellow">Yellow</option>
<option value="174-Floral">Floral</option>
<option value="175-Patterned">Patterned</option>
<option value="175-Patterned">Patterned</option>
<option value="175-Patterned">Patterned</option>
<option value="176-Red">Red</option>
<option value="176-Red">Red</option>
<option value="176-Red">Red</option>
<option value="176-Red">Red</option>
<option value="176-White">White</option>
<option value="176-White">White</option>
<option value="176-White">White</option>
<option value="177-Patterned">Patterned</option>
<option value="177-Patterned">Patterned</option>
<option value="177-Patterned">Patterned</option>
<option value="178-Coral">Coral</option>
<option value="178-Nude ">Nude </option>
<option value="179-Patterned">Patterned</option>
<option value="180-Orange">Orange</option>
<option value="180-Red">Red</option>
<option value="181-Patterned">Patterned</option>
<option value="182-Grey">Grey</option>
<option value="183-Patterned">Patterned</option>
<option value="184-Camel">Camel</option>
<option value="185-Black">Black</option>
<option value="185-Grey">Grey</option>
<option value="185-Camel">Camel</option>
<option value="186-Orange">Orange</option>
<option value="187-Grey">Grey</option>
<option value="188-Blue">Blue</option>
<option value="189-Green">Green</option>
<option value="190-Mustard">Mustard</option>
<option value="191-Black">Black</option>
<option value="191-Grey">Grey</option>
<option value="191-Pink">Pink</option>
<option value="191-Nude ">Nude </option>
<option value="192-Black">Black</option>
<option value="192-Nude ">Nude </option>
<option value="193-Brown">Brown</option>
<option value="193-Brown">Brown</option>
<option value="193-Brown">Brown</option>
<option value="194-Black">Black</option>
<option value="195-White">White</option>
<option value="194-Black">Black</option>
<option value="195-Blue">Blue</option>
<option value="195-Blue">Blue</option>
<option value="195-Blue">Blue</option>
<option value="196-Pink">Pink</option>
<option value="196-Grey">Grey</option>
<option value="196-Mustard">Mustard</option>
<option value="196-Navy">Navy</option>
<option value="197-Dark grey">Dark Grey</option>
<option value="197-Light grey">Light Grey</option>
<option value="197-Purple">Purple</option>
<option value="198-Brown">Brown</option>
<option value="198-Green">Green</option>
<option value="198-Red">Red</option>
<option value="199-Green">Green</option>
<option value="200-Dark grey">Dark Grey</option>
<option value="200-Light grey">Light Grey</option>
<option value="201-Grey">Grey</option>
<option value="201-Orange">Orange</option>
<option value="201-Pink">Pink</option>
<option value="202-Black">Black</option>
<option value="202-Grey">Grey</option>
<option value="203-Black">Black</option>
<option value="203-Black">Black</option>
<option value="203-Black">Black</option>
<option value="203-Black">Black</option>
<option value="203-Black">Black</option>
<option value="203-Black">Black</option>
<option value="204-Floral">Floral</option>
<option value="204-Floral">Floral</option>
<option value="205-Pink">Pink</option>
<option value="206-Patterned">Patterned</option>
<option value="207-Black">Black</option>
<option value="208-Black">Black</option>
<option value="209-Patterned">Patterned</option>
<option value="209-Patterned">Patterned</option>
can you post the query that's responsible for this
@foreach($selects as $colour)
<option value="{{ $colour->id }}-{{ $colour->colour }}">{{ $colour->colour }}</option>
@endforeach
This is the main method to pass everything to the view by the way....
public function categories($slug, $id)
{
$product = Products::where('slug', '=', $slug)->orWhere('category_id','=',$id)->where('status', '1')->orderBy('name', 'asc')->get();
$categories = Categories::where('id','!=','1')->orWhere('id','<>','10')->orWhere('id','!=','11')->get();
$selects = Options::where('category_id', '=', $id)->get();
return View::make('site.categories', compact('product','categories','selects'));
}
Which uses Route::any('/category/{slug}/{id}','FrontController@categories'); then a foreach inside the view.
I am sorry but, i really lost it, i don't know what else can i suggest.
Is there a way you can upload the app or something?
I can you give you access on github if you can PM me tweet so you can have a look.
@RachidLaasri still having a few problems here, are you about?
@lstables Yes, i sent you a PM.
Please or to participate in this conversation.