Re-Usable Search Functionality in Laravel 5.7 and Vuejs ( Ajax, Axios )

[@a_rob]

Really informative. Smooth as always! Now I have the confidence to do any project. Thank you very much!

[@CodeInspire]

very welcome :)

[@chrissfirstmoters]

Thank you, have been waiting for the video! Really appreciate ...

[@CodeInspire]

welcome buddy. Just uploaded now :)

[@juggerdanger4908]

@@CodeInspire please see my comment helpme

[@CodeInspire]

@@juggerdanger4908 where is your comments ??

[@juggerdanger4908]

@@CodeInspire what if imake search in user component, .then(data) => { this.users = data.data }); but showing error Error in render: "TypeError: Cannot read property 'id' of null"

[@juggerdanger4908]

@@CodeInspire I make method searchit in user.vue component and make Fire.emit, and place Fire.on in mounted, i already solved it with adding axios.get('api/findUser?q=' + query) .then( data => { this.users = data.data.data }) it can show the data, but when search query null, the data cant show in table help me

[@amrraouf3525]

I really appreciate what you do, thanks

[@leonelapor5003]

Very nice tutorial sir, I'm sure many people have learned a lot from you including me. Thank you soooooooo much =)

[@jmahachi]

Instead of this.$parent.search, is it not possible to send that string as a parameter when we raise the event?

[@tech24128]

What will change when search button use in user.vue instead of master.blade.

[@abhaypkyek]

Searching made easy. Very eagerly waiting for next one..

[@CodeInspire]

Just uploaded the new video :)

[@juggerdanger4908]

what if imake search in user component, .then(data) => { this.users = data.data }); but showing error Error in render: "TypeError: Cannot read property 'id' of null"

[@webhivetech]

Sir, this is one of the best tutorial I have watched. Could you please add one more tutorial for uploading the admin lte full project into live server or cpanel. It would be great for me. I am facing problem uploading the project into live server. Without this part, everything results me zero. It is very important.

[@cyberdynelabs4093]

yes please you should add one with cpanel in the list

[@Noone-1980]

@Code Inspire. Thank you again for this video. I have an error with v-model="search". It does not connect to app.js, search: ' ' even though I already used id="app". Error: [Vue warn]: Property or method "search" is not defined.

[@beshoyecladuos795]

Make sure you are using -> npm run watch

[@Noone-1980]

@@beshoyecladuos795 thank you

[@rafaelvasconcelos666]

Can I use the same logic for other components?

[@envoyfacilitation373]

all project going very good. but stuck on one point in master.blade on search card on @click point geting error with all red text and nothing happend in all request did'nt show any thing not searching results whats it???

[@phanirajk9144]

Hello brother my search function returning all the users from database how to solve?

[@junjun22able]

Yes! I’ve been waiting from you to do a tutorial for printing and create pdf..by the way, hopefully you include also in printing or creating pdf a customize header and footer if it would be possible for you...cause I been looking for efficient way on how to do it. Thank you ahead. Waiting for your next video.

[@CodeInspire]

very welcome :)

[@mahabuburrahman8155]

why i am getting this after writing the the same code: 405 Method Not Allowed! please help me. i am stuck here

[@topherReynaldo]

I've Tried not using fire, and just enclosed it on a method and it works perfectly including the pagination

[@loremipsum574]

Keep sharing. you are awesome.

[@unlocklord5440]

I'm watching many videos. Code inspire is the best!!

[@CodeInspire]

thanks buddy :)

[@unlocklord5440]

​@@CodeInspire Maybe you can made serial of video for Laravel eCommerce

[@AhmedAli-ii4iw]

sir when i login into the system following url is appear 127.0.0.1:8000/js/laravel-vue-pagination.common.js.map

[@CodeInspire]

Hi, try to login again and see if it happends again !!!

[@AhmedAli-ii4iw]

@@CodeInspire yes its hapen

[@starknights101]

I know im late. But if anyone have the same problem as u, do this: - open terminal and type: php artisan config:cache php artisan cache:clear

[@elmantaghiyev8875]

Dear Hujjat i have a new problem. Problem is:index.js:133 [Vue warn]: Error in v-on handler: "TypeError: vuefire__WEBPACK_IMPORTED_MODULE_7___default.a.$emit is not a function"... How to fix it this problem??? Thanksss

[@CodeInspire]

Please show me where you used $emit

[@jorgefraga3239]

Hello dear, I would like to do the following scope: When I open any modal window and then without closing that modal window I enter another menu item, everything that appears in the body is blocked.

