This repository is a modified version of the official htmx repo. The modifications made, are specifically for making htmx compatible with the CitizenFX server builds.
htmx version: 1.9.10
- download the latest release htmx resource
- place the resource folder somewhere in your fxserver project
- add the resource to your server.cfg
- add the following to your html head tag
<!-- HTMX --> <script type="text/javascript" src="https://cfx-nui-htmx/dist/htmx.js"></script>
- once this is done you shoud be able to use htmx within your resources
If you want to contribute to the project you'll need to do at least one of two things. The first one being adding two comments above the lines you changed. These two comments would present themselves in the following way;
// cfx-htmx
// the comment on the line above is there to mark a change specifically for the cfx version of htmx
// this comment and the one on the line above is there to explain why the change has been madeThe second thing is only nessesary when changing an existing line within the code which would then look like the example in the link below.
src/htmx.js ln. 3387 > ln. 3391
So for starters you'll need to call the RegisterNUICallback native. This native takes a path and a function. The function has two parameters the first one being the request body, the second one being a callback function which sends a response to the NUI.
NOTE: the native
RegisterRawNuiCallbackcould be used here for better usage of the cfx-htmx lib. This is because the first parameter of the function is the entire request object which also indecates the request method. However, sadly within the source code of fivem the request is eighter a POST or GET request by default. This makes the hx-delete, hx-patch, and hx-put attributes obsolete. On top of that all the requests made, that arn't a POST request, will be set to a GET request by default and therefor won't send a request body even if one is provided. To finish the sumup of the problems with this native, the callback (second parameter of the function) doesn't send an actual response to the NUI which is crucial for this library to function properly.I've been trying to setup the FiveM client myself to see if i can ivestigate the problem at it's core and maybe (even with the little knowledge i have on the code base, c++ and c) fix the native. That way this library can be used up to its full potential.
I'm currently struggling to setup the FiveM development environment without the debugger trowing exeptions on startup, if anyone could help me out that would be awesome and they can contact me on discord by the username
5m1ly.
RegisterNUICallback('htmx', function(body, callback)
return callback("<span><p>hello world!</p></span>")
end)Now create a element that makes the request
<body>
<div hx-get="/htmx"></div>
</body>Uppon loading the html it will make a GET request to https://<resource>/htmx
for more information about htmx you can go to their repo or website