I have a little bit of a conundrum. Basically I'm developing a WYSIWYG Editor plugin for jQuery specifically for my web application. One of the features will be inserting an inline image tooltip based on the images a user has uploaded. For example:
Hello there my name is [i="profile_pic.png"]A. Username[/i]
The part that I'm having an issue with is, when defining which images are available to a user, whether I should insert the PHP array directly into the Javascript like so:
var available_images = "<?=json_encode($User->Profile->images)?>";
or to go for an Ajax GET that returns an encoded array of the image sources? I think the inline php makes more sense since it removes the need for an unnecessary ajax call but I didn't think that inserting inline php into javascript is terribly good form?
Any suggestions?
There's nothing wrong with inserting data collected by PHP into JS, how else would JS get the data? The only reason you should consider the AJAX call would be, if users could upload new images while they are editing. This would mean the information needs to be updated, which would make the AJAX call more appealing than the static JSON on page load.
Unless the array changes in any way over the life time of the page, then I'd spit out the array exactly as you suggest in your code snippet. There isn't any real benefit to having an extra ajax call because the size of the array I'm guessing won't be so huge as to impact the initial page load time.
If you look around the Stack Overflow pages and do view-source, they do this sort of thing all the time.
If the amount of data is huge and maybe adds a seven or more seconds to the page load time then I'd consider an ajax call. At least the page is rendered and the user has something to look at, meanwhile you can have a throbber image with a status message saying loading or whatever.
I'd also say that I see a lot of unnecessary ajax goings on just for the sake of it. It's like premature optimisation, people adding complexity to solve a problem they don't have. Start off simple as you're doing, if you're having response time issues down the road with the said page, then consider what benefits ajax will bring to the table.
Do you always get the array of images, or only sometimes (e.g. in response to a user's action)? If the former, I'd say do it inline. Otherwise do it as AJAX. i.e. only do it by AJAX if it'll reduce your traffic etc. But if you have to always do it, I don't see any advantage. I don't see any problem with mixing inline php and javascript, other than it means you have to do your javascript inline too instead of in external .js files that can be cached (or at least the part where you populate your array).
Related
I thought I should ask this before moving forward with my scripting project and later on realizing that I might be doing something wrong. Might as well save my own time in the first place by checking if what I'm doing is indeed correct.
I'm pretty new to PHP and JQuery and still getting the hang of them both. I recently came across a problem in which I wanted to run some PHP code after executing a certain function using JQuery, so after doing some reading online I got the idea to create a PHP file which does just what I want to do and POST to it from my JQuery function with the needed variables. That way I achieve my server-side and client-side goals on the same time. However!
It doesn't look right to me. At all. I find myself having at least ten include files for one simple page. Those files get included in my HTML code when the form loads, and after refreshing a certain DIV with my JQuery function, they get reloaded. That way I can keep my script dynamic, I doubt there's something else I could do in order to keep it that way.
However I often need to update stuff after executing a certain JQuery function, hence I call a similar file to the loading one, but this time it's a file which I transfer some parameters to (using the POST method, through JQuery), and execute the desired action in the file itself.
Now, after briefly explaining my current situation and method of work, I'd like to know if what I'm doing is correct. In case you're still wondering what the hell I am talking about, I'd like to explain in detail what I mean:
Let's say I have my index.php file which prints data from my database and some additional lines as well. Once I click one of the page buttons, I want to update my database according to the form I've got implanted in my page as well, and then reload the DIV which contains that data ONLY. I do not want to reload the entire page.
Now if I wanted to do that without JQuery that would have been easy. I would POST the data to the same form and update it if the POST parameters are indeed valid. However, there's no way to refresh that DIV without JQuery, so I came up with something similar to this:
$.post("/files/dosomething.php", { taskID: _taskID }, function(){
$("#div_tasks").fadeOut(800, function(){
$('#div_tasks').load('/files//load_div_A.php', function(){
$("#div_tasks").fadeIn(1500);
});
});
});
That's what I've been doing in my last week of learning PHP and JQuery. Now before I proceed any further than this, I'd like to know if it is indeed the right way to achieve my goal.
// EXAMPLE B:
I've got a DIV in my HTML code which prints a table of tasks, for instance. How do I print it? I include a file which echo's the table at the exact point where I want the table to be displayed. Then, in each row, there's a button called 'delete' which removes the selected row from the database. What I do is, using JQuery (due to the fact I want ONLY that DIV to be refreshed), I call another external file calling remove.php and send the index of the task I'd like to remove using POST. The file performs the server-side code and once it's done, I load the updated table into that DIV by calling the file I used to call in the first place from my main page. This time the table will be updated due to the fact it will read the updated data from the database.
Is that how I get this done? Is this the right way? It just doesn't seem right to me. I've never been codding that way and it seems a little bit messy.
Thanks in advance and sorry for the long ass question.
The problems you describe are exactly what the separation of concerns patterns (like MVC) where designed to tackle.
In your case from display instance to display instance the only thing that changes is how the response must be formatted and provided back to the user.
I would highly recommend looking at some of the more popular and well documented MVC Frameworks for your project (or if for nothing else just to play with and draw inspiration from, most of them and some pretty easy to follow starter tutorials you can run through in an hour or so).
It seems to me you are viewing the problem in a mindset compatible with these approaches and it probably feels clunky to you mainly because you are missing a lot of the structure and tooling that these frameworks provide.
If I am understanding the question correctly. I would think that it would be easier to post(using jQuery) to another script that performs the action you want to perform and only returns the result(html/json data) that you want. Right now you are making two requests to the server for something that seems to be tied together.
My suggestion would be to call one PHP script that performs the specific action that you want to perform(say an update to a news item for an example). Then return that data only in your response and then format that data how you want to in your div using jQuery.
$.post("/files/writetodatabase.php", { taskID: _taskID }, function(data){
$('#div_tasks').html(data) // this is assuming you return html, other wise you // could return JSON data and use it here
});
I tried to make that as clear as possible, difficult to explain when typing.
I have a very large site and it takes pretty long time to load. It takes around 120 seconds. What I'm trying to do is loads 1st half of the site loads 1st. Then user can surf while others parts are being loaded.
What I'm trying to do is below.
1st of all is this possible ?
According to my knowledge Yes since Google PageSpeed does that. But the problem is if I use PageSpeed I would have to change my DNS server settings and etc. I would like to do this myself.
How can I get it done ?
What type of technology should I use ?
Given that pages have the .php extension and written in PHP language.
You can use the concept of lazy loading.
You can load only content that is necessary during the load then using jquery and ajax you can load the remaining content.
In this way user can surf and interact easily with the the part already loaded while the other part will be loading asynchronously.
jQuery ajax or post method can help you on this.
A simple example could be,
If There are 5 parts of contents in your page, 2 needs to be loaded immediately
The page will be loaded with 2 parts loaded, so it will take quite less time than 5 parts loading
After document is loaded you will use ajax to load the remaining 3 parts.
Ajax will send request to the specific page of your website(can be possibly named AjaxRequestHandler.php) with some parameters, and this page will process your request and generate html for this and will send it back to your main page which will just show this returned html and this all be happening asynchronously, so the user will be able to communicate with the initially loaded 2 parts
And even if you are new to web technologies, I suppose you have to have the knowledge of atleast ajax and asynchronous calls etc. to achieve lazy loading.
Edit :
For your this question
Except AJAX Is there way around for this?
I think you can try iframes if they can help.
Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.
This jsFiddle
jsfiddle.net/cGDuV/
can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.
You can use javascript for the same if you want to avoid jquery.
You can manipulate the output buffer such that it flushes early thus achieving what your after in the screenshot you posted in your question.
http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
You can lazyload all your images. Here's a jquery plugin that does it easily
http://www.appelsiini.net/projects/lazyload
You can combine all your js in one file. Same with your css files. This will help the speed.
You can incorporate caching, expires headers and gzip/deflate compression
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
I would suggest you load your 3rd party javascript widget garbage (Google+ buttons, fabebook like buttons, social, twitter stuff) in a non blocking asynchronous way so it does not slow down the page in the beginning.
http://css-tricks.com/thinking-async/
Optimize your images as much as possible.
http://kraken.io/
Use a CDN
http://www.maxcdn.com/
Finally test your site and see where is the big bottleneck and where you can improve the site for speed optimization. Use the waterfall chart feature
http://www.webpagetest.org/
One of the things you can do is to load all the essential (top half) of the page normally, then use javascript/ajax to load the second half of the page. This is a very common technique (and is often used to load images).
Here is an excellent tutorial from jQuery for Designers, walking through how to use jQuery to load images asynchronously after the page loads. http://jqueryfordesigners.com/image-loading/
Having said that, a two minute load time seems very excessive. Maybe you should check if there is anything that could be slowing down your server.
You need to determine why the site is loading slow. What is the size of the data you are sending? Google and Firefox have web developer tools to help you determine which elements are taking the longest too load. Once you've determined the culprit, try to load the worst offenders asynchronously.
Check out this article on aync requests: https://segment.io/blog/how-to-make-async-requests-in-php/
in my opinion you need an endless scrolling solution. That is, have a fixed amount of content per "page" (could be an estimated 1500px worth of height). Use jQuery to load another "page" when user scrolls down by a set amount.
If you really want to unconditionally load all the content, just use the same approach, and on document ready trigger the next page to load. The loop the page loader until the whole thing is loaded. That way, you load the first "page", and defer the content "below the fold" to subsequent requests.
What you want is what Facebook does Bigpipe and here is a relevant SO post: Facebook Bigpipe Technique Algorithm
There are other solutions involving all sorts of Javascript but since you want PHP and Facebook uses PHP you should read up on Bigpipe. Juho even has an example written in PHP so that should meet your PHP requirements (but yes it still requires js but not AJAX).
Prefetching Resources the web page require large files for loading can often benefited from changing the order that those files are requested from the server. Sometimes, it makes sense to download files before they are necessary, so that they are instantly available once requested. When the resources required for a page can be loaded in advance, the user-perceived network latency for that page can be significantly reduced or even eliminated. When you run Google pagespeed insights and see the result, you will see how the fix the problems in your website.
Some tips to load site faster:
Make fewer HTTP requests
Add a far-future expires header
Gzip your page's components
Minify your JavaScript, CSS and HTML
One more thing when loading a webpage and if you are using php with smarty you can use this plugin which reduces the number of http requests to you server and makes the site load faster by combining all the js and css resource's request into one single HTTP request.
Alternatively you might be looking for these plugins.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
http://www.wookmark.com/jquery-plugin
Does all this stuff have to be on the same page? Does it make sense to split the content over multiple pages? Can some of it be delayed until the person requests it? Can it be grouped into tabs? Hidden tabs could be lazy loaded for instance.
Give serious thought to restructuring the content in other ways. You might be able to come up with an alternate arrangement that simplifies the problem.
Having in mind all that was mentioned above you may think of caching parts of your data/html code with memcache or in any other way possible so you skip its generation every time. Of course this depends pretty much on how often the data changes.
Don't browsers render the document as it comes in? Whatever you put at the top of the file will be received by the client first, and therefore will be displayed first. For example, when you try to view a very large image file online, it loads from top to bottom. The same is true for web pages. Just put the content you want to load first at the top of the page!
Answer to question one: yes
Answer to question two: above
Answer to question three: Nothing, just put the page in the correct order.
Well the idea is more or less the same as described by Pawan Nogariya above. You will need to fetch views and data asynchronously and then display these. But this means that you will never redirect or post back to any other page rather will get every view via ajaz. This will make you application SPA (Single Page Application) like Gmail. And, this will also mean you need to keep track of what has been renedered and what not, leaving you in a mess. So, instead of doing everything your way there are already developed and popular frameworks available that let you do that but they also make it SPA. Which means that your application doesnt "posts" to the server as in redirection but everything is doen using Ajax.
You can use Backbone (Backbone.js), Knockout (Knockout.js) and may others to achieve this. These are javascript based frameworks that help achieving what you have just asked and may expample and tutorials are also easily available. You can use it with any language as we are using it with C# (MVC) for a relatively large applicaiton.
this is going to be ugly! You should definitely consider using ajax calls to load page fragments AFTER a first content stage is loaded!
This is going to break almost all known web standards, but it might render the website in parts....
this being said: here's the ugly stuff
First: get rid of the <html> tag of your website, start with the <head> DO NOT use a <body> tag either.
Now send your html-code in the order you want it to be loaded (top first) using echo ...
after each closing tag of a group (say </table> or </div>) use flush(); ob_flush(); this will send all known content to the browser immediately.
The browser now decides if it can render the known content or not and if it will (based on the browser specifics and user settings) but with few exceptions it will.
some browsers like to wait for the closing body-tag that's why we dropped it, others even wait for the closing html tag (safari afair) that's why we dropped that too.
If you use the echo-flush scenario wisely you should be able to split the page into renderable parts which most browsers will display without an error.
Again... don't do it this way.. it's bad, ugly and not even near any web standards
But you asked for it.
For your this question
Except AJAX Is there way around for this?
I think you can try iframes if they can help.
Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.
This jsFiddle
jsfiddle.net/cGDuV/
can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.
You can use javascript for the same if you want to avoid jquery.
With pure PHP? Not smart.
$(function() {
$('#body').delay(1).fadeOut();
});
Fiddle example: http://jsfiddle.net/r7MgY/
I'm working on a editing tool (type of a simple CMS) in PHP/MySQL for a product catalog. I have search the Internet for a solution but I don't even know what to search for. So now my hope is on you guys.
I have a form where you can put all kinds of data like part.no, description an so on. All of this data is saved into a MySql table (items). I also have a table with predefined specifications.
What I want to do, and that I can't find a solution for, is to have a dropdown meny (or similar) and a add button to add a row for each related specifications without saving the whole form each time. I want to save first when all specifications is selected.
So, can I use PHP for this or do I need jQuery/Javascript or similar? I know it's possible, have seen it in OpenCart :-)
I hope someone understands my question. It's hard to explane i a language I'm not fully manage.
Regards
Client-side vs Server-side
Javascript: This sits in the user's browser. So anything you want to move in the user's browser will be done with JavaScript. This is "client-side"
PHP: This site on the server, so takes inpute from the user's browser and gives back a response (generally HTML, but can also be JSON or XML which is read by Javascript.). This is "server-side".
Libraries
jQuery: This is a set of functions written for Javascript to make it easier. So it runs in the user's browser and makes it easier for you to write bits that move on the screen.
You get similar libraries that help you write PHP (commonly called "frameworks") and there are many others for javascript as well.
Where to start
Write your HTML page as you want it to look. Keep it simple for the first time.
Then write some javascript (possibly using jQuery) to move the menu. Google "jquery menu dropdown" or similar and you'll find a solution you cna customise.
Then write some PHP that gives you the HTML you wrote in '1'.
Then decide what's going to happen when you click on a link in the HTML, and repeat the process (write HTML, incorporate Javascript to make it move, write PHP to give HTML)
Then work out which bits of the HTML are common or structured and should come from a database.
Without writing it for you (in which case you'll never learn) best to start one bit at a time and build as your knowledge grows. Bucket loads of examples on the web when youreach a particular problem you need to solve.
After comment "[how to] make it possible to select and add single/multiple specifications (from another table) without saving the whole form each time a specs is added":
Growing with AJAX
What you are asking is AJAX - this is where you get Javascript to talk to the server, and for javascript to move bits on the page based on the results. jQuery is probably the easiest (and probably has best documentation / examples for the ajax, as well as moving the DOM).
Basically: you have an "event" that you trap in JavaScript, example
/// Using jQuery to trap a button click
$().ready( function() {
$("#ButtonID").click( function(e) {
e.preventDefault();
alert('Button Clicked');
});
});
Then you build in an AJAX call inside that event (also check out get or post as the syntax is easier, you just get less control). The AJAX wil send a request to your PHP server, and you can get PHP to return HTML which you can replace/insert using the DOM manipulation functions linked below (e.g. before, html etc) or, when you get more advanced, you'll send back JSON which is a data structure you cna more easily manipulate in JavaScript to stipulate what actions are required.
As above, without actually writing it for you, the best place to start is to read the docs and have a go. Google "jquery AJAX PHP table example" or similar and you'll find an example somewhere.
I have recently been debating whether or not to use AJAX for my site navigation to only transfer over only needed updated HTML elements, or if there was not a significant difference between new elements and current elements to just load the page in its entirety (php generated or static html)
However, I thought how that if the new content was not large in size relative the current page...that perhaps I should send it has a hidden div (via CSS) along with the current page.
This 3rd way seems like a simple solution. For example just send the entire current page + any additional content that might be requested by the user as hidden divs.
When the user selects the content just hide the current content, and display the hidden content...
All in all, each way (normal, Ajax, CSS) would look the same to the user but a CSS / Javascript solution would be provide the quickest interface and be the simplest. Ajax might cut down on download for example if the content is never used.
This is a validation question. Is this a valid way to navigate a web application? By hiding/displaying divs using the display property or opacity property to flip through content?
Notes (response to answers)
The Hidden divs would be static data that is not changed by the user. I thought this would be obvious but now I've made it explicit.
Thanks!
You need to think about it this way.
If the hidden content is dynamic (changing) there is a need for AJAX because AJAX would usually be used to fetch updated content from the DB.
If your content is static (not changing) then how much new content are we talking? Does the size of the new content have a significant impact on render time if it was in a hidden DIV? If its very little, then I would say use a hidden DIV. If its alot, then mabye it's time to consider AJAX to load it in from an external page.
Here is a simple solution to get you started using a hidden DIV:
<script>
function setVisibility(id, visibility){
document.getElementById(id).style.display=visibility;}
</script>
<div id="message1" onclick="setVisibility('message1', 'none');setVisibility('message2', 'inline');"> >Hey What's Up?</div>
<div style="display:none;" id="message2">Not Much You?</div>
It does depend on the data being shown. Facebook could not do this because the data is updated often, there would be out of sync problems.
Since i do most of the development by myself, having a full ajaxy site seems like a large task for me, so i usually keep page flips, but some of the content on the inside i have it as ajax generated.
Like say there is a form to create something, i have that form submit in the background (excellent jquery plugin for that) then i have the new data be displayed at the top of the list ($.prepend). This way, things are still ajaxed, but not to a level of which is hard to manage for a single programmer.
One thing you need to keep in mind is to keep your site as non-breakable and accessible as possible. Because Ajax content isn't on the page, it can't be indexed by spiders, etc. Ajax requires more error testing/catching, etc than "standard" CSS alteration, so make sure you're going to make it work in ALL browsers. There's no excuse for bad or broken navigation.
Your idea is definitely a valid approach. You're basically looking for a trade-off between an initial, longer request, and many shorter ones down the line. As long as the amount of initially hidden content is not gratuitous, the user experience will likely benefit by getting all of the markup first, and hiding/showing it with JavaScript + CSS as needed.
Suggested Approach: Consider using jQuery's
hide()
show()
or toggle()
methods, and combining with a history manager to emulate real browser history changes as the user navigate's page states. This is the approach I use on my website: paislee.net. IMO its clean and lightning fast because there are no new HTTP requests.
Often I add helper functions to my PHP that return complex HTML. For example, it is not an easy task to ensure that a form element is accessible, can handle errors etc. and so I will have a PHP function wrap this problem.
Unfortunately, sometimes, I will need to generate the same HTML but with JS instead. An example of this is where I have a Flash uploader which uploads multiple files. As each file is uploaded, I want to populate another form on the same page which will allow the user to edit the files data.
I already have the specification for the inputs for this form in PHP helper functions. At the moment, I just recreate these inputs manually with JS. However, this is inefficient and frustrating because if I wish to change some aspect of these inputs, I now have to change them in two places.
One thing I could do is pass the form elements back to JS in the same AJAX request which uploads the file. This works fine but could be problematic if I have large amounts of HTML.
Is there a better way than this or is using the AJAX request the best it gets?
One thing I could do is pass the form elements back to JS in the same AJAX request which uploads the file. This works fine but could be problematic if I have large amounts of HTML.
Certainly, this would allow you to avoid the code duplication.
But if you're just requesting identical HTML twice, that means - regardless of the size - there's an additional HTTP request for the same data.
It's probably not a big deal, but if you're that concerned, use AJAX to request the data once, store the result, then just used the 'cached' HTML next time you need to add an element.
Of course that only works if the HTML is identical.
Now if it is identical, and if the initial request puts one copy on the page, why not skip the AJAX request, and just have the javascript 'cache' a copy of the form when the document is loaded? Then you can duplicate the original form each time it's needed.
Make a page/controller in your php, that will be given a reference to the specifications you have stored, and will call the function and send back it's output.
Then you make an ajax call when required, that will request the page with the required parameters to get the wanted content.
Half-way through your answer I was going to suggest grabbing the inputs as JSON via a web service. In other words, I was going to suggest AJAX (or AJAJ I guess).
I do not see how you would coordinate the content otherwise.