[@CodeInspire]

give your modal window z-index:1000 so it appears at the top of other things

[@jorgefraga3239]

@@CodeInspire Hi, it did not work, now the modal is blocked. Anyway, I'll look for a way to close the modal when entering any menu option, maybe that's the solution. Thank you so much for everything regards

[@jorgefraga3239]

@@CodeInspire I put modal hide in the loadUsers method and it worked. I did it this way: loadUsers() { if (this.$gate.isOwnerOrAdmin()) { axios.get('api/user').then(({ data }) => (this.users = data)); $('#addNew').modal('hide'); } }

[@redhawk5476]

need help bro i check my console log when open profile menu .. but console give me error "localhost/:1 GET localhost:8000/img/profile/ 404 (Not Found)" i can't solved it

[@CodeInspire]

Don't worry about that error. It's not important. Maybe I will solve it in future vidoes

[@redhawk5476]

@@CodeInspire thanks for respon .. :)

[@ahmedalzeer7565]

please tell me how to make site multi language with laravel +vue and how to change theme direction to rtl

[@elmantaghiyev8875]

Dear Hujjat thanks your response i fix it my problem. and i has got query issue. When i search name or mail it is not finding normal data and i find the our network (inspect) request method is :status 200 , this is OK. Example: I have 3 data on my user table. Names: 1-Mikele, 2-Mike, Mikelo, Now when "i" write "m" or "mi" on the search (textbox) i will find result no data, But if i am writing "e" on the search i will find Mikele and Mike, But i am wring "o" on the search i will find Mikelo. How would this happened?? Please give an info about this issue

[@JamesRamsdenJaysree]

Do you think you could do a video in Caching? Thanks

[@kevintanudjaja8893]

keep sharing, you're the best

[@ruipeng1624]

many thanks from China

[@CodeInspire]

Very welcome Chinese people ☺️

[@chawmandew]

can someone tell me what does that "Fire" code means?

[@CodeInspire]

Fire is just a new instance of vue. I have assign it to window object to use it everywhere in the project. The usage is to communicate between components with custom even.

[@chawmandew]

@@CodeInspire Do I need to install it too? My laravel vue project doesnt seem to recognize the "fire" variable. It produces error whenever I try to reproduce the search functionality you are doing in this video. Thank you so much for your response

[@CodeInspire]

@@chawmandew no you don't need to install any thing. Just search around app.js file I think I have written something like window.Fire = Fire

[@chawmandew]

@@CodeInspire I also added that in my app.js file. window.Fire = new Vue. But the fire variable is still unrecofnized

[@jameelbaaz]

Invalid prop: type check failed for prop "data" Expected Object Got String Value please help me in this error

[@devzone8566]

i got the same error so help me if u found the solution

[@AbhimanyuNaikareWebDeveloper]

Man! I am not getting any results! The search function is called in 'network'tab but no result is shown. the empty table is shown.

[@AbhimanyuNaikareWebDeveloper]

Oh done! I used ' insted of " in controller search function!

[@CodeInspire]

awesome :)

[@sajjadhossainshuvo9541]

I did the same mistake. Actually what is the difference between ' and " in laravel , sql & vue.

[@JamesRamsdenJaysree]

