I am currently working on a small web application which includes a calendar displaying its entries. When the page gets loaded, the calendar gets generated through PHP.
On the same page, there is a form which allows one to edit the entries. The command to change gets sent by AJAX, and then the calendar has to be reloaded in some way.
What I am wondering about currently is the following:
I have two possibilities of updating the Calendar through AJAX.
- One is to send the Calendar’s HTML Markup anew, whether it means reloading the entire calendar or the element of the calendar entry.
This is probably not optimal, since it requires quite a bit of (raw) data sent through the AJAX call.
On the other side, all it requires is for me to call the same PHP function which generates the markup again, return that and then replace the DOM Element on the clientside, so neccesary work is roughly 5 lines of code.
This is the way I am currently using since it feels “easier”. - The other is to send the Data of the new Calendar entry JSON encoded, and then make the neccesary changes through a javascript function into the existing markup.
This also feels not optimal, since I would have to use a lot knowledge of the markup twice: Once in the PHP code and once in the JS Code. I can see this redundant code causing problems as soon as the markup would change in any way.
It also feels like a more ‘complicated’ solution, which includes easily 4-5 as much code considering I have to manipulate a good amount of fields (roughly 10+).
On the other hand, a lot less data gets transmitted since only the content gets sent.
Which is the better solution? Am I missing a third (or even fourth) option?
The second option doesn’t necessarily need to involve redundancy in your code.
Your position is that it would do because you’re rendering the calendar HTML in PHP on initial page load, and you want to avoid duplicating that logic in Javascript.
The way to avoid that is to put the calendar rendering entirely Javascript, and always send the calendar data as JSON from your PHP code.
On initial page load, this would mean that the PHP program supplies an initial set of data for the calendar, which is then populated by a Javascript initialisation function (eg
$(document).ready()if you’re using jQuery).This solution means that your code uses a consistent Javascript-based rendering in all cases.
Of course, your first solution also means a consistent codebase doing the rendering, so both options work just fine from that angle. So if that’s the criteria, then there’s very little to pick between them. Obviously if you have option one coded up already, then that’s a clear winner over option two, unless you have a good cause to switch to Javascript. But other criteria that might come into play could include the possibility of rendering something else using the same JSON object, using it to populate an existing third-party Javascript date control, or providing it as an API for third parties. For these cases, JSON is a clear winner, because it provides more flexibility.
So I guess it depends on you, and what’s important to you. But I guess the main point I’m making is that both options are possible without duplicating code.
Hope that helps.