what should I be using?

just direct me to the correct example I will try and figure it out from there

This is how I would approach this with HTMX, there might be easier ways though: The edit link would be something like:

html
<div hx-get='edit.php' hx-vals='{"id":"classIdHere"}'>Edit</div>

The

edit.php

file is where you output your modal contents. This has all markup for the forms and then you use the

id

to get the correct data from your db, to prefill the input fields with. Wrap whatever you are outputting in

edit.php

with

xml
<div id='idOfYourModal' hx-swap-oob='true'></div>

This will output the prefilled form into the specified element on the page that triggered the htmx request. So on your index you would have a (presumably hidden) element named

idOfYourModal

that receives the output. Finally you can use something like this on your index page, to reveal your modal after htmx has filled it with the form.

javascript
htmx.on('htmx:afterSwap', function(event) {
  if (event.detail.target.id == 'idOfYourModal') {
    //Code to reveal your modal here
  }
});

This should give you a reusable modal that loads whatever content you want to edit.

@User Thanks for all the help dude, I will need a little more time to figure out HTMX it seems, but I really do appreciate all the effort and time you put into this! Also, how did you get those beautiful looking code blocks here on discord? Also, I am using Django, but I do get what you mean and that is something I should have mentioned before

There's a few Django people in here that can probably help you, in that case. The syntax highlighting is like this, though for some reason trying to highlight html doesn't seem to work. Works with js, php and many other languages though.

@User Tip: use

xml

instead. Here's the list of supported languages: https://github.com/highlightjs/highlight.js/tree/main/src/languages

Sweet, though seems a bit backwards. Why not have html 🙃

Yeah, agree 😄

HTML is not a subset of XML so it's just a hack (but the other way around is true?)

Did some testing and you can use

html

. Learned that adding a space after the language you want to highlight, makes the whole thing stop working so that's where I messed up earlier.

Ugh

Okay cool. Thanks for all the help. I appreciate it more than you know

https://www.reddit.com/r/htmx/comments/o5mhse/lob_and_tailwindcss_extracting_components/h2ngxgz > So with htmx, in contrast with tailwinds, there is less immediate pressure for factoring out components and, when you do, it is often driven by hypermedia needs rather than DRY.

I'm trying to convert an aspx website from ic to hx. eg:

<div ic-get-from="/System/Content/index.aspx?id=<%=HttpContext.Current.PageParameters().Node %>&embed=true" ic-trigger-on="load" ic-enhance="true">

`<div hx-get="/System/Content/index.aspx?id=<%=HttpContext.Current.PageParameters().Node %>&embed=true" hx-trigger="load" hx-boost="true">

This would decorate the form with ic-src, ic-trigger-on, ic-verb, etc .. but setting hx-boost does not seem to do this anymore. Am I doing something wrong?

the decorated result was :

<form method="post" action="https://xxxx.be/System/Content/index.aspx?id=323342&embed=true&ic-request=true&&ic-id=1&ic-current-url=%2FSystem%2FMenu%2FIndex.aspx%3Fid%3D323342&_method=GET" id="form1" class="d-flex flex-column h-100" ic-src="https://xxxx.be/System/Content/index.aspx?id=323342&embed=true&ic-request=true&&ic-id=1&ic-current-url=%2FSystem%2FMenu%2FIndex.aspx%3Fid%3D323342&_method=GET" ic-trigger-on="default" ic-deps="ignore" ic-verb="post" ic-id="4">

looks like some bad escaping on the form action

question: would people be interested in this book: # HTML-Oriented Development Building simple, maintainable and powerful web applications using the native language of the web ## Table of Contents * Chapter 1 - HTML, A Reintroduction * Chapter 2 - htmx: High Power Tools for HTML * Chapter 3 - Effective HTML Templating * Chapter 4 - URLs * Chapter 5 - Practical Examples * Chapter 6 - Other HTML-oriented Tools: tailwindscss, alpinejs & hyperscript * Chapter 7 - REST

the html that seems untouched by hx :

<form method="post" action="https://localhost:44394/System/Content/index.aspx?id=323342&embed=true" id="form1" class="d-flex flex-column h-100">

ah, sorry, still drinking coffee, one sec

right, so htmx's hx-boost does not mutate the dom like the ic-boost did

rather the behavior is implicit

makes things like snapshotting history cleaner

should still work correctly

so the idea of having one page and divide it into two div's that handle two different CRUDS is still possible?

absolutely

cool , so what more than tagging one div as hx-boost="true" should be done?

or could it be confused the original url is without hostname and the resulting form is with hostname?

hmmm, the hostname might cause a problem, not sure

seems like you'd want to narrow down your target for each form to a div surrounding just that form