HTML inside JS? Or in separate html file(load via $.ajax or $.load)

Question

What would be the better/best solution? previously all my markup were all initialized in an html file,

index.php :

//login block
<div id="login">
    form ...
</div>

so whenever I logged in, I have to remove/hide these login block by using $.ajax to check if there's an existing session then hide the whole login markup ( .hide() ) and show a different markup for logged in users.

The problem with this is that, it waits for the whole document to load before it executes the script, so the unintended/hidden markup will show and then vanished quickly upon page load.

I also tried putting the markup inline inside javascript, but I think it violates the "Unobtrusive" idea in js.

eg

var markup_arr = [
    '<h4>Login</h4>',
    '<form></form>'
];
var markup = markup_arr.join('');

So I end up with this

Current solution: separate html file and loading it using jQuery's $.load()

What are you using, which are the best practices and which one loads fast? Or are there any better solution out there that you can suggest? Thanks.

EDIT: These are all javascript/ajax processes, so I'm not looking for a server side solution(include,require_once)

Answer 1

There's no correct answer to this. My view is you want to deliver the minimum amount of data to your users, in the minimum number of requests. It's all about finding the right balance. Depending on your users the balance will change to.

For me, I'd prefer sending two files that are 5kB each, rather than four that are 2kB. You're sending more data, but as there are less requests it should be just as quick. I'd think that delivering it as part of the Javascript might be best. Note it doesn't necessarily need to be the same file, although I'd deliver it as one - have a simple (PHP etc) script which joins the code file and the data file into one, then passes it out

The other thing I'd make sure is that you're caching everything as best you can. Having a slightly bigger file isn't generally an issue if you only have to download it once and it caches for a year. If your users are downloading a larger file every day, or worse, every page view it becomes an issue.

Answer 2

What I would do is check server side if the session exists, and include your separate "html" (php/rb/py/asp/whatever really) file if the session exist, and the login form if not. When the user logs, ajax would answer the same "html" file. (if I understand your problem correctly, and the login form is a single line in the page header).