Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Javascript Pagination.

IrishDave

New Coder
Hi everyone, hope your all couping with lock down.
I have a question regarding pagination and hoping for some advice.
I have created a members profile page on my website (development site) which allows users to add a post on their profile.
I added some pagination with a load more button. The page loads 3 posts then the user can add more if they hit the load more
button. This is done by using an Ajax call to a php script that returns 3 post at a time.

Each member post has a function to delete their own post.
I do this by using a Javascript Ajax call to a php script that deletes the post.
Then I simply use JQuery to remove that post from the DOM so it is no longer visible to the user.
Now for the problem, removing the post from the DOM breaks my pagination.
When the user removes their post I would like another post to simply take that posts place.
Because I have 3 posts per page when 1 is remove 2 posts are left. The page does not update
with other posts that exist. I probably have confused everyone now.
Im sort of looking for some advice on how to approach this problem.
Thanks a lot,
IrishDave
 
Hey there, @IrishDave.

I'm not a JS or PHP programmer, but I do want to ask about the way you're approaching this. First of all, you say that the user of your website has a profile and can post on it, similar to a Facebook timeline or Twitter profile. But yet, this post will be put into a page of it's own(Pagination), but why though? Why put a profile-post into a page of it's own? Because at that point, it isn't a profile-post anymore, rather it's a Reddit or forum thread.

Also, as a suggestion, could you perhaps share your code with us? That will give us a way to approach your problem.

Thank you.
 
Hey there, @IrishDave.

I'm not a JS or PHP programmer, but I do want to ask about the way you're approaching this. First of all, you say that the user of your website has a profile and can post on it, similar to a Facebook timeline or Twitter profile. But yet, this post will be put into a page of it's own(Pagination), but why though? Why put a profile-post into a page of it's own? Because at that point, it isn't a profile-post anymore, rather it's a Reddit or forum thread.

Also, as a suggestion, could you perhaps share your code with us? That will give us a way to approach your problem.

Thank you.
Hi Mathematical,
Thank you for showing some interest. Coding is a hobby to me as I have always had an interest, so I don't class myself as having masses of experience.
So, like I said the users profile allows them to share a post. I used pagination/load more button so that all the users posts didn't make the page really long.
Another reason was the time it would take to load all the posts, possibly might slow the page loading. So like you said I went for a Facebook type approach.
I thought this is how it was done, I am probably wrong in my approach.
I will attach some code in the form of screenshots. Also some screen shots of the post set up on the actual profile page.
I hope it helps.
I have made 6 screenshots.
1: The post setup on the page (pClip1.jpg)
2: The post menu button (pClip2.jpg)
3: The post HTML (phtml_postForm.jpg)
4: An overview of the JS document ready / js handlers/function (pClipJSDocReady)
5: The JS fetch post function and the load more function (fetchPost_LoadMore.jpg)
6: The delete post screenshot and JS function.

I hope you can make sense of the method/approach.
Regards, David
 

Attachments

  • deletePost.jpg
    deletePost.jpg
    127.3 KB · Views: 5
  • fetchPost_LoadMore.jpg
    fetchPost_LoadMore.jpg
    185.4 KB · Views: 5
  • pClip1.jpg
    pClip1.jpg
    82.5 KB · Views: 5
  • pClip2.jpg
    pClip2.jpg
    38.9 KB · Views: 4
  • pClipJSDocReady.jpg
    pClipJSDocReady.jpg
    240.2 KB · Views: 5
  • phtml_postForm.jpg
    phtml_postForm.jpg
    248.4 KB · Views: 5
Hey, @IrishDave.

Thanks for explaining why you chose to use pagination as a way to display posts. I do agree that by loading all of the posts at once on a single page, will slow down the browser, so you've chosen a good approach to doing this.

Now regarding your issue, I have no clue on how to fix it, as I'm not a web-developer. I'm not experienced with DOM, JS, Ajax, or PHP. So, unfortunately I cannot help you with the nitty-gritty details of your code.

I do believe that somebody like @Ghost could possibly help.

Again, I'm sorry that I can't help you with the code, as again, I'm not a web-developer. The only bit of advice that I have for you so far, is keep working on the project; do your best to keep the code clean, maintainable, and readable; and if you have anymore issues, feel free to ask them and somebody should be able to come along and help.
 
You need to basically trigger the load more button.
When 1 is removed, the fetch posts (from the load more function) should be used. You should add on to this to have an extra parameter (perhaps variable num_count) that dictates how many posts to return.
Then go into the PHP controller and add this parameter ($_POST['num_count']).

Then you can modify the initial load to send the # 3 for the num_count so that 3 posts are loaded originally, and do the same in load more. Then when one is deleted, you just send the action request to "load more" posts with a num_count of 1 because only 1 was removed.

Also make sure you're careful because if the JS function doesn't receive posts back it will turn the whole posts section's HTML say 404 not found or whatever. You should adjust this so that load more / auto-loading more doesn't result in anything show up blank or with a 404 error.
 
You need to basically trigger the load more button.
When 1 is removed, the fetch posts (from the load more function) should be used. You should add on to this to have an extra parameter (perhaps variable num_count) that dictates how many posts to return.
Then go into the PHP controller and add this parameter ($_POST['num_count']).

Then you can modify the initial load to send the # 3 for the num_count so that 3 posts are loaded originally, and do the same in load more. Then when one is deleted, you just send the action request to "load more" posts with a num_count of 1 because only 1 was removed.

Also make sure you're careful because if the JS function doesn't receive posts back it will turn the whole posts section's HTML say 404 not found or whatever. You should adjust this so that load more / auto-loading more doesn't result in anything show up blank or with a 404 error.
Hi Ghost,
Thank you for your thoughts. I will write down what you mention and go through it in detail.
Thank you once again.
David.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom