2

I'm working on a project which needs to load via AJAX some HTML information on the page.But I'm not quite sure how to load that information.

I don't know which method is better for me:

1) Load the entire HTML with AJAX and then just append it to the page

or

2) Load only the data with AJAX and then build the HTML using Javascript(+JQuery)

The one I tend to use is the first method because it's the easiest one but also it is more expensive regarding the memory (the biggest file I have to load has about 7kb which is not too much)

The second one which is the hardest, involves a huge Javascript (Jquery) code to build the HTML(I have also to load the attributes for the element).And because I have lots of different HTML code to load I have to make lots of conditions (e.g. one for a button, one for a title, one for a textarea etc) and also I have to create variables that containes that HTML.

My question is what method is the best to use in my case?

Improve this question
2
  • 2
    You need to be much more specific if you want people to be able to answer your question. What are you trying to implement? Commented May 21, 2013 at 12:12
  • I'm just trying to load some html on the page and i don't know which way is better:load plain html or just the data from html and then build it using javascript Commented May 21, 2013 at 12:20

3 Answers 3

Reset to default
3

I would always stick to the solution where I cleanly divide data/logic and view. This would probably the case in the first alternative. Making changes to HTML generated with JavaScript is quite hard.

I'd suggest another option: Use client side templates. Load the template and the data with an ajax call and then fill out the template using javascript. There are some libraries out there for this scenario.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I agree with this answer. Just sending JSON and creating the html via a templating library is better from an architecture point of view. But if you have to update a small part of your page and don't have much use for a templating library in other parts of your app, you can just directly send the html.
I was also going to suggest templates. I've tried all three approaches. Imo the most important thing is to separate your code properly. It's hell having to edit HTML inside a bunch of JS.
0

I can imagine a couple of developers working: A full-time back-end developer and a full-time front-end developer. The BE developer has to send some data for the FE developer to display it right. Thinking of programming as easy as possible, he chooses the first method described by the OP. Everyone is happy.

A few months later, the presentation of this very data needs to be updated. The manager quickly calls the Front-End developer, which says:

"Uhhh... No can do. The entire data already comes formatted directly from the server."

Oh noes! Would this have happened if the data came only as RAW DATA from the server? I wonder =)

Improve this answer

3 Comments

So which method do you choose regarding to your example? The second one?
Yes. I always chose that. The downside is it's more complicated, of course. But I believe that it's better because it's decoupled. In my opinion, you end up having less trouble.
My problem is that the html is parsed by the php(my own template engine) because i use a language select engine(also my own) so if I want to use RAW DATA I have to include also the file with the specific user language. What i noticed is that GitHub uses the first method to get data(plain HTML)
0

the second method:

Load only the data with AJAX and then build the HTML using Javascript(+JQuery)

is much appropriate, one main advantages of these method is your ajax response will become faster. Also, it is more logical to separate the logic from design.

Note: always the best solution is depend on your specific case.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.