Open CSS modal from PHP generated table row
1. initiate the JS for the modal's edit process
2. pass the id from the row to JS
3. set the focus on the first input text box
4. I plan to use JS to confirm the delete request as well
I'm fine to use AJAX for updating tables. I've nearly got all the mechanics of the application working without using JQuery, Bootstrap or any other libraries and would like to keep it that way. This is likely the only Web app that I'll ever write and requiring more work is acceptable. I read that the <dialog> element isn't supported by Edge or IE, so that's not an option. Thank you for any assistance that you can provide.
sampleModal.php
ASKER
I just wanted to keep it as simple as possible and I don't expect that they'd be needed very much. Based on a career of traditional programming, I believe my application is extremely simple, compared to most (it's data entry). Most of what I've learned is self taught, plus the internet. But a lot of what's on the internet doesn't explain things within a global context, so you have to do more research anyway. I guess I feel that I'd rather spend my time developing than learning a couple more libraries.
I'm not going to give you any specifc code examples as I use Bootstrap / jQuery etc and to try this with just CSS and Javascript would just take me too long :)
You say it's fairly simple, but even something like this has quite a few moving parts (CSS / HTML / Javascript / PHP)
There are a few different ways to handle it. You're already pulling in the data from your database, so you can either use that for just display purposes and pull the data from the DB when you want to edit the User (make an AJAX request to your server based on the User ID from the button you've clicked), or you can store that data within each row to be used to populate the Edit Form in the modal Element. HTML5 has the data attribute which you can store infomation in, so in your case, you could store the whole user within the button:
<a id='useredit' href='#modal-editUser' data-user='{json_encode($u
What this means is that you can retrieve that information when you click on the button. You'll need to code your click handler to read the data-user attribute, extract the properties from the User object, populate your Edit Form and then show the Modal.
You'll then need to code the submit handler of the form in your Modal to make an AJAX POST request back to your server (normally you'd want to handle data validation at the client-side with Javascript and at the server-side with PHP). Your server-side script will save the info to the database and generate a response to send back to your page. This could be a simple success token, or it could be a fulll. fresh copy of the data. Either way, you'll then need to update the row on your page to reflect the changes made to the DB. Once that's complete, you'll need to close down your Modal.
Sorry I can't give you more specifics but I gave up doing things this way a long time ago :)
ASKER
Thanks Chris. I'll see what I can accomplish with what you've given me. If I want to try Bootstrap/jQuery, can you give me a brief description of how I would use them in my situation. Can you load just the parts of the libraries that you're going to use or do you have to load the whole thing?
ASKER
Thanks very much. I'll give it a try.
ASKER
Now I have to see how I can merge it with what I've already done. Is there a way to use the CSS file that I've already written with the Bootstrap CSS file? Can I use this method with just the modals that I've got, or do I have to change my whole application?
Out of interest, is there a reason why you want to avoid the libraries such as Bootstrap / jQuery. There's nothing wrong with that, but you're going to spend way longer writing you code. You'll basically be writing a lot of Javascript and CSS just to re-invent the wheel.