triggering ajax calls from js with parameters

[aalexei]

Hi, I'm trying to trigger a an update on an element from a third party js lib. I can't seem to pass parameters, the best I've gotten to is to set the attribute "hx-vals" then trigger an event:

<div id="detail" hx-get="/detail" hx-trigger="myEvent" hx-vals='{"id": "none"}'>Empty</div>

function(ele){
  var elem = document.getElementById("detail");
  elem.setAttribute("hx-vals", JSON.stringify({"id": ele.id()}));
  htmx.trigger("#detail","myEvent");
}

Is there a better way? Ultimately I want to trigger updates on events generated in cytoscape (https://js.cytoscape.org) in htmx.

[aalexei]

Better solution:

function(ele){
   htmx.trigger("#detail2","myEvent",{'id':ele.id()});
}

with

<div id="detail2" hx-get="/detail" hx-trigger="myEvent" hx-vals='js:{id: event.detail["id"]}'>Empty 2</div>

Another solution that is much more concise:

function(ele){
   htmx.ajax('GET', '/detail?id='+ele.id(), '#detail')
}

but the logic now is in js.

I guess the ultimate solution is to catch events from cytoscape in htmx, still figuring how to do this.

[aalexei]

And finally in case anyone else has this problem. To generate an event from a js library like cytoscape and pass on parameters:

cy.on('tap', function(ev){
     target = (typeof ev.target.id == 'function') ? ev.target.id() : ""
     htmx.trigger(htmx.find('body'), "tap", {'target_id':target});
 });

Then with htmx catch the event and pass on parameter to endpoint:

<div id="detail4" hx-get="/detail" hx-trigger="tap from:body" hx-vals='js:{id: event.detail["target_id"]}'>Empty 4</div>