I am building a photo sharing service in php. I am using a lightbox in jquery which will popup when we click 'add' button to add photos. We can upload multiple photos. Also I am using ajax to upload photos so that the page is not reloaded. I want that after I upload photos the same will be automatically loaded in my gallery and the gallery should display new photos without need to refresh the page. The photos will have a particular id for a particular user in the database, so ulitmately the change in the table for the user should be reflected. Now the problem is that I don't have control over the closing button of the lightbox. Therefore I cannot modify it to call any other function so that it performs the query and displays my photos using ajax. I have heard that we can detect changes in the database automatically using JSON, but I have never used JSON and know almost nothing of it. Can anyone illustrate a simple example in php of how can the changes in a mysql table detected using JSON? Is there any other way to achieve it? Please help me.
JSON an ideal data-interchange language.JSON is used for fast data interaction only.so you can not do this with out help of DOM request.
http://www.json.org/
You can do this with ajax. You make ajax request for every second for latest update.
or
use long polling method like comet
Implement COMET with PHP
EDIT:-
gowri:How to make ajax request per second?
use setInterval
setInterval(function(){
//make your ajax call here
},1000);
Related
I want to create a page where people can insert some text, hit enter, and the text be stored in a MySQL database. I can do this, but I want to be able to load a page, enter a password, and see a list of all the info in said database, then whenever something is added to the database, it's added to the list on the page, without me needing to refresh the page or setup some javascript code to refresh the page every five seconds.
I believe Satya has it correct in suggesting that you use Ajax in order to refresh the data without refreshing the page. You can have it request updated information from a php script which queries your database for the data you wish to display, and then sets the elements on your page accordingly.
this is probably the best way for you to implement ajax calls using javascript
http://api.jquery.com/jQuery.ajax/
Or you an simly do it with the help of setInterval() function. You can call an html code in a div using
$('#id').html("<htmlcode></htmlcode>");
Example : http://jsfiddle.net/ipsjolly/995PJ/6/
i have a website that uses a number of containers (div's). In this scenario, we have three boxes down the left side and one bigger box on the right of these boxes. The bigger box on the right is the only thing that changes when a link is pressed, this is done with Javascript.
SO i have the index which is the main layout of the website and i also have the "pages" of the site, so when a link is pressed the main box (on the right) loads the new data.
On one of my pages i want to collect data and then run it through a PHP script that is in the head of the file, but when i click the button i realise it refreshes the whole page and it doesn't run the script on the page with the form.
Anyone had a problem like this, or know of something i could do to work around it?
I'm not really sure what code would be useful for helping me but if you need something just ask.
Thanks for the help
Since you are loading all your content via JS already, you could just POST the form data via AJAX to a PHP script to process, then read the output and either provide an error message or remove the form from the page and show your success message.
How to approach your AJAX call is dependant on what you've used as a basis for the rest of your JS.
Personally I like to use the JQuery library, as it makes AJAX calls (and much more) very simple.
How about you make the page design able to do it. Have the backend be able to spit out the state of the page when it posted.
Or use Ajax to post the data back and set the new state like you do already.
This is more of curiosity that anything, but I can think of several places (mainly in admin sections) where this could be useful. I know the title is confusing so this is what I mean:
Say you have a form that posts to example_cb.php. example_cb.php is a very large callback page that generates multiple thumbnails of an image, puts them in their respective directories, adds them to a database, etc. You already have the form posting by jquery with a function like this
$.post('example_cb.php', $(this).serialize(), function(data) {
// Success
}, 'json');
Before posting it updates a div to say "processing" of something. Then after it successfully completes the div fades out. However you want the div to show what is happening on the server side. i.e. Converting 200X200 thumb > Converting 350x350 thumb > Adding Records to Database > etc.
How can you accomplish this?
I know it's a loaded question, but I'm confident there are people on here smart enough to figure it out. If you need more info please comment :)
You could do something like -
Write each 'event' update to a database table
Write a page that retrieves the last n events from table
Use something like 'load' to call page update an onscreen div
with the updated progress.
Use 'setTimeout` to keep updating.
This could be accomplished most easily with using the push method, but I'm not too familiar with ajax push or comet technology, so I'll give you a pull solution.
Basically you need to create the initial ajax request to start the processing. Then, you need to have another request running in a tight loop that checks against a php page for the current status. For example, on the php page doing the processing, you can update a _SESSION key that stores the current processing information (like "Converting 200X200 thumb") at each step. Another php page will exist purely to print that information and you can retrieve it with the JS running in a loop.
pusher like services may be used for bi-directional communication.
I'm putting it down for reference, though this would be overkill for such a simple scenerio.
Why use AJAX for dynamic web pages when you can do it only with php?
The main reason to bother with AJAX is User Experience (UX).
Now AJAX won't necessarily improve UX in every single instance so in a lot of places sticking with pure PHP is perfectly okay.
But imagine the case where you have a text field on the site and a link to vote on something. Kinda like this site. When you add AJAX your users won't loose the text they entered in the textfield when they decide to vote on the link! How incredibly useful!
So if you care about your user's experience it is a good idea to use AJAX in situations like that.
PHP creates and outputs the Content to the Client Browser as it's a Server-Side Language and that's what it was built for, so on a request your code will access database, files etc. and then output the constructed html/text to the client.
Ajax just gives the User a more Desktop like feel. For example deleting a record and instead of the entire page reloading just letting the one element disappear from say a list and letting the server know that the record is to be deleted. But Remember to let the User know when you are busy sending data to the server (With a progress bar in .gif format for example). As lot's of user feel that if nothing happens on the screen to notify them, that the application is frozen which means they will either reload the page or just try to click the button again.
But you will need to provide some sort of compatibility with browsers that have Javascript disable and thus cannot use your AJAX functions, just something to keep in mind.
AJAX stands for Asynchronus Javascript and XML, meaning that a page can get new data, without having to reload a page.
PHP cannot send data without reloading the whole page. A user has to press a button, to send data.
An example of AJAX is for example google suggestions or the tag suggestions on this website.
Context
I'm working on a project that I'd like to make more dynamic with PHP + AJAX.
I'm using jQuery for the AJAX part because I totally suck in Javascript, and anyway it seems to be worth something.
I reached a point where my application needs to use a form to send a post, and I want to use an ajax call to perform this action. In the page I'd like to send the post, there is also a list of the most recent 15 posts submitted.
First question: Should I just forget about it and use just PHP?
The action
The user writes something in the <textarea></textarea> and clicks on a <a id="myPostSubmit">Submit</a> that is the handler that I'll manage on the jQuery script with something like $("#myPostSubmit").live('click', function() { /* here i make the ajax call */ });. If the post is successfully submitted we are going to do something (I'll talk about it in the next section), either we will alert the user using my showAlert(text) function, that shows a black box for 4 seconds with the text in it.
Second question: Should I manage the click event in any other ways? Should I create a function, such as sendpost(post) and attach it into the HTML onclick="" event?
If the post is successfully sent
I'd open a discussion about 2 options:
We refresh the page [not actually
loading the entire page but making
another ajax call that retrieves the
posts lists and makes disappear the
old one, load the PHP file to
retrieve the new posts (including
the one we just sent), and then make
the post list appear]. Pro: 1) We are sure that what the user is reading after the post list is loaded is the real post sent. So it actually double checks the action. 2) We load also some possible posts sent in the mean while. Cons: 1) We have to create a PHP file that gets the post list template, slicing the template of that page in 2 files. 2) It doesn't really seems that smooth to me.
We just use Javascript to get the post template, add it to the list. Pro: 1) We make it really smooth, without reloading the entire page. 2) We don't need of any PHP file to reload the page. We just use Javascript (jQuery). Cons: 1) How do we get the post html template to add it to the list? 2) How do we get the user (logged) informations without PHP?
Third question: Is it better the 1st or the 2nd solution? Would you provide a even better 3rd solution?
The PHP page
The PHP page that will receive this AJAX call is : ?p=action&a=sendpost. The page require $_POST['myMessage'] to be set and not empty and nothing else. The page itself will get all the user infos from the cookies and will manage to perform the needed query.
The application
It is divided in 3 parts: App, Template, Library. Basically each page of the application has its own .app.php and .tpl.php file.
The .app.php file manages the building
of the basis of the page, using classes
and other stuff from the library. In
our case it retrieves datas from the
database and put them into
variable.
The Template is called at the end of the .app.php file. The .app.php file send to the template the retrieved data and the .tpl.php file outputs them.
The library is used to contain the classes and functions we need in the application file.
Fourth question: Is this a good way of manage my web application?
Edit: What about returning the alert message to the user?
I read about an option, inside $.ajax() that will manage the response on success or in error. The documentation about it is very simple and I didn't get it.
Fifth question: How should I return (from the PHP file) the error
or the success?
First question: Should i just forget about it and use just PHP?
Well, you application will relay on JavaScript if you use ajax, this days i think it just fine ;)
Second question: Should i manage the click event in any other ways? Should i create a function, such as sendpost(post) and attach it into the HTML onclick="" event?
Create a function and bind onclick. Code will be more readable ;)
Third question: Is it better the 1st or the 2nd solution? Would you provide a even better 3rd solution?
My solution: ajax submit the form and on callback insert new comment in to the list or display error message if user can't comment.
Check jQuery serilize() for submitting forms data with ajax.
Fourth question: Is this a good way of manage my web application?
It's just fine ;) When you application get's bigger you will have to redesign it, but don't do it know, do it when current solution becomes to hard to work with.
Read some good book on building MVC framework. And on programming patterns in general.
You seem to be on the right track with everything. There are lot of opinions called "best practices" about how to exactly attach event handlers, how to reload the data on the page and how to organize your application, etc, but I personally would rather build more software instead of worrying about details like that. The details will come to you eventually.
I personally find that updating whole chunks of server-side-rendered HTML on the page is more robust solution, but I have seen people getting excellent results with templates.