More On AJAX
Ronald
I have a custom block view. I display the last 5 node titles. If someone clicks the more link I want to load the next 5 titles underneath the current 5 node titles. No page refresh and not pager. Is this possible? How would I go about doing this?
And last but not least is a new project in which I just added in light of this question. The reason for the project is my need for also needing views that support load more except the issues mention above we're not acceptable for my project.
Now I have tried unbinding all events using $("body").find("*").off(), but that did not help either.
I know that I do something wrong, I just don't know what.
How can I properly rebind everythink after the Ajax call is done? How can I make shure that object bindings (e.g. $("#news").sortable()) will work properly after the first ajax call?
I would love to use AJAX for all the callbacks on my page, but currently the best solution seems to be just reloading the entire page after every ajax call, which would be rather bad.
Any help is appreciated.
In your example code, it looks like you don't need ajaxStop at all. All it will do is add another click handler, which is the problem. Or if your real code does some more complex initialization that needs to run whenever all Ajax requests are complete, you should factor out the click handler assignment from whatever else needs to happen.
If you are talking about having a load more feature on the front end of the site. ACF does not have any code for the front end for fields and you need to build. There is an example of this here -load-more/examples/advanced-custom-fields/gallery/
I do have an old example of a load more for a repeater that uses a button -dynamic-ajax-select-example/tree/master/repeater-ajax-load-more, the principle is the same. The only difference with infinite scroll is that you need to detect when the page is scrolled far enough to trigger the request instead of using the link.
DataTables will fire a specific error for the case where the request from the server is a valid return (200 Ok for example), but not valid JSON - see technical note 1 for more information. This error (7) indicates a general error, as stated above.
JavaScript works on the other side of the fence, where there is no information about the big things happening on the server. JavaScript work against an auto-generated markup which is rather volatile and is subject to change. Which is why a developer must pay attention to keep both in sync. The larger an app gets the more challenging the task becomes. And that task is typically a manual work which cannot be automated sufficiently to seamlessly scale with your app.
I find that long term that my ajax apps (all intranet's) are easier to maintain because they seem to me much more modular. For instance if I have a page that then loads other content into containers that same content can be easily reused and rendered elsewhere. Source code for each piece is in different files for the views and methods on the controller making debugging/enhancing an easier task. It would really depend on how your using AJAX and how your setting your apps up.
However, there does seem to be more complexity in a UI model with rerendering capability than one with a single render, like a traditional web page served via a single request. This is true for a number of reasons:
On my blog i need a load more button on the bottom of each section that simply loads more posts when clicked. Everything i look at people are using other javascript libraries. I just want to use ajax no external libraries
But there is a better alternative: return data using JSON. Doing this way, the data sent from the server is better structured and the script is easier to maintain as it is more comprehensible for the developer. From the server, you would encode the data to a JSON formatted string. From the client, you would retrieve the JSON formatted string and decode it into a javascript object.
The benefit of using Ajax to load more posts is that our page will not refresh. This means that we can remember things in plain javascript, without the need of storing data in localStorage or using some sort of $store as we have in React or Vue. A simple variable in javascript will do just fine.
I hope my article was clear and helpful for you to create your own ajax load more button. You can play with this to update our code that instead of clicking on the load more button, you will trigger our load-more function when we reach the bottom of the page. This is a way to create a simple infinite-scroll without any plugins.
Hi Alessandro, thank you for your message. To combine the load more with filters, you need to pass your current filters into the load-more function as well. I will try to add a section to this post later this week. But for your JS it would look like this:
Hi Alessandro! I am also trying to add this load more button to a category page. I updated my code to match the updates you made but I am still having issues. Can you update where you added the additional currentPage reset?
Elementor 3.17 introduces the new Rating Widget, offering more flexibility to personalize your visual rating scales for products, content, and more. You can visually represent your rating using Font Awesome icons or by uploading your own SVG. For instance, for a music review, you could use your SVG to give a new album a rating of 5 out of 5 golden records.
A load more button, sometimes called an infinite loader, is a method of displaying records in a stack instead of across multiple pages. The approach uses an AJAX partial to append the new content along with a self-destructing button.
What CMS version are you using? If ajaxPartial is missing, it suggest you may not be using a compatible version. This feature was added in v3.2: Release Note 33: October CMS 3.2 - Page Finder Release - October CMS
When you are using AJAX to load more content to the same page then above case will not work, but you can use an alternatives like dynamically change the URL with AJAX (without # append to the URL because when you append # to the URL, after the # will not crawl the search engines).
I'd definitely consider making an easy to find link to a feed or a place where the content is on static pages (you could then use robots.txt to block Google from it so you wouldn't risk a duplicate content penalty...more applicable to pages than feeds).
To use pagination, you must tell Select2 to add any necessary pagination parameters to the request by overriding the ajax.data setting. The current page to be retrieved is stored in the params.page property.
If your server-side code does not generate the pagination.more property in the response, you can use processResults to generate this value from other information that is available. For example, suppose your API returns a count_filtered value that tells you how many total (unpaginated) results are available in the data set. If you know that your paginated API returns 10 results at a time, you can use this along with the value of count_filtered to compute the value of pagination.more:
You can tell Select2 to wait until the user has finished typing their search term before triggering the AJAX request. Simply use the ajax.delay configuration option to tell Select2 how long to wait after a user has stopped typing before sending the request:
If there isn't a single url for your search results, or you need to call a function to determine the url to use, you can specify a callback for the ajax.url option to generate the url. The current search query will be passed in through the params option:
The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly.
The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR object simulates native XHR functionality where possible.
The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information). These methods take one or more function arguments that are called when the $.ajax() request terminates. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.) Available Promise methods of the jqXHR object include:
As of jQuery 1.5, the fail and done, and, as of jQuery 1.6, always callback hooks are first-in, first-out managed queues, allowing for more than one callback for each hook. See Deferred object methods, which are implemented internally for these $.ajax() callback hooks.
Different types of response to $.ajax() call are subjected to different kinds of pre-processing before being passed to the success handler. The type of pre-processing depends by default upon the Content-Type of the response, but can be set explicitly using the dataType option. If the dataType option is provided, the Content-Type header of the response will be disregarded.
If jsonp is specified, $.ajax() will automatically append a query string parameter of (by default) callback=? to the URL. The jsonp and jsonpCallback properties of the settings passed to $.ajax() can be used to specify, respectively, the name of the query string parameter and the name of the JSONP callback function. The server should return valid JavaScript that passes the JSON response into the callback function. $.ajax() will execute the returned JavaScript, calling the JSONP callback function, before passing the JSON object contained in the response to the $.ajax() success handler.
aa06259810