Bro, your content is not only extraordinary, it's also masterful in presentation! Your style of presentation should be the de-facto standard for all video training everywhere ... Thanx again and Pleeeeeeease keep up this awesome work!!
Congrats man you're really good at explaining difficult stuff with an increadible ease, you should totally make a series about CSS with a particular light on the techniques. Keep up the good flow.
Thank u for everything... I tried to use ajax in wordpress before and cld not succeed but now I think do this and all credit goes to you.. thanx ... waiting for part 2.
Thanks for this tutorial helped me how to use ajax in Wordpress and how to implement load more button. Alessandro Castellani your way of explanation is very good.
This is a great explanation of using AJAX and I can't wait for the next. Your videos get better and better. Thank you. I do have a question... Is there any benefit of using a class for the "load more" button than an id in this instance? jQuery can find both.
+Mark Waters In this instance there's no specific reason of using a class over an ID. I like to use a class because if happens to have multiple buttons that do the same thing, I can use the same function, instead of writing one function for every IDs. It's just something I'm used to do and it comes to me naturally. Thank you so much for your positive feedback. Happy Coding!
@@alecaddd Thanks for replying Alex. I will sit tonight and will find all your ajax videos. Thanks for replying again. also, your reply is faster than StackOverflow
Thank you very much for these tutorials. I could use some help on a problem i am struggeling with, hope you could point me in the right direction. Is it possible to use these technics on a custom page template? and use code to say how many posts must been showed?
+Wim Huiskes yes, absolutely! If you keep watching the videos, I expanded the functionalities of the ajax scroller to implement custom pagination and custom queries. Using this code for other templates and purposes is really simple. Happy coding
I did by now (: but still can't figure it out ): I dont want to use the backend of wordpress to say how many posts must been shown on the page. If i say in the backend that 6 posts must been shown, the load more button works, but if i query with post_per_page => 6, the load button doesn't work any more. www.restaurantbruisblaricum.nl/nieuws is the page i am talking about. Can you point me in the rigtht direction? because i am pretty lost by now.
I figured it out, in the reading section is set the number of posts to 6, but on other pages (where i need more posts, i use an query) simple as that. sorry for bothering you. And please keep up the good work (:
Hi Alessandro, understood that this tutorial has been for 4 years already. However, I hope that you could still give me some advice or help, with what I am facing now. I am not sure what goes wrong, when I was trying to call out the contents like what you did on 33:49. My result is, there is a post-id within the div, but the contents just not loading. And it also missing the 'post' class too. In case you don’t get what I mean, following is the sample codes Nothing is within. However, it works fine, if I hard coded the loop in ajax.php. Meaning, if I don't rely on the "template-part/content", get_post_type() to call out the post. I checked through the codes, nothing missing. So, I really have no idea what is wrong. I wonder if you can get me some clue?
@@alecaddd My apologist, I am not too sure how to do the command. As my knowledge on PHP is limited. I suppose I should do a var_dump? But how do I do that in the correct way?
@@alecaddd I am not sure if this cause the problem. I basically created a page called Portfolio, and defined it as a post page, under Reading Settings.
+Norihiro Tsutae I'm already experimenting with beta version of the REST api. I will definitely do tutorials about when I'm confident with that topic. Thanks for watching.
HI Alessandro, thanks for your tutorial, it works great. Can this be implemented to show the blog search results on the same page? I would appreciate any help. I already search the web for a full day, but I do not seem to figure it out.
Yes, it can. I don't remember if I actually did it in the tutorial. Keep watching all the videos to learn everything you need, and I' sure you'll be able to adapt it to your needs.
I didn't know that these ajax calls will require so much code. So much stuff is needed for just one mouse click. Anyways, awesome video as always Alex, I learned a lot. Thank you :)
Thanks for watching, it's always normal to feel a bit overwhelmed when tackling new stuff, but give it some time and you'll feel comfortable with this code that right now looks messy and long.
That's not necessary. The add_action() of WordPress comes with 2 parameters by default, the first is the action you want to hook, and that's a default pre-existing action of WordPress, the second parameter, is the function you want that action to trigger. No need to create a do_action(), because the first parameter you specify is actually the action that already knows when it'll be triggered. Check the docs to learn more: developer.wordpress.org/reference/functions/add_action/
If have one question. Why do you work with css-classes in your js functions. Wouldn't it be better (when you try to get only one element) to use an id instead of an specific class, or did i miss something? Greetings BlankWolf
+Mainframe Thanks! I don't sell themes anywhere, never actually did because I never considered my themes worth selling. Also, if I code something for myself, I prefer to record it and release it for free, instead of selling it. :D
Hey man, great tutorial as always. Just wondering what is the easiest way to add social media icons to your footer. I really want to add those to my theme. Thanks in advance!
+Krypton Games The easiest way ever is to use a plugin, there are plenty of good alternatives in the WP Plugin repository. Other solutions are: Create a custom menu, that you print and manually add the class for the font icon, like I did in the Live Dev Session. Create custom meta boxes and print them however you want Manually write the code in your footer for your icons and links to social media Etc...
Hi! Thanks for your awesome tutorials! I cannot to get the ajax to work properly on this tutorial. My problem is when I hit the load more-button it will return 0 on the front end, instead of my posts. When checking the console the admin-ajax.php request gets loaded with an status of 200 and form-data value of page = 1, action = load_more. I have compared you code with my own written code and checked it multiple times but still no working. What can be the issue?
Hi, thanks for watching my videos. Are you on Windows and using Wamp for your local development? I had many many users having similar issues with this setup
No, I am using mac and live sftp. I had a similar issue earlier when i was working locally with mamp with this tutorial. Sadly it won't work with my ftp-sync setup either :(
Make sure you have required the php file containing the load_more function in functions.php. This might be the reason to return 0 because there is no any function exists and error : function(response) is returning 0 from ajax.
Maybe check if you have erased wp_die(); or die(); at the end of the ajax function (included file for functions.php). Need to have this function to stop ajax from loading over and on top of the previous request.
@@AshishYadav-lo6cq life saver! mine wasnt working and then i saw your comment here amd reaised i had missed the part in the video where he added ajax.php to functions.php. I was probably drinking my tea at that point :-)
Hello, thank you very much for this information so valuable, I want to know if it is possible to get the contact form 7 by ajax, without its the ajax of the form stop working when I sent the form. My English is very bad I hope you understan me
Yes, it's possible to load asynchronously CF7 with an ajax call, but as you probably saw the form doesn't work. You can solve this issue in 2 ways. Or you add a do_shortcode() in your PHP function and echo that one from ajax, or you manually initialize cf7 javascript every time you load a new form.
I have placed the shortcode in the function.php file and loads the form, but when I give send me gives a value of 0 :( ================================== This is my code of function.php
Hi Alex, congratulations works perfectly. I encountered a small problem. I uploaded your files to lesson "31" to be sure of this problem. Something unusual happens when loading gallery type posts. In practice I have two posts of type gallery in addition to other formats: if I change the number of posts per page when I click to load other posts and appear the posts of type gallery sometimes do not turn the slides, sometimes do not work previews, other times one turns the other not. I tried with different number of posts per page (2,3,4,5) and at each setting there is a different problem. Is there a connection of this problem with what we have achieved so far?
Hi Alex. Can you help-me? when I click, I see in the console the next page load, but don't show in the site. Even the echo "1" don't show on page for the tests, just in console. Really don't know what I did wrong
+Cyberdisarray Mh, so if the page appears in the console it means that the ajax script it's loading properly the info you requested. If those info are not printed in your front end, most likely is a JS issue. Try to append whatever, like a fake text, in your destination container, instead of the response from ajax, just to see if your JS it's working. Cheers.
Hi Alex. Thanks for the tutorial! Ive got it to work but It seems like I cant incorporate it with post filters. My blog page has buttons at the top to filter categories. they link to categories like this example.com/blog/?category=celebrations. the load more button works on example.com/blog/ but when I filtered the post and then click load more it also loads post from different categories. Ive been working on this for three days no and I'm stuck. haha. Hope you could help me out. Thanks!
+gaurdjatixa Hi, thank you so much for following. So the system currently works only with a proper permalink structure. So your URL should be something like example.com/blog/category/celebrations/ Probably in the future I will create a function to detect if a permalink structure is active or not. Cheers
+Alessandro Castellani Thanks Alex! Is there any way for wordpress to detect the category based on url? example.com/blog/?category=celebrations then get the category after the =?
Hey @gaurdjatixa maybe you can use explode() php function and save the category from the browser URL (Maybe this is not the best practice but can works)
I am filtering my posts using taxonomies via ajax.. but when first time page load no posts are shown can you please guide me about this. first time page loads all posts should be shown then i will be able to filter posts using ajax ?
Hello Alessandro. Great presentation and great work on ajax load more posts. I have issue that I can't resolve and can't understand what's going on. When I press my load more posts button duplicated posts are loaded couple of times. I have included variable paged properly inside of args array just before the main wp loop. On page load I'm loading only 2 posts and then I need to load next 2 posts with the button click. Now duplication of posts I can deal with but can't figure out why ajax request is not calling proper pages even if the console.log shows the correct numb of next page.
Alessandro Castellani for any of you have the same issue I found out that my issue was happaning because my initial posts had a paged 1 and the wp_reset_postdata has reseted this to page 1 again. So ajax posts need to load posts from page 1 and not page 2. Previously I have iserted array of previous posts so I don’t display duplicated posts.
Hi alex, iam from jamaica and iam totally loving your tutorials. I hqve a problem. When i click on load more...my older posts are not loading at the bottom of the page but they are loading in the middle. Can you help me plz
Thank you very much for so nice tutorial, I am a fan of your tutorial. I have also tried with this tutorial. But, after ajax loaded posts, do not working jquery like- isotop, owl-carousel. Please help me, how to solve this problem. thank you again.
Hi, if you keep following the series you will see a video where I explain why the slider is not working after new post loading. The reasons are the same behind your issues with your other jquery plugins. Cheers
Hi there! awesome video! Question, any idea why every time I push the button I get the response normally but at the end a zero (0). Actually once there are no more posts i get a 0 every time i push the button.
omg 3 hours searching for small error , when i click on load more , nothing appear in my front end , and i check all code and past your code from github and after this error was on the dir folder i was type it get_template_part( 'template-parts/content', get_post_format() ) and my folder name is template-part :D damn shiiit :D
Alessandro, my good sir. You've just answered two weeks of desperate searching! Thank you! I've tried multiple tutorials that I've found online but didn't work. So thanks a load! Okay, if you don't mind, I have one question and one request: The question, maybe I missed one of your videos that this, but I notice in your posts loop, there's no actual post HTML there, is this located somewhere else? I just have my HTML in the main posts page and it looks a little messy, keep in mind it's a single-page theme. The request: as I mentioned, I'm using a single-page theme where the home page, post list and single post is all in one page. So could you please do a video on how to load the single post in the same page via AJAX? Many thanks, and keep up the amazing videos! :D
+Liam Merlyn Thanks for following. If you follow my tutorials since the beginning, you will notice that I keep everything separated in PHP files, and call these files with a get_template_part() function. Check the entire series and you will easily learn how to have a better organized template structure. Cheers, Alex
+Alessandro Castellani Hi Alessandro, Thanks a lot for that. It seems I had actually missed one out. I made the changes and managed to continue following along. I got the posts to load on the button click, but, like when you hadn't changed the newPage to page+1, and your posts just reloaded the same ones, mine's doing that, I've read over your code a dozen times but can't seem to fix it. Would you mind looking at my code here: codepen.io/ConduciveMammal/pen/PNmwbb please and see if you can find the problem? I've posted the ajax.php code inside the CSS column of CodePen. Many thanks, Liam.
I am stuck at 10 minutes in because I cannot get the load more link to work. Basically the text "load more" appears but it does not appear as a link and nothing happens in the console when I click on it. I have copied the relevant part from github to my index.php and I have copied the .js file. I have checked that the .js is enqueued properly so I am not sure why the link does not work. Any ideas? (note: I am not using bootstrap though)
+Arete Bootstrap shouldn't affect this part at all. Are you sure your script is properly calling the ajax function? Go inside your network tab in the browser inspector, and see if, when you click LOAD MORE, a new file gets loaded called admin-ajax.php Check that file and the response it gets.
+Alessandro Castellani Thanks for helping. If I use the networks tap in the inspector I can see that the admin-ajax.php is loaded when i click on "load more" but not the .js it seems.Nothing shows up in the console.
I just found a strange bug, I followed this word for word and my subroutine was failing. Basically my php callback routine was not getting the passed variable, even though it was working in the other direction - i was getting data passed in the response. The bug turned out to be that for my version of PHP the it would only work if I used single quotes instead of double quotes when requesting the $_POST variable.
Hi Alex.... I write this just to correct you and maybe it can be helpful for someone else... the data attribute in inspector is dynamically too(everything is dynamic i think).... but when you change the value with jQuerry.data() method....it don't change.... it just put internally in jQuery.cache....if you want to really change the data-* you can use attr("data-*", "value")
Great tutorial! But I have a small problem, for some reason the ajax request is sent 2 times, so if I print the data-page with the "this is awesome" value to the front-end for example, it gets printed two times. The same thing happens with the new posts that are loaded, they are also printed twice. Anybody got a solution?
Thanks for tutorial again very useful. I am getting a console error. I tried copying code from git hub. Still having the same error. I am working locally so not sure if that is why. It's a script438 error - it says object doesn't support property or method 'ajax' and then refers to me to the $.ajax in my js. Anyone else had this error and found out where they went wrong?
Hi Alex! I have an Ajax request that does not work as long as the user is not logged in, instead of a php file, Ajax issues the entire site, maybe you know the problem?
Sory for disturbing, I just find out how to fix it. I restricted access to the admin panel, and admin-ajax.php wrote error 302. Found on stackoverflow such a solution: Add to the exception "&& (! Defined ('DOING_AJAX') ||! DOING_AJAX)" function mt_redirect_admin () { if (! current_user_can ('edit_events') && (! defined ('DOING_AJAX') ||! DOING_AJAX)) { wp_redirect (site_url ()); exit; } } add_action ('admin_init', 'mt_redirect_admin', 1);
Hi, thank you so much.You're right also wp_die() it's good to interrupt the execution of the script, but that one is useful to output something before the exit or a timeout. I'm not using it because I don't need to handle any type or response. Thank you so much for the suggestion. Cheers
/* AJAX functions */ jQuery(document).ready(function($){ $(document).on('click','.japi_load_more', function(){ console.log("click"); var page = $(this).data('page'); var ajaxurl = $(this).data('url'); $.ajax({ url : ajaxurl, type: 'post', data :{ page : page, action: 'japi_load_more' }, error:function(response){ console.log(response); console.log("FAILURE"); }, success:function(response){ console.log("success"); $('.Post-container').append(response); } }); }); }); I FIXED THE PROBLEM :D :D :D it was because in the $.ajax({ action: '.japi_load_more' the error was because I had a . i removed it and it worked
Hi, thank you so much for the very helpful tutorial, but I have met one problem while doing this. That is the "load more" section does not show up below new post when I click but stay in one place. Can you show me how to fix it? Here is the image: postimg.org/image/5yxm3oh4t/
why would you want a shorter video if he is teaching you something? Thats like asking a university to squeeze a 4 year course into 1 year because its too long! Alessandro, your videos are great and i have learned loads. Good stuff takes time, so i have no problem with them being long!
Bro, your content is not only extraordinary, it's also masterful in presentation! Your style of presentation should be the de-facto standard for all video training everywhere ... Thanx again and Pleeeeeeease keep up this awesome work!!
Thank you so much :D
Congrats man you're really good at explaining difficult stuff with an increadible ease, you should totally make a series about CSS with a particular light on the techniques.
Keep up the good flow.
Thank you so much, I'm also doing a series about SASS, you should check that out in my playlist.
Cheers
You're a genius Mister!! You're sharing our invalueable WordPress and beyond knowledge!!
Thank you so much, happy to be helpful
:)
Thank u for everything... I tried to use ajax in wordpress before and cld not succeed but now I think do this and all credit goes to you.. thanx ... waiting for part 2.
+Subhasish Manna Thank you so much!
Thank you for this tutorial, Alessandro. I've been following your channel since I started Wordpress and I really learned a lot. Keep it up brotha!
+Lorenz Gino Royo That's amazing, thank you so much for following.
Happy Coding!
again you proof , you are really best developer , i like your video too much
Thanks for all your effort to create these type of useful videos
+Mohit Dubey Thank you so much for keep following, I'm really happy to hear that!
Followed a lot of tutorials on AJAX load more functions, but this one works best!
This ist so freakin' cool, Alex! You're a real WordPress-Ninja and my WordPress-Hero!!
+CyberIllusions So...I'm a Ninja-Hero?!...I'm cool with that :D
Absolutely, Alex!
Hi Alex,
Just wanted to thank you for this tutorial it was very very helpful for me
Wish you the best in life
Thank you so much :D
Thank you so much Alessandro for these awesome videos.
You won another subscriber :D
I was lost and you saved me , THANK YOU .
Happy to be your beacon of light :P
Once again, fantastic tutorial - on to part 32!
Thank you so much!
Thanks for this tutorial helped me how to use ajax in Wordpress and how to implement load more button.
Alessandro Castellani your way of explanation is very good.
Thank you so much for watching :D
yes !!! i really like it.. your way of teach is very nice.. and easily understandable... really it is very very very helpful for me....
Happy to hear that!
I like this way to use 'that' var to refer 'this' ! Thanks a lot !
You are welcome!
Amazing. Perfection. I'm very grateful for this! Thanks Alessandro!
Oh wow, thank you so much :D
Nice tutorial, thank's it is so well explained!
Thanks for watching :D
This is a great explanation of using AJAX and I can't wait for the next. Your videos get better and better. Thank you. I do have a question... Is there any benefit of using a class for the "load more" button than an id in this instance? jQuery can find both.
+Mark Waters In this instance there's no specific reason of using a class over an ID. I like to use a class because if happens to have multiple buttons that do the same thing, I can use the same function, instead of writing one function for every IDs.
It's just something I'm used to do and it comes to me naturally.
Thank you so much for your positive feedback.
Happy Coding!
I really love your tuts. thanks alex
Thank you so much
Great video and channel Alex! Quick question, can this be used for custom posts as well as normal posts?
Hello Alex, Thanks for the nice tutorial. I was looking ajax for next & prev button. Please share a tutorial.
If you watch all my tutorials about ajax, you'll be able to code it yourself pretty easily as the concepts and execution are pretty identical :D
@@alecaddd Thanks for replying Alex. I will sit tonight and will find all your ajax videos.
Thanks for replying again. also, your reply is faster than StackOverflow
Awesome tutorial. Thanks for the effort...
Thanks for watching :D
Thank you very much for these tutorials. I could use some help on a problem i am struggeling with, hope you could point me in the right direction. Is it possible to use these technics on a custom page template? and use code to say how many posts must been showed?
+Wim Huiskes yes, absolutely! If you keep watching the videos, I expanded the functionalities of the ajax scroller to implement custom pagination and custom queries.
Using this code for other templates and purposes is really simple.
Happy coding
I did by now (: but still can't figure it out ): I dont want to use the backend of wordpress to say how many posts must been shown on the page. If i say in the backend that 6 posts must been shown, the load more button works, but if i query with post_per_page => 6, the load button doesn't work any more. www.restaurantbruisblaricum.nl/nieuws is the page i am talking about. Can you point me in the rigtht direction? because i am pretty lost by now.
I figured it out, in the reading section is set the number of posts to 6, but on other pages (where i need more posts, i use an query) simple as that. sorry for bothering you.
And please keep up the good work (:
Hi Alessandro, understood that this tutorial has been for 4 years already. However, I hope that you could still give me some advice or help, with what I am facing now. I am not sure what goes wrong, when I was trying to call out the contents like what you did on 33:49. My result is, there is a post-id within the div, but the contents just not loading. And it also missing the 'post' class too. In case you don’t get what I mean, following is the sample codes
Nothing is within.
However, it works fine, if I hard coded the loop in ajax.php. Meaning, if I don't rely on the
"template-part/content", get_post_type() to call out the post.
I checked through the codes, nothing missing. So, I really have no idea what is wrong. I wonder if you can get me some clue?
Did you check my source code on GitHub?
@@alecaddd Yes, I did.
@@danielampunn It seems that WP can't import your `content-post-type` file. Check which type of string gets printed from the get_post_type() method.
@@alecaddd My apologist, I am not too sure how to do the command. As my knowledge on PHP is limited. I suppose I should do a var_dump? But how do I do that in the correct way?
@@alecaddd I am not sure if this cause the problem. I basically created a page called Portfolio, and defined it as a post page, under Reading Settings.
Thank you for all This tutorial Alessandro Castellan .i i want To ask you what theme are you use in your editor ?
+طاهر بوعرفة It's a custom one I created. It's based on a mix between Dark Soda and Molokai
Superb!
Thanks a lot, I subscribed and liked your video.
Wow, thank you so much for your support :D
Nice tutorial! Now since the pre-release of WP API (WP REST API), ajax call is a lot more easier these days. Please make a tutorial in the future!
+Norihiro Tsutae I'm already experimenting with beta version of the REST api. I will definitely do tutorials about when I'm confident with that topic. Thanks for watching.
HI Alessandro, thanks for your tutorial, it works great. Can this be implemented to show the blog search results on the same page? I would appreciate any help. I already search the web for a full day, but I do not seem to figure it out.
Yes, it can. I don't remember if I actually did it in the tutorial. Keep watching all the videos to learn everything you need, and I' sure you'll be able to adapt it to your needs.
Thank you for all This tutorial Alessandro Castellan but I have an error why this last post repeat when I click red more
Check my source code on GitHub if you have an issue
@@alecaddd ok thanks again
I didn't know that these ajax calls will require so much code. So much stuff is needed for just one mouse click. Anyways, awesome video as always Alex, I learned a lot. Thank you :)
Thanks for watching, it's always normal to feel a bit overwhelmed when tackling new stuff, but give it some time and you'll feel comfortable with this code that right now looks messy and long.
You're right, and it is much easier and faster with your lessons. Thanks again.
Just amazing... THANKS!!!!!!
Hi this is great - can you do another video for non-archive 'load-more' posts. For some reason, it never works for me on a non-archive page...
Confused about the add_action at the top, are you making custom hooks? If yes, should there be a do_action somewhere? Thx in advance.
That's not necessary.
The add_action() of WordPress comes with 2 parameters by default, the first is the action you want to hook, and that's a default pre-existing action of WordPress, the second parameter, is the function you want that action to trigger.
No need to create a do_action(), because the first parameter you specify is actually the action that already knows when it'll be triggered.
Check the docs to learn more: developer.wordpress.org/reference/functions/add_action/
If have one question. Why do you work with css-classes in your js functions. Wouldn't it be better (when you try to get only one element) to use an id instead of an specific class, or did i miss something?
Greetings BlankWolf
awesome, as always :) Im just a little bit curious. Did you sell your themes? on themeforest for instance
+Mainframe Thanks! I don't sell themes anywhere, never actually did because I never considered my themes worth selling.
Also, if I code something for myself, I prefer to record it and release it for free, instead of selling it. :D
thankyou so much! awesome tutorial
Cheers
Hey man, great tutorial as always. Just wondering what is the easiest way to add social media icons to your footer. I really want to add those to my theme. Thanks in advance!
+Krypton Games The easiest way ever is to use a plugin, there are plenty of good alternatives in the WP Plugin repository.
Other solutions are:
Create a custom menu, that you print and manually add the class for the font icon, like I did in the Live Dev Session.
Create custom meta boxes and print them however you want
Manually write the code in your footer for your icons and links to social media
Etc...
Thanks again, I will try both ways. :)
Hi! Thanks for your awesome tutorials! I cannot to get the ajax to work properly on this tutorial. My problem is when I hit the load more-button it will return 0 on the front end, instead of my posts. When checking the console the admin-ajax.php request gets loaded with an status of 200 and form-data value of page = 1, action = load_more. I have compared you code with my own written code and checked it multiple times but still no working. What can be the issue?
Hi, thanks for watching my videos.
Are you on Windows and using Wamp for your local development? I had many many users having similar issues with this setup
No, I am using mac and live sftp. I had a similar issue earlier when i was working locally with mamp with this tutorial. Sadly it won't work with my ftp-sync setup either :(
Make sure you have required the php file containing the load_more function in functions.php. This might be the reason to return 0 because there is no any function exists and error : function(response) is returning 0 from ajax.
Maybe check if you have erased wp_die(); or die(); at the end of the ajax function (included file for functions.php). Need to have this function to stop ajax from loading over and on top of the previous request.
@@AshishYadav-lo6cq life saver! mine wasnt working and then i saw your comment here amd reaised i had missed the part in the video where he added ajax.php to functions.php. I was probably drinking my tea at that point :-)
Hello, thank you very much for this information so valuable, I want to know if it is possible to get the contact form 7 by ajax, without its the ajax of the form stop working when I sent the form.
My English is very bad I hope you understan me
Yes, it's possible to load asynchronously CF7 with an ajax call, but as you probably saw the form doesn't work. You can solve this issue in 2 ways.
Or you add a do_shortcode() in your PHP function and echo that one from ajax, or you manually initialize cf7 javascript every time you load a new form.
I have placed the shortcode in the function.php file and loads the form, but when I give send me gives a value of 0
:(
==================================
This is my code of function.php
pornhub
Hi Alex, congratulations works perfectly. I encountered a small problem. I uploaded your files to lesson "31" to be sure of this problem. Something unusual happens when loading gallery type posts. In practice I have two posts of type gallery in addition to other formats: if I change the number of posts per page when I click to load other posts and appear the posts of type gallery sometimes do not turn the slides, sometimes do not work previews, other times one turns the other not. I tried with different number of posts per page (2,3,4,5) and at each setting there is a different problem. Is there a connection of this problem with what we have achieved so far?
the solution to the problem is in part 33 ... cheers!!!
Cheers :D
Hi Alex. Can you help-me? when I click, I see in the console the next page load, but don't show in the site. Even the echo "1" don't show on page for the tests, just in console. Really don't know what I did wrong
+Cyberdisarray Mh, so if the page appears in the console it means that the ajax script it's loading properly the info you requested. If those info are not printed in your front end, most likely is a JS issue. Try to append whatever, like a fake text, in your destination container, instead of the response from ajax, just to see if your JS it's working.
Cheers.
+Cyberdisarray Also, if something doesn't work properly, check my GitHub repo to download my source code and compare it with yours.
Alessandro Castellani
Ok, thanks for the great tutorials. xD
+Alessandro Castellani Now its working xD
Thanks for the reply
Hi Alex. Thanks for the tutorial! Ive got it to work but It seems like I cant incorporate it with post filters. My blog page has buttons at the top to filter categories. they link to categories like this example.com/blog/?category=celebrations. the load more button works on example.com/blog/ but when I filtered the post and then click load more it also loads post from different categories. Ive been working on this for three days no and I'm stuck. haha. Hope you could help me out. Thanks!
+gaurdjatixa Hi, thank you so much for following.
So the system currently works only with a proper permalink structure. So your URL should be something like example.com/blog/category/celebrations/
Probably in the future I will create a function to detect if a permalink structure is active or not.
Cheers
+Alessandro Castellani Thanks Alex! Is there any way for wordpress to detect the category based on url? example.com/blog/?category=celebrations then get the category after the =?
Hey @gaurdjatixa maybe you can use explode() php function and save the category from the browser URL (Maybe this is not the best practice but can works)
I am filtering my posts using taxonomies via ajax.. but when first time page load no posts are shown can you please guide me about this. first time page loads all posts should be shown then i will be able to filter posts using ajax ?
Hello Alessandro. Great presentation and great work on ajax load more posts. I have issue that I can't resolve and can't understand what's going on. When I press my load more posts button duplicated posts are loaded couple of times. I have included variable paged properly inside of args array just before the main wp loop. On page load I'm loading only 2 posts and then I need to load next 2 posts with the button click. Now duplication of posts I can deal with but can't figure out why ajax request is not calling proper pages even if the console.log shows the correct numb of next page.
Nevermind, I think I got it.
I'm glad you solved it :D
Alessandro Castellani for any of you have the same issue I found out that my issue was happaning because my initial posts had a paged 1 and the wp_reset_postdata has reseted this to page 1 again. So ajax posts need to load posts from page 1 and not page 2. Previously I have iserted array of previous posts so I don’t display duplicated posts.
Hi Alessandro, how can I convert the jquery ajax into javascript fetch?
Thank You very much! Vey heplful video tuts
Cheers
Hi alex, iam from jamaica and iam totally loving your tutorials. I hqve a problem. When i click on load more...my older posts are not loading at the bottom of the page but they are loading in the middle. Can you help me plz
Check my source code on Github to see if you have some typos or mistakes.
Cheers
Alessandro Castellani ok and keep up your great work!!
Thank you very much for so nice tutorial, I am a fan of your tutorial. I have also tried with this tutorial. But, after ajax loaded posts, do not working jquery like- isotop, owl-carousel. Please help me, how to solve this problem. thank you again.
Hi, if you keep following the series you will see a video where I explain why the slider is not working after new post loading. The reasons are the same behind your issues with your other jquery plugins.
Cheers
Thanks, I have followed the series and got the solution. Thanks for good tutorial.
Thanks to reply, one more thing need to solve... when I reached at last page... It need to hide. can you help me please about this. Thanks
Thank you Alessandro
You're very welcome :D
Hi there! awesome video!
Question, any idea why every time I push the button I get the response normally but at the end a zero (0). Actually once there are no more posts i get a 0 every time i push the button.
Oh sorry!, i forgot the die();
Yep, that's it :D
omg 3 hours searching for small error , when i click on load more , nothing appear in my front end , and i check all code and past your code from github and after this error was on the dir folder i was type it get_template_part( 'template-parts/content', get_post_format() )
and my folder name is template-part :D damn shiiit :D
Is this SEO friendly ?
Can I enable infinite scroll for custom post type archive page using this technique ?
Sure
@@alecaddd if possible plz make a vid on that☺
Alessandro, my good sir. You've just answered two weeks of desperate searching! Thank you! I've tried multiple tutorials that I've found online but didn't work. So thanks a load!
Okay, if you don't mind, I have one question and one request:
The question, maybe I missed one of your videos that this, but I notice in your posts loop, there's no actual post HTML there, is this located somewhere else? I just have my HTML in the main posts page and it looks a little messy, keep in mind it's a single-page theme.
The request: as I mentioned, I'm using a single-page theme where the home page, post list and single post is all in one page. So could you please do a video on how to load the single post in the same page via AJAX?
Many thanks, and keep up the amazing videos! :D
+Liam Merlyn Thanks for following.
If you follow my tutorials since the beginning, you will notice that I keep everything separated in PHP files, and call these files with a get_template_part() function.
Check the entire series and you will easily learn how to have a better organized template structure.
Cheers,
Alex
+Alessandro Castellani Hi Alessandro,
Thanks a lot for that. It seems I had actually missed one out. I made the changes and managed to continue following along.
I got the posts to load on the button click, but, like when you hadn't changed the newPage to page+1, and your posts just reloaded the same ones, mine's doing that, I've read over your code a dozen times but can't seem to fix it.
Would you mind looking at my code here: codepen.io/ConduciveMammal/pen/PNmwbb please and see if you can find the problem? I've posted the ajax.php code inside the CSS column of CodePen.
Many thanks,
Liam.
I am stuck at 10 minutes in because I cannot get the load more link to work. Basically the text "load more" appears but it does not appear as a link and nothing happens in the console when I click on it. I have copied the relevant part from github to my index.php and I have copied the .js file. I have checked that the .js is enqueued properly so I am not sure why the link does not work. Any ideas? (note: I am not using bootstrap though)
+Arete Bootstrap shouldn't affect this part at all.
Are you sure your script is properly calling the ajax function?
Go inside your network tab in the browser inspector, and see if, when you click LOAD MORE, a new file gets loaded called admin-ajax.php
Check that file and the response it gets.
+Alessandro Castellani Thanks for helping. If I use the networks tap in the inspector I can see that the admin-ajax.php is loaded when i click on "load more" but not the .js it seems.Nothing shows up in the console.
i have the same problem and i copy past your code same problem still nothing appears
Did you ever fix this? I'm having the exact same problem
really its very helpfull for me thank u so much
Cheers
Hi Alex, I need your help, How I can change the text "Load more" or hide the button when I don't have more post?
Keep watching the videos after this one, I took care of everything
I just found a strange bug, I followed this word for word and my subroutine was failing. Basically my php callback routine was not getting the passed variable, even though it was working in the other direction - i was getting data passed in the response. The bug turned out to be that for my version of PHP the it would only work if I used single quotes instead of double quotes when requesting the $_POST variable.
Oh, interesting. What version of PHP are you running? I'm on PHP 7.1
This was 5.6.34, I've not tested it fully, so it may be something else, can't think what else would cause that.
Awesome thank you
Hi Alex.... I write this just to correct you and maybe it can be helpful for someone else... the data attribute in inspector is dynamically too(everything is dynamic i think).... but when you change the value with jQuerry.data() method....it don't change.... it just put internally in jQuery.cache....if you want to really change the data-* you can use attr("data-*", "value")
Oh I didn't know that. Thank you so much for your correction and I'm sure it'll be helpful for someone else.
Happy Coding!
Great tutorial! But I have a small problem, for some reason the ajax request is sent 2 times, so if I print the data-page with the "this is awesome" value to the front-end for example, it gets printed two times. The same thing happens with the new posts that are loaded, they are also printed twice. Anybody got a solution?
+BJHStyle | Gaming Videos, Ofcourse Found the problem, for some reason did I enqueue my js file twice... Stupid
+BJHStyle | Gaming Videos, Ofcourse I'm glad you found the issue!
Hey - I realy love your all tutorials.
Please make jquery tutorials
because i like the way that you do :)
+Asad Ali Sure, I will slowly implement more jquery and javascript in future lessons.
Happy Coding!
is it possible to make the same but not using jquery and use fetch?
Sure. I'm using fetch in my new plugin series.
load more post is duplicating what should i do
Thanks for tutorial again very useful. I am getting a console error. I tried copying code from git hub. Still having the same error. I am working locally so not sure if that is why. It's a script438 error - it says object doesn't support property or method 'ajax' and then refers to me to the $.ajax in my js. Anyone else had this error and found out where they went wrong?
Which browser are you using?
I know that $.ajax is pretty much globally supported except by Internet Explorer.
Cheers
Hi Alex! I have an Ajax request that does not work as long as the user is not logged in, instead of a php file, Ajax issues the entire site, maybe you know the problem?
Sory for disturbing, I just find out how to fix it. I restricted access to the admin panel, and admin-ajax.php wrote error 302. Found on stackoverflow such a solution:
Add to the exception "&& (! Defined ('DOING_AJAX') ||! DOING_AJAX)"
function mt_redirect_admin () {
if (! current_user_can ('edit_events') && (! defined ('DOING_AJAX') ||! DOING_AJAX)) {
wp_redirect (site_url ());
exit;
}
}
add_action ('admin_init', 'mt_redirect_admin', 1);
I really like your tutorials, they are very useful, thank you!
I'm glad you fixed your issue.
Cheers
Hi Alex, great tutorials but you shouldn't use die() use wp_die().
Hi, thank you so much.You're right also wp_die() it's good to interrupt the execution of the script, but that one is useful to output something before the exit or a timeout. I'm not using it because I don't need to handle any type or response.
Thank you so much for the suggestion.
Cheers
I got error since the console.log(page);
printing 0 and append the whole page into the container.
hi
Thanks alessandro , loader is good but repeated post loaded
Check my source code on GitHub to see if you have any typos.
Every time I press load more, a zero gets printed? what does this mean?
If I remember properly I'm explaining it in the video
sorry bro I cant find it in the video, would you be able to explain? Please
Here's where I explain the 0 returning: th-cam.com/video/7_lU7_JUS2g/w-d-xo.htmlm36s
/* AJAX functions */
jQuery(document).ready(function($){
$(document).on('click','.japi_load_more', function(){
console.log("click");
var page = $(this).data('page');
var ajaxurl = $(this).data('url');
$.ajax({
url : ajaxurl,
type: 'post',
data :{
page : page,
action: 'japi_load_more'
},
error:function(response){
console.log(response);
console.log("FAILURE");
},
success:function(response){
console.log("success");
$('.Post-container').append(response);
}
});
});
});
I FIXED THE PROBLEM :D :D :D
it was because in the $.ajax({ action: '.japi_load_more'
the error was because I had a .
i removed it and it worked
Hey there,
first, thank you 'news',
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged
));
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post(); ?>
bro use a plugin " load more anything"
Hi, thank you so much for the very helpful tutorial, but I have met one problem while doing this. That is the "load more" section does not show up below new post when I click but stay in one place. Can you show me how to fix it? Here is the image:
postimg.org/image/5yxm3oh4t/
oh, I found the problem that I didn't put the button into the container, thank you
No problem, I'm glad you solved it!
doesn't work
You create not infinite scroll, you made load on click button !
You got me
What?
Who?
I did not understood it. :(
Ong 41min . Lame. Bro pls try to short the video
That's not a really polite comment, considering you can watch these videos for free.
If you don't like my content, don't watch it.
why would you want a shorter video if he is teaching you something? Thats like asking a university to squeeze a 4 year course into 1 year because its too long!
Alessandro, your videos are great and i have learned loads. Good stuff takes time, so i have no problem with them being long!
This is an excellent video. Thank you so much for it!!!!