Advance Category Filter in Laravel with Check boxes using JQuery & Ajax

favorite corn guys of the one will be fine and welcome back to aviation programmer so in this video I'm going to create another great beautiful content which is the filter and this topic is a lot of requests from my viewers that they have asked me to create a filter a multi filter so I just found this video very useful this all has been done using Ajax and jqe which you will not find in the other YouTube channel right so this this whole channel has the content most of the content which you will not easily find free or you cannot find on the other youtubers right on the other YouTube channel which is all related to the programming videos alright so just jump into the demo first so I just created a very basic now bar which is which is just static right so this is just Forge for the demonstration which we have the main constrain a concern on this on this section right so we have the refine by that means that we are the zero items to be we haven't checked anything yet and this is actually coming football because we have checked to this sports because sport is related to the football so first I want to show you the database of that so you guys could understand better so I just created the laravel app as a database which consists of the categories and the subcategory so in categories we have the name we have the title so name has these sports and we have the title which which which shows the sports are good to help disaster we have games we have house as the main categories and for the subcategories I have the name as well for the subcategories like sports all sports have football and cricket and other I just I just insert only one rule for that you can add as much as you can and definitely the category and there's karate which is a foreign key which where we have user join to use the categories as a main category and from that IDs just take it as an example we have the main categories of sport which has the ID of one and if I go back to the subcategories you see that for the football and the cricket I give it the category and the score higher you to be because this is the main category ID for that right so this is the basic these are the two main tables for this whole work all right so if I just click on the sports you see that we have we have two two results showing the image for the football the image for the cricket and B as well we have the title down there too so sports are good to help right so and also you see the one item has been added and we also have the sports and we can also close that up from here right so if I just close that and you see now it's also closed and if I uncheck this you see there no data found because we haven't point any filter let us apply the filter for all of them right sports disasters and for the disasters you see that flute caused damage through resources and I also use as a house but in case of the games I don't have any insertion in my database so if I just click on that you see there is no any filter results shown so if I just unchecked all of them and you see now we are only left with the games and also this showing on this rapine by this guy and when i Adam is showing but there is no results for the games all right so that's what you're going to create using jQuery and an ax and I hope you guys will enjoy let's jump into the code alright guys so this is my very basic model structure so all I'm gonna go first to the resources use I have some pages the first page is the cause and the scope category I don't want to take this video a lot longer so I just want to zoom this code alright so you see that I have very basic Nia bar this has no concern with the filters let's jump into the in the into the main section here so I use I give it a class of underscore t - I demand you see now by default is showing zero items because once we start checking on the filter that shows us the number of items that BM inside it so this is the main card so I I just use this main underscore category which has all the main categories coming from that like we have all the time in categories showing on the on the left side of the div just just show you here you see that these are all the main categories just coming from the main catagories database just show you up there so these are categories I just use a loop here and and from the controller it shows me all the result I want to show you later the controller so this want to take you all the results and okay I just go to the controller press app STD be controllers category controller go on top just want to word wrap so you guys can see so here you is I have user subcategories I use categories because the main categories has all the results we want to fetch and subcategories will only fetch the results once we checked that and it will filter that out right so this is the main function category okay now I go back to the page and you see we have listed all the main category using the loop we use for each as a loop and I use the input type equal to checkbox and that shows that the counter is 0 and whence we checked it and that will show us the result otherwise it should be empty right so we use the attribute name to be named whatever the name of the main category this is the name of the column and definitely we also need the category ID because we need to fetch result on based off the ID like a let's suppose the main category for the sport is one so this this this give us the category ID to be one and that that's the basically showing us the results category underscore name all the result that you see on the left side right and down here you see we have also have a subcategory name so you see this all be showing here those so this is a football right so if I just apply default if I just refresh this you see this is this is showing football just because this belongs to football sports and if I just uncheck this you see no data found so this is not as boring I think so I need to remove that but that's fine okay so I also give it the class of causes underscore day but I want to show you what it does so I have to go to the JavaScript file filter chess reason why because we're using HX + JQ so all I need to do to go to filter gorgeous so here you see how all the main results so I give it the category filter start empty so this cat filter is coming from there say you see so until this cat and disco cat filters I di I use it as an ID and by default it's empty and once this category under Scott check box so this has been coming from definitely because we need to fact the result so I give it the class of category and a score check box and once this we use a jQuery that once it checked in to push the ID so this ids is a group of areas because we have multiple categories so this will push all off the array inside and insert all the IDS insert into the array because we have the we have main categories a lot of categories for categories so it will insert one by one and we append all the filters and that will fetch check out the attribute name that you see on there right there you see it this is all results fetching from there and you also have a dismiss to close and and now we all I already show you this class this will count the number of lengths let's suppose the length is one right now and you see the length is one items alright very simple and if the car if the counter is zero so that shows no data found and next else it will otherwise show us the fetch cause against category so you see we have used the Ajax this is the route and if the responsible entity Row is shows no data found but if the results found on based of that so this shows us the category image and the tie off right so that's very simple and now if I go to the category controller so you see get caused against category so I use the TD be table sub categories as sub under scope cat I use a sub query select raw is used to select the number of columns that you want to have on your page so select the image from the categories we use sub under scope cat as allies so dot category underscore ID which is the subcategories foreign key a scatter underscore image so a scatter under school image I put up here down to the here and this is category and a swirl Tyler alright so that's very simple and then we get all the record so n means that this is the in clause which means that we have the number of ID's as an airy and and and put that all IDs inside inside the array and show us all the records get method right so and then we have encode the JSON to in the JavaScript object notation and that all data is convert into that and fetch all the results so I hope you guys will enjoy and this is a very very ballin topic which is very hard to find on the other YouTube channels I hope you guys will love please leave a like and subscribe on this video and in the next video I'm going to create the sharing links just like the Facebook you share the links on Twitter on Instagram on Facebook page so I'm going to create something a very useful topic in the next video so I hope you guys will enjoy and please leave a like and subscribe for more interesting videos I want to see you for the next

Channel: AB Nation Programmers

Views: 9,050

Keywords: filtersearch list, filter search jquery, Advance Category Filter in Laravel with Check boxes with JQuery & Ajax, laravel, php, filter products using php mysql and jquery, refine search php, filter, checkbox filter, how to filter products in php, checkbox filter php mysql, ajax search filter, php ajax checkbox filter, ajax multiple checkbox filter, product search filtering using php and ajax, how to filter data using checkbox in php, abnation, ajax, how to create search filter in php

Id: P-zSq3hRe9Q

Length: 10min 4sec (604 seconds)

Published: Sun Jun 07 2020