I have a php code page that pull data from a database. The data then should go into javascript, which is a separate .js file (and i need to use Jquery too). I want to separate my .js and my main html page too. How would you do it, which one should be included in which?
And if you also use Smarty, how will that change the structure?
Thanks!
Whenever I'm generating Javascript data on the server side, I try to keep it entirely separate from the rest of the Javascript and HTML code. The cleanest way to do this is often to implement a basic API for your data: Create a PHP page that serves up pure JSON data from the database based on the URL and/or querystring, then use $.getJSON() to load it from the server. This approach avoids the cruft of generating Javascript with PHP, and allows for asynchronous loading of data, which may improve your UI.
If you don't want to deal with an asynchronous load, you can generate a file with just enough Javascript to define a variable:
echo 'var data = ' . json_encode($data) . ';';
and then refer to data in your subsequent Javascript.
Because this keeps the data wholly separate from your HTML and other Javascript files, it shouldn't have any influence at all on how you set up your templates.
Related
I use a MVC PHP framework to keep my web applications as DRY as possible. All of my HTML templates are neatly tucked away in one folder in the application scope of my project.
The problem is that whenever I use a JSON string to build a page with AJAX, I need to reuse a lot of lines from these templates and copy them somewhere in my JavaScript files. This means there is code duplication between templates in my JavaScript files and templates in my PHP application.
I was wondering how this duplication can be prevented. One way is of course to load the template using AJAX, but then I would end up with a double AJAX request for one page. Furthermore, the PHP templates uses different tag styles to represent variables than MooTools, but the HTML setup is the same.
So to summarize: is there any neat way or a tool to prevent duplication of templates so one file could be used in both PHP and JavaScript? For the record: I use the MooTools framework to build my JavaScript files.
Edit
After some research, I found the best answer yet in my opinion. For those who are interested:
PURE
PURE separates HTML representation and JavaScript logic completely so you don't have to bother including HTML elements in your scripts. The template can simply be provided in the HTML file itself.
Example:
// JSON string
{ 'who': 'me' }
// In your rendered HTML page:
<div id="who"></div>
// After the JSON string is sent back
<div id="who">me</div>
Furthermore, it can be used by a wide selection of libraries: MooTools, jQuery, dojo, Prototype etc.
Interesting question that I'm struggling with sometimes too.
you can put your html in your javascript code, which is duplicating and which you want to avoid
you can load your html with a separate ajax call, which causes more ajax calls to be run, and possible slowing down of your app. you may want to avoid it.
you can pass your html within the Ajax call that will load the data. That way, you only have one call. Let your PHP open your templates, and add them to the data-json stream.
you can put the template inside your original html, put it as hidden.
I'd go for solution 3, or possibly 4 if templates are small and limited.
The JSon would then be something like {"data": ... your original data object, "templates":{...}}
You might be looking for a template langugage that is available for multiple languages so you can re-use your templates across language boundaries.
One such template language is {{mustache}}, works in both PHP and Javascript and many more languages.
I am (mostly) a front-end developer working on a prototype with a backend guy on a site. The basics of it would require a user login area, as well as a search form that would search and return results from a database table.
He is doing the backend logic with Java and PostgreSQL. He proposes to return a JSON format to me upon a query. This means I will have to take the data from the JSON string and populate/create the HTML markup. I can do this with either Javascript, or PHP. It seems to be that PHP would be a no brainer as I don't need to create HTML markup with Javascript/jQuery and also all the data populated by the server already, reducing the load on the client side, but this means as a "front-end" person I am also writing PHP.
And regarding loading all server data onto a page with Javascript, is this standard practice? Or should it only be used on AJAX?
Should the backend guy be generating the markup as well? What's the best way of separating this frontend and backend work? THanks!
If you are using PHP, you are a backend-guy, too.
If the markup is generated by the server, than you would usually not write an AJAX-application, because the markup is generated by the server.
In fact if you want to write a ajax-application, you have to manipulte the DOM with Javascript. Use jQuery or something like that to do this.
Seperating frontend and backend is done by creating an Interface, a contract which will separate the UI from the Backend-Logic. In your case the contract is the format of your JSON Data.
A good compromise would be to do either:
Option 1
A small PHP script server-side which formats the restults into a table with appropriate Ids/similar to allow javascript to add classes for styling. This entire table could be returned via an AJAX call and placed within a placeholder div on the page.
Option 2
The server returns simple JSON to the front-end, the front-end uses whatever mechanism it sees fit to build the appropriate HTML
The first one is a little cleaner to code - The generation of the HTML is seperated from the styling, but it's an extra hop (the PHP) and is slightly inflexible - the JS can modify the table as appropriate but it's limited by the html PHP sends.
The second is slightly more verbose to code but completely flexible.
I send the data from the server to the browser in JSON all the time, format on the browser with templates of one form or another. I would rather work with arrays in Javascript as the array methods like map and filter make it much easier.
Im building a custom jquery modal box that loads an external html template file that contains variables that need to be replaced. For instance: [user-name]
I know I have 2 options for modifying the template file:
use find and replace in jquery
process the template server side and
simply send the result to jquery
From a user performance stand point, which would be faster?
From a user point of view it would be faster to use jquery . you don't loose time by sending and reciveing data from the server
Not having any details about why you're asking, I would say that it probably doesn't matter.
I have been making extensive use of XMLHttpRequests and JSON to fetch from a MySQL database and return records as arrays. It works perfectly.
Additionally, I have three cases in which I have the server (via PHP) formatting the data as a web page and creating bar charts (as opposed to sending arrays back to JavaScript for processing). Currently, I call the PHP file via a hidden iframe and then insert the HTML into a DIV (since I don't like certain aspects of iframes and prefer to not have them accessible).
Is using an iframe the best method or can I accomplish the same thing via a XMLHttpRequest and JSON? I'm asking because of the length of the data being returned. At present, it translates to a full page of data, but I want it to be extensible (e.g., perhaps a couple of pages of data in the future).
Thank you for any insights.
If you want to get formatted html from other page and insert it in the current page dom the easiest way according to me is using the jQuery load methods. It make ajax request to a given url, gets the html and appends it to specified page element.
Generally the two methods - passing JSON data and passing Formatted html are good for different things. I personally prefer to pass JSON data and format it with client script and html. In this way it is more reusable.
What's a better practice? Load data in HTMLformat or JSON-format? When I load HTML i'm able to keep all the html in my php view-file. When i load JSON I have to put it in html elements clientside with javascript.
I know that a 'best-practice-question' isn't suitable for stackoverflow. So a better answer to my question is a list of benefits and disadvantages of both techniques.
I'd say use JSON whenever you need to process the data client-side, use HTML when you just want to dump it into some container-div.
For example, consider an image viewer, you can fetch a list of preview-image-urls using JSON, create a list of images client side and display them, scroll them around and so on.
On the other hand, if you're performing some action using ajax, and you just want to display a status message (like your table of data in the popup div), I'd suggest rendering the HTML on server side and just display it.
If you plan to call the data often in the same session, the network traffic and the responsiveness will be better if you just call JSON data. The HTML/JS overhead being in the cache, only data will cross the network from the second call.
However it looks you just need to render a table with TRs/TDs. If you don't call it often, you're better off with a simple HTML dump.
Another consideration is about clearly separating the data and the view, for cleaner code and easier maintenance. A JSON call allows a clear separation between data and HTML. In an HTML dump both are mixed.
I've just answered to another question, it was for JSP, but that may interest you.
What is the best approach for handling a complex form in html?
If you later have to do a mobile version, or another client in general, you might benefit from using JSON all over. JSON will also be smaller (might matter or not, depending on your html, the amounts of elements, ...)
Here's a good article on the subject: http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html