Hi! great video, thanks for your help. In the Users.Vue, the data is returned as data.data doesnt that mean it gets returned as an array, this breaks the Pagination .then((data) => { this.users = data.data deleting the data, you get null.. wondering if a way round this? Thanks

[@tungnguyenkhanh6697]

check routes api

[@jhazelhurst4124]

Looking at the data structure you will need to use `this.users = data.data.data;`

[@juggerdanger4908]

@@jhazelhurst4124 if i use `this.users = data.data.data;`, when search empty and enter it, data not call in table what should i do

[@juggerdanger4908]

just add this.users.data = data.data, if in your tr there is v-for="user in users.data"

[@mazdysoraya6121]

Intermediately subbed.

[@daani786]

I got an issue when access search variable (app.js) within child component (users.vue), it says [Vue warn]: Error in event handler for "searching": "TypeError: this.$parent is undefined" TypeError: "this.$parent is undefined" here is the code in app.js prntscr.com/maew4q here is the code in users.vue prntscr.com/maew8s and here is the error when i type something in search bar and press enter prntscr.com/maewcw here is the vue instance output prntscr.com/maewpb

[@daani786]

i also try to print 'this' in searching function of user.vue prntscr.com/maext3 here is output prntscr.com/maey4o

[@daani786]

its ok i resolved it, i have to use the new terminology prntscr.com/maf1dh

[@CodeInspire]

Yes. You have to use arrow function right

[@drz319]

thank you so much all the way i finish

[@YungGudGalaxy]

This doesn't work with pagination. If you search for something and go to next page it returns all records instead of search term

[@tokke9345]

Try to do some things yourself, right? It's not that hard. Here you go: Change your GetResults function to getResults(page = 1) { if(this.$parent.search === ""){ axios.get('api/user?page=' + page) .then(response => { this.users = response.data; }); } else{ Fire.$emit('searching', page); } }, Next add the optional parameter to the searching event: Fire.$on('searching', (page = 1) => {...... You're welcome!

[@md.ikramurrashidshagor4401]

@@tokke9345 for me, it's working only one time. After refreshing(q sending empty request though search box have the searched text) the page I can't move to the next page. It stuck in a single page though it's not showing any error and can send the request.

[@inabahimeko5236]

@@shitdemon487 you can do this, if search empty, then call loadData() function if(query != ''){ axios.get('api/findUser?q=' + query + '&page=' +page) .then((data) => { this.users = data.data; }) .catch(() => { this.$Progress.fail(); }); }else{ this.loadData(); }

[@herdinataputra413]

I hope you make pdf in server side with ajax request, I'm trying to do it but its not working, I Google it but I'm still confused

[@CodeInspire]

ah. I will both. First client side with javascript and then serverside maybe.

[@samdeacon7910]

great video as always 😁

[@mysuccessword]

Your videos are very good and informative! Unfortunately, I was not able to make good learning from them. Most of the steps I follow are giving me an error code, Well, maybe the vuejs version and laravel version that you used are not the same as the current one that I am using right now. So painful I was not able to learn very well. If you can do updated series with the current vue and laravel 8 I will be very happy. thanks

[@CodeInspire]

Hey bro. This video series is from 2018. A lot of things has changed now. I might record a new series for this in future

[@mysuccessword]

@@CodeInspire Pls, do and many people are waiting to learn from it including me. I will be happy to see even better features added with the current update. Thanks

[@princeiscpv]

Thank you sir

[@BilguunsparKO]

very informative thanks

[@adam192021]

The BEST as always!

[@jorgefraga3239]

Great!

[@daani786]

I used the same custom events at kzbin.info/www/bejne/bKDdgJV6q8iDhMk create different events in multiple components but the issue is when in browser we go from one component to another and component fires custom events twice and more depend upon how many times the component is changed (in actual created) say component1 have Fire.$on (custom-event1) component2 have Fire.$on (custom-event2) In browser when i am at component1 and due to some work it fire custom-event1 after that i go to component2 and due to some work it fire custom-event2 after that when i go to component1 again and do some work which need to fire custom-event1, it will fire it twice and as custom-event1 have ajax request, so it will be load on system the thing is custom-events are binding with Fire but when event component change (it got created again, know from console.log) the events did not unbind, and in the end we have 2 and more events with old and new data please resolve this problem

[@cedriclabrador5353]

I have the same issue. Have you fixed it?

[@GIOVANNYGARCIAHOLGUIN]

Greetings from Colombia, your videos are really great, mate how can a make a searching like udemy, youtube, reddit etc, where i can use the method get like this search?src=ukw&q=laravel, using vue components, thank you

[@CodeInspire]

Hi buddy. You can use request class to get those information.

[@GIOVANNYGARCIAHOLGUIN]

@@CodeInspire but, i can use the same template or i need other template, i feel a little confused, thank you

[@CodeInspire]

@@GIOVANNYGARCIAHOLGUIN It's really up to you. There is no right or wrong way of using one template or separete. I would choose separete template if my css and javascript are different. For example. If I don't use Vuejs and axios for front page of my website, I would use separete template with different styles and js. :)

[@GIOVANNYGARCIAHOLGUIN]

@@CodeInspire thank you master

[@lucianmacwolf]

Thank you..plz socialite package using exaplaing buddy

[@CodeInspire]

sure buddy :)

[@laravelvuejseasly2091]

شرحك رائع

[@andrewrico8321]

for now its ok

[@MRFunDuDe100]

i had a problem with the search function $query->where('name' , 'LIKE' , '%'.$search.'%')->orWhere('email' , 'LIKE' , '%'.$search.'%'); this works for me

[@afganjabrailov2472]

You have to use double quotes "%$search%" otherwise the variable $string will not be evaluated and it will become a string.