Laravel 5.2 PHP Build a social network - Edit Posts with AJAX Request
HTML-код
- Опубликовано: 27 июн 2024
- Build a complete Social Network Web Application with PHP Laravel. In this video we will finally create and handle the AJAX request which will in the end be used to update our post data in the database.
Complete source code: github.com/mschwarzmueller/la...
Complete Laravel-course on Udemy: www.udemy.com/modern-web-deve... (Coupon: RUclips1)
In this course we'll build a neat little social network and cover the basics of developing with Laravel.
You can follow me on Twitter (@maxedapps), Facebook ( / academindchannel ) or visit our Website (www.academind.com).
See you in the videos! 
Наука
"You need a website. Why not do it yourself? WIth WIX......." *gunshot*.
All commercials aside, these tutorials have been great! Probably in over my head with my first Laravel App but learning lots and you've got a great tutorial-personality! Keep em up.
Haha, I get the Wix commercial all the time, too - unfortunately I can't pick them :D Happy to hear that you're learning a lot!
For anyone that goofed like I did, make sure to add the 'modal-save' ID to your save button. I must have missed you doing that. Took me a few minutes to find it :) Thanks for your hard work with these videos!
Same here;) Thanks for input.
Made the same mistake! Glad to know I wasn't alone ;)
This is a pretty detailed little app that shows a lot of features and functionality of Laravel. Thank you!!
+Anthony Gordon
That was the goal, great to hear that it is helpful :) Thank you!
your tuts saved me a time, ty man :)
Thank you for this tutorial. In fact, I'm going to upvote it and subscribe because you deserve it
So awesome to read that! Thank you so much for your support Arthur :)
thank you very much! It was very usefull!!! I apreciate your work!
That's great to hear Joaquin, thanks for your awesome feedback! :)
Well explained. Cheers!
So happy to read that Navneil, thank you!
Wow, Max you are the best Laravel teacher I've had so far and your course is 12 english pounds!? What's that about 16 euros? Bargain! Have a sale. This little course here has been worth that alone.
Many, many thanks, I'm really happy to hear this! :)
wow, nice tuts. Thumbs UP!!
Thank you, great to hear! :)
Thanks for this!
+Shaiful Aiman Malik
Thank you Shaiful!
i love you man, thanks a lot!!
Thanks so much Hector :)
you did it very Well Great
Thanks so much Adnan!
How a mentor should be? Here he is, The one & only MAX. (Sal Khan of Khan Academy is also great though :) )
Yeah, Sal Khan is great indeed, I like him very much. But many thanks for the awesome words here, I'm getting red now ;-)
Very good!
+Роман Хома
Thank you! :)
I have a question, what the variable $request contains? and the key to access it what are them ? I thought it was the html file tag names, is that correct?
One question about Jquery / Javascript. Why when I use the click event in the way you have
$('#modal-save').click(function() {
...
});
does nothing happen, i.e. Jquery doesn't even register clicking the element, but when I change this to
$(document).on('click', '#modal-save', function() {
...
});
it works just fine? Thanks!
Hm, strange behavior. I'm certainly no jQuery expert, so I really don't know why the first method doesn't work. Technically there should be no reason that you would need to select the document first.
thanks you so much. love you
Thanks so much for your comment :)
Great quality videos! I am learning a lot! Which video recording software are you using? I like that I can see you as I see the coding screen
Hi Gilbert, I'm happy to read that you like the format :)
I use Screenflow to record my screen, Adobe Audition to record my voice and an external camera + greenscreen to record my face
+Mindspace Thanks, mindspace! You put a lot of time and effort into these videos. Many thanks from Kenya!
When I am trying to show log message in console it is showing only zero why it is not getting the values of textbox.
Please help me!
I would like to Make a Note here, in Laravel 5.3 if you are getting an Internal Error which when i opened showed me MethodNotFoundHttpException, the trick i used is you need to put the entire "Route" section within the Routes folder inside api.php.. My Mistake was i putted it inside web.php and so i was getting the error. Hope this Helps ! :) Btw Thank You for making such an Amazing Series
Hello I get an error Route [edit] not defined
any idea??
I think to simply, the form's action in the modal should be the Route, both the Session::token and the post id as hidden inputs and the data for the ajax request might be better dynamically added through form serialize? Great tutorial anyhow!
You always have tons of different implementation options, for my videos I try to find the path between high optimization and easy-to-understand-ness.
Fair enough, again great series of videos. I sat down today and watched them all, they were great. Thanks so much for doing this!
hi guys, i have a little problem which is: "Uncaught SyntaxError: Unexpected token :"
there is my code:
$.ajax({
method:: 'POST',
url: url,
data: { body: $('#post-body').val(), postId:'', _token: token }
});
help me plz .
Great tutorial. How can this be done with javascript and jquery
Why we got dislike for someone helping others to learn?
If save button does't print anythink check your dashboard file and make sure there is an id="modal-save" in your button line. Otherwise your script cant find the element.
Красава, thanks
when we pass 'url' variable, we use route('edit'), but we always have the same url. why not just make url="your.dev/edit"?
thx
Because this gives you the flexibility of changing your route (put it in a route group, change the path) in your routes file without having to edit all the links again
Hello there. I'm trying to send information with laravel ajax. but the data part does not work. help.
stackoverflow.com/questions/18271251/typeerror-ajax-is-not-a-function its helped me:)
Dashboard : prnt.sc/iwxc4g
Dashboard Token/Route : prnt.sc/iwxcma
Js : prnt.sc/iwxcbt
Route: prnt.sc/iwxcrr
Hey @MidSpace, My English is bad sorry. My code SS up I got a trouble that I worked as you did but my postid doesnot pass in console ?
just comes up 'null'.
what will be reason for that??
ajax({When I am trying to show log message in console it is showing only zero why it is not getting the values of textbox.
Please help me!PLEASE HEEELPppppppppppppppppppppps
Hi there. I really learned a lot from your great tutorial. Currently I am having some trouble with jQuery traversing and ajax.
1. I use
|| postId = $(this).parents('article.post').dataset['postid'];
to get the dataset, but it returns a || Cannot read property 'postid' of undefined || in the console. When I change to your version of jQuery traversing, it doesn't return error. So my question is: what is the difference between these two ways of traversing? Also, I used
|| var content = $(this).parent().siblings().first().text();
to get the post body and it works fine, so it seems really weird to me.
2. When I press the 'save changes' button, in the console it generates an error: 500 (Internal Server Error) and it points to some line of code in jQuery, so I looked into the jQuery file and found the problem appear in this line of code:
|| // Do send the request (this may raise an exception)
|| xhr.send( options.hasContent && options.data || null );
and it belong to a jQuery.ajaxTransport() function. I really could not figure out what went wrong.
Could you please shed some light on these problems? Really appreciated.
+DAMIEN JIANG
Hi Damien,
great to hear that you're learning a lot!
1) I think the reason for this error is, that you're using jQuery. I use native JS and therefore have access to the 'dataset' property. With jQuery you have a jQuery Object, not a native JS HTMLElement. Therefore you have to use the .data() method provides by jQuery (api.jquery.com/data/). Hence try replacing '.dataset['postid']' with '.data('postid')'.
2) There's nothing wrong with jQuery or JS. Since it's a 500 error, something went wrong server-side. In your development tools (in the browser) open the 'network' tab and find the (red) failing request. Click on it to see the actual response, which should contain the error message thrown by the server
+Mindspace Hi Thank you so much for pointing out my mistake. It saved me huge amount of time and trouble. Really appreciated!
That's great to hear :)
Hello @Mindspace , I got a trouble that I worked as you did but my postid doesnot pass in console ??
just comes up 'null'.
what will be reason for that??
You might be missing the data-postid assignment on your HTML element for example. It's hard to guess for me what might be the reasons ;)
Thanks @Mindspace now it works I got reason .
Great to hear! :)
I would like to get your complete laravel 5.2 course ? how can I get your course?
And Would you give me summary of your course?
I mean what am I able to learn form your course?
Hi, check out this link: www.udemy.com/modern-web-development-with-laravel/?couponCode=RUclips1
You'll get a 50% discount by using the link and you'll see the complete curriculum of the course :)
Great series, where's the next one video?
+John Darville Dude he released this yesterday, have some patience.
+Kris Temmerman
Yeah, thanks for pointing this out.
@John: Let me clarify something here: I do these videos because I enjoy making them. I upload a lot on this channel and don't think the money earned with ads here is even close to providing a good income. This is not my full time job and therefore I'm not releasing one series per day.
If you want to continue learning right now and feel like supporting my work, buy my course on Udemy for just $17 ( www.udemy.com/modern-web-development-with-laravel/?couponCode=RUclips1). Otherwise you will have to be patient.
Hi Max!, What is the difference between:
Route::post('/edit',[
'uses' => 'PostsController@update',
'as' => 'post.edit'
]);
AND
Route::post('/edit',function(\Illuminate\Http\Request $request){
return response()->json(['message' => $request->content]);
})->name('post.edit');
The firts one it's not working, on my PostsController@update i have:
public function update(Request $request, $id)
{
return response()->json(['message' => $request->content]);
}
Probably because you're expecting an $id in your controller but you don't pass one in the URL.
Thanks Max for the quick response. Tomorrow i will go to change that. I am from Argentina and you have the best Laravel tutorials. Regards!
That work perfect for me! Thanks again!
Happy to hear that! :)
i have trobel in postId Can help me
Give sequence number to each video so that if we can download and understands the sequence one by one
Using jQuery 2.x I was unable to get the data-postId issue to work. Instead I suggest using the jQuery attribute method.
postId = $(this).parents('.post').attr('data-postId');
I have had issues bouncing back and forth between javascript and jQuery before. They don't always work well together. It is best to use all jQuery imo.
+Ncojay
Hi, that definitely is an option, though plain JS should work, too. Mixing jQuery and JS (i.e. calling JS properties on jQuery elements) certainly is an issue, but adding some jQuery logic to plain JS code shouldn't be an issue.
However, I do agree that the least error-prone way will be to do everything with jQuery. I just like to mix it up because I think, that it's important to be able to work with plain JS, too.
Mindspace True, it obviously worked for you in the video. It was probably because I was working with $(this) command instead of the event variable you passed in.
Probably would not have been an issue if I would have followed along precisely.
Great video. Unfortunatly i have problem with part:
$('#modal-save').on('click', function() {
$.ajax({
method: 'POST',
url: url,
data: { body: $('#post-body').val(), postId: '', _token: token}
})
.done(function (msg) {
console.log(msg['message']);
}) ;
});
It causes an error POST 500 (Internal Server Error) - i can see that in developer console.
I checked that i can reach url and token vars - they are ok.
The same $('#modal-save') and $('#post-body')
Any ideas?
That means that the Laravel code actually throws an error. You can view the Laravel message by going to the "Network" tab (in Chrome dev tools), clicking on the "red" (failing) Request and then on "Preview". You should see the Laravel error message there - hopefully this message then points you towards the error.
I checked it, but on failing Request (edit) on Preview I get "Faild to load response data"
On Headers Tab in Form Data group i see that: body=Kolejny+post+2&postId=&_token=3QM8vAUzybAcrFO9Hy1t1faontCe93hE3g5i3VOA%7D it seems to be ok.
It looks like: www.sienicki.com.pl/fpv/laravelTutError.png
Hm, that's suboptimal. Nonetheless, the error comes from your server. You may compare your code to my code (which can be found in the Github repo linked in the video description)
I have just compared my code with yours. It seams - your version is newest with some additional logics - route for edit uses PostController, but still, even I add your updated code and replace my in files.: routes.php, app.js, dashboard.blade.php and PostController i had the same POST 500 Internal Server Error
uff I found the problem - sorry for trouble, i don't have data-postid="{{ $post->id }} in my article tag ;(
I have null in the controller request
how did you fix it?
I am working on laravel 5.3
I can't make the console.log to show me anything...i don t know how to do it
The command simply is console.log('Something you wanna show'). There's nothing else to it :/ Make sure the function executing this code actually gets called.
thanks, i managed to do it. now i have a problem with ajax...it doesn;t update the content while i press the save button from modal. it works only after page refresh
It's been a while since I created the videos, but I do know that this functionality should be shown in this or the next video. So definitely have a look at the next one to see if this fixes your issue.
probably you are not sending the request to the correct URL and/or the token value is not being sent. Please add a fail method in your ajax to see the details.
hi . i got undefined in my console.log can someone explain to me what ' s wrong with that ? and thx :)
That happened to me as well, lol. It was a silly mistake for me though. You want to check what's in your .done function. For me, when trying to access msg['message'] I misspelled message with an extra s. Therefore it's undefined or null. I would try doing console.log(msg) and see first if that's defined. If it is, then try to trouble shoot from there.
it's ok now i solved that .it was a problem in my json request and i solved it :)
not getting any post id and body in console like you i don't know why code is ditto as same as yours but......why...it's so frustrating...!!!!
You can find my code in a Github repo (link in video description). Compare it to yours, probably some tiny mistake somewhere.
i got it from git hub don't know reason why my code was not running but....Ajax,Jquery and Javascript are the section where i really suck.....even during engineering it was like awhhhh.....so i have to learn that javascript and jqury diffrently with your code is running smoothly......i donn't know what's wrong with my version....but i won't leave these 13 to 16th Edit post tutorial and going further in series if i don't get it...!!!
Getting: $.ajax is not a function.. Any ideas?
bit late but check your js version, bootstrap ships with a "slim" version which strips out some bits
Yes, have already resolved this problem. And the issue was exactly the "slim" version... Anyway usefull for anyone having the same problem.
Goodafternoon Im getting 500 internal server error ,
to anyone having this problem , in my condition, its because the server is looking for the so cold _token being set. My problem was i add another {} in my var session code. Hope it helps thanks
I have the same problem how did you fix it?
Hi +Mindspace what a great tutorial, anyway i was failed to change content using AJAX, it says socmed.dev/edit%7D 404 (Not Found).
I'm sure i was following correctly.
Well, as the error says: Somehow this route is missing/ not reached. Hard to tell for me what's wrong. Check your routes file and your script and make sure that both match. There has to be a tiny mistake somewhere
Yeah, i also had a feeling that is must be a tiny mistake here :))
Anyway, thanks for your help, I'm gonna check it again :))
testing
Learning a lot but Your voice is too low
Sorry about that - it's one of my earlier videos, still figured out the whole audio thing back then :/