Refreshing a section within a page

PHP
1

Hi guys,

I’m developing an e-commerce website at the moment. Every page on the website will contain a mini-basket on the right hand side. There are many ways the user can trigger its contents to change either via interacting with it directly (updating quantity, removing item etc) or indirectly by adding a new item to the basket. Pretty standardised behaviour.

My question is what’s the best way to make it automatically update, as soon as its content changes. The first thing that came to my mind was to do it via AJAX i.e. content changes -> AJAX request -> generate the full html containing its updated content -> return it -> replace the basket’s html with the response. However this approach means that the AJAX response not only returns data, but it wraps it up in html too. I’m not sure if that’s bad practice. I know there’s an alternative to wrap the response in the correct html via the Javascript after the AJAX response has been returned. However, this will still mean I’ll have the html of the basket duplicated; once in its PHP page and another time either in the AJAX or JS file. Is there a more elegant design that exists that won’t result in any code duplication? Have I missed an obvious solution?

Alternatively, I thought about putting the mini-basket in an iframe, and simply reloading its content as soon as it’s been interacted with. This would result in the code duplication not being an issue, but I’m pretty sure this isn’t the most practical solution either.

Any help or guidance is much appreciated.

Thanks!

2

I think the AJAX solution is neater.
One way to solve the duplication problem is to not include the basket in the page when it’s generated, but request it with ajax once the page has loaded.

OK, it’s an extra request to the server, but I think the overhead will be negligible.

3

Take a look at HMVC to reduce replication and promote modular reuse.

Alloy uses HMVC. You can use that to get an idea.

In most cases refreshing a section using AJAX comes down to making a request for the section without the wrapper/layout and using innerHTML. That is if the architecture is designed in a modular, hierarchical format.