CODEWITHSUNDEEP
javascripthtmlajaxdryhtml-generation
Kira M. Backes
Kira M. Backes

Reputation: 550

HTML that's both server-side and javascript generated - how to combine?

I'm usually a creative gal, but right now I just can't find any good solution. There's HTML (say form rows or table rows) that's both generated javascript-based and server-sided, it's exactly the same in both cases. It's generated server-sided when you open the page (and it has to stay server-sided for Google) and it's generated by AJAX, to show live updates or to extend the form by new, empty rows.

Problem is: The HTML generation routines are existing twice now, and you know DRY (don't repeat yourself), aye? Each time something's changed I have to edit 2 places and this just doesn't fit my idea of good software.

What's your best strategy to combine the javascript-based and server-sided HTML generation?

PS: Server-sided language is always different (PHP, RoR, C++).

PPS: Please don't give me an answer for Node.JS, I could figure that out on my own ;-)

Upvotes: 2

Views: 558

Answers (5)

Robin Maben
Robin Maben

Reputation: 23074

Load the page without any rows/data.

And then run your Ajax routines to fetch the data first time on page load

and then subsequently fetch updates/new records as and when required/as decided by your code.

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359906

What's your best strategy to combine the javascript-based and server-sided HTML generation?

If you want to stay DRY, don't try to combine them. Stick with generating the HTML only on the server (clearly the preferable option for SEO), or only on the client.

Upvotes: 1

Peter Olson
Peter Olson

Reputation: 142939

Make a server handler to generate the HTML. Call that code from the server when you open the page, and when you need to do a live update, do an AJAX request to that handler so you don't have to repeat the code in the client.

Upvotes: 1

Claudiu
Claudiu

Reputation: 229421

Make a page which generates the HTML on the server and returns it, e.g.:

http://example.com/serverstuff/generaterows?x=0&y=foo

If you need it on the server, access that link, or call the subroutine that accessing the link calls. If you need it on the client, access that link with AJAX, which will end up calling the same server code.

Or am I missing something? (I'm not sure what you mean by "generated by AJAX").

I don't see another solution if you have two different languages. Either you have a PHP/RoR/whatever to JavaScript compiler (so you have source written in one language and automatically generated in the others), or you have one generate output that the other reads in.

Upvotes: 0

x10
x10

Reputation: 3834

Here's the Ruby on Rails solution:

Every model has its own partial. For example, if you have models Post and Comment, you would have _post.html.erb and _comment.html.erb

When you call "render @post" or "render @comment", RoR will look at the type of the object and decide which partial to use.

This means that you can redner out an object in the same way in many different views.
I.e. in a normal response or in an AJAX response you'd always just call "render @post"

Edit:
If you would like to render things in JS without connecting to the server (e.g. you get your data from a different server or whatever), you can make a JS template with the method I mentioned, send it to the client and then have the client render new objects using that template. See this like for a JS templating plugin: http://api.jquery.com/category/plugins/templates/

Upvotes: 1

Related Questions