I want to make a webpage where an user can add the title from a book he has read. These changes are reflected in real time on a list that contains all books he has introduced on the database, without the need to press any "reload" button. By example: there is no need to refresh (F5) the page to see the last book added.
I don't know if I can do this in PHP or in any other language, so I would like to know which is the best suited for something like this.
Thank you.
I think you are looking for Ajax. Would be able to asynchronously update the section of the page (the post in this case) without the need for page refresh.
You will want to do this with javascript, using the onchange event, and for a discussion on this you can look at: Call Javascript onchange event by programatically changing textbox value.
Basically, you react to the data being changed, then just send it immediately over using ajax to the server, but, you need to be aware of two things.
First, how will you handle errors, such as there is no book with that title, or the length is too long. I tend to put the error message in or by the place where they had the bad data.
The other is that you need to pass back the id when the data was inserted, so that when they change it again you can just do an update, so you will need to store that. I tend to put the database id I need in the element id, but you can keep it in an array in javascript, since it will maintain state for you.
Related
I'm currently only using PHP to take user submissions, put them in a database, and echo them out on a page using SQL to select from a table, such as comments. I need a system that will automatically update comments without refreshing the page like on YouTube. The less the user has to manually update, the better.
I want it to work pretty much exactly how YouTube and Twitter function, where it'll say "x NEW COMMENT(s)" and clicking that updates everything.
My teacher recommended a JQuery function, but I don't have any background in that language so I don't know where to begin looking.
I'm at a complete impasse. I will update this if you guys need additional information to aid in my search.
You are looking for AJAX
You will need a HTML page with jQuery/AJAX that calls another PHP page. In that PHP page you do the DB request and then ideally return the data as JSON so that your frontend part can display it to the user.
As every one says, AJAX is the way. You can find a simple blog I did on it here.
I am not sure how to word the question because I don't really know what exactly I'm even asking for. Basically I have built a small sales portal that puts info in a database and then spits it back out in various ways. Occasionally the records need to be updated, but I need a way to update them from the web page where the records are displayed (without going to a completely different page) so that the sales people do not have to go into the database to change the records. I know how to use the UPDATE function with PHP, what I would like to do is have an "Edit" button at the end of each row and have the information become changeable when the button is clicked. What programming language would I need to do this in? How would that code be structured? I am really only familiar with PHP, HTML, and CSS.
Thanks for your help!
You're going to need javascript to handle the form fields the way you mentioned.
Each record row wil have the original value and a hidden input
Javascript will hide the original value and show the input
You could either have a save button at the end of each record row or a master "save all" button". Having multiple at the end of each record will be easier but from a users point of view maybe a bit cumbersome.
Use AJAX to send the updated data to the server - this should be handled in the "save record" javascript function.
Then you'll need PHP or some other server side language to actually update the record.
Okay I'm not really sure how to approach this. I have a user-generated post board where people post, it drops down onto a list of a bunch of posts. When you click on the ID number of the post it will bring you to a separate page with just that post and the comments on the post. I want it so when you hover over the href it drops down something that tells the user there are x amount of comments on this post. This way people know if there is comments without switching pages and also being able to be able to click the href still and go to the postid page.
I assume some ajax/jquery/javascript would be used to accomplish this but since I'm fairly new to ajax and jquery I'm not certain how this would be done. Thank you!
For a hover effect, it would be better if that information was already stored on the page and just hidden. Then when the user does hover, you can just un-hide it and have it positioned where you want, and then hide it again when their mouse leaves the area. Using AJAX requests for this purpose would waste away a lot of HTTP requests for such a tiny amount of information.
Really, you could do the hover effect using pure CSS if you wanted too (I would).
Since a hover happens fairly often, I wouldn't use it as the default event to fire an AJAX-request. This would increase the HTTP-traffic enormous. See if you can fetch this information when the page is build (and put it in then) or use something else like a "preview"-button for the event.
Anyways, this would be the basic workflow if you want/need to use AJAX:
Write a PHP-script (or any other language you use) which fetches the number of comments (and what else you want to display) from the database (or where your data is stored).
This script should then be called via AJAX (with $.ajax() from jQuery for example). As the expected return-type you would then use json.
The script which fetches your data would then create an object, use PHP's json_encode()-function to encode this object to JSON and echo it out.
This JSON-object will then be available in the success-method of the ajax()-method from jQuery. Then, you can access its members (e.g. the comment-count).
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.
In a PHP application I'm building, I'd like to have an 'editable' table. The idea is that each row will have an edit button, which, when clicked, will replace certain fields with text fields and select lists and change to a save button. When the user clicks save, the data data should be validated and changed if appropriate.
I'm mainly tackling this as a learning project (I'm aware there's a ton of stuff already out there) and to see if I can get anything 'cool' working. I've created a PHP table-generating class that can take an array of objects as a datasource, and can have columns created based on those class methods.
e.g.
$table = new Table($dataSource);
$table->addColumn('Name', 'getName');
$table->addColumn('Amount Due', array('getOrdersManager', 'getTotalAmountDue')); //First calls getOrdersManager() on each data item and then calls the getTotalAmountDue() on the result
I'd like to try my hand at extending this to be able to the table row and have those changes reflect on the corresponding object in the data source.
I don't really have very much experience with AJAX although it's clearly going to play a very important role in getting this to work correctly.
Any tips on how I should approach such a task?
Edit: I'm not really interesting in looking at Ajax libraries at this point (I do have some experience with jQuery). I'm more interested in learning the basics of Ajax at this point.
my tip is to use jquery(does most of the heavy lifting for you and is easy to learn).
The idea is that each row will have an
edit button, which, when clicked, will
replace certain fields with text
fields and select lists and change to
a save button
http://api.jquery.com/click/
When the user clicks save, the data
data should be validated and changed
if appropriate.
http://api.jquery.com/jQuery.post/
Some things to be aware of/think about:
Are you going to send every field change to the server, or only the whole row (the latter is more resource efficient, but not necessarily as accurate)
How are you going to ensure the data displayed stays accurate even if the update to the server fails for some reason (either a network failure or a DB/validation error)
How will you ensure the user has permission to update the record and that you don't open a security hole by allowing the AJAX responder just to update whatever record it is told to. My approach has been that if a record is shown in the interactive table then the user has the permission to update it, so a cache of record IDs is held in the session when the table is created
Are you going to load options dynamically? If you don't, then a long table can end up containing a lot of HTML because of repetition of the select controls, but again it is more resource efficient not to have a request every time a user clicks into a dropdown. One compromise might be to put the options into a hidden HTML field and load them dynamically into the correct place when a user clicks a dropdown