Avatar of Tom Lobb
Tom Lobb
Flag for Canada asked on

Open CSS modal from PHP generated table row

I open a modal by clicking on a button that's in a table. There's one of these buttons in each row. The modal is intended to provide a way of editing the data for the user in the row containing the button that was clicked. The modal opens, but how do I:

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
JavaScript

Avatar of undefined
Last Comment
Tom Lobb

8/22/2022 - Mon
Chris Stanyon

Hey Tom,

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.
Tom Lobb

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.

Chris Stanyon

OK, fair enough.

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($user)}' class='form-button'>Edit</a>

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 :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Tom Lobb

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 CERTIFIED SOLUTION
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Tom Lobb

ASKER

Thanks very much. I'll give it a try.

Tom Lobb

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?

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.