<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="au

Dang, <a href="https://github.com/imacrayon/alpine-ajax/blob/11695ca0b33f347e9d0bdf7e6

I wonder if it could have something to do with that form using <code class="notranslat

That double request also happen when doing self-target <a class="issue-link js-issue-l

`$ajax` on `<form method=GET>` send formData instead of queryParams,about imacrayon/alpine-ajax

Comments (6)

imacrayon commented on May 27, 2024

Dang, I thought we had a test to catch this, it might be broken. I’ll look into it tomorrow.

from alpine-ajax.

DrSensor commented on May 27, 2024

I just test the minimum example and it works.
Gosh, I'm not sure what's wrong with my code. Gonna close this.

Here is the full snapshot before I refactor it to use `@ajax:{before,after,success}`

<!DOCTYPE html>
<meta name=viewport content='width=device-width,height=device-height,initial-scale=1,user-scalable=no'>
<link rel=stylesheet href=//cdn.jsdelivr.net/npm/boltcss>
<script defer src=//cdn.jsdelivr.net/npm/@imacrayon/[email protected]/dist/cdn.min.js></script>
<script type=module>
import init, { qr_svg, SvgOptions, Shape } from "//cdn.jsdelivr.net/npm/[email protected]/fast_qr.min.js"
await init()
window.qrcode = passwd => URL.createObjectURL(new Blob([qr_svg(passwd, new SvgOptions()
  .margin(4)
  .shape(Shape.Square)
  .image("")
  .background_color("#b8a4e5")
  .module_color("#ffffff"))], {type:"image/svg+xml"}));
</script>
<script defer src=//cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js></script>

<style>
@media print {
  * {
    display: none;
  }

  #fasilitator {
    display: unset;
  }
}

</style>

<h2>Fasilitator</h2>
<form x-data='{
    form: { duration: {} }, prev: {},
    complete: false, fill: false, check: false, print: false
  }' x-effect='
    complete = form.access && form.duration.complete
    fill =  form.access || form.duration.incomplete
    check = (form.user !== prev.user) && !fill
    if (print && form.user !== prev.user) print = false
  ' @submit='
    $event.submitter.disabled = true
    $ajax("/admin/fasilitator")
      .then(() => print = true)
      .finally(() => $event.submitter.disabled = false)
  ' x-target=fasilitator :method='check ? "GET" : "POST"'>

  <label>Username
    <input name=id x-model=form.user type=text required>
  </label>

  <label>Akses
    <select name=access x-model=form.access>
      <option hidden selected value>
      <option value=1>Perencanaan
      <option value=2>Pelaksanaan
      <option value=3>Evaluasi
    </select>
  </label>

  <fieldset x-data='{ start: null, end: null }' x-effect='
    form.duration.complete = start && end
    form.duration.incomplete = start || end
    if (new Date(start) > new Date(end)) end = null
  '>
    <legend>Durasi</legend>
    <label>Mulai
      <input name=startAt :min='new Date().toLocaleDateString("sv")' x-model=start type=date>
    </label>
    <label>Berakhir
      <input name=endAt :min='start ?? new Date().toLocaleDateString("sv")' x-model=end type=date>
    </label>
  </fieldset>

  <button @click='
    if (print) window.print()
    prev.user = form.user
  ' :hidden=!form.user :disabled='form.user ? complete ? false : fill : true'
    x-text='check ? "Cek" : print ? "Cetak" : "Perbarui/Daftarkan"'></button>

</form>
<table id=fasilitator></table>

from alpine-ajax.

imacrayon commented on May 27, 2024

I wonder if it could have something to do with that form using x-target and @submit together. x-target adds it's own submit handler, I think that could cause the form to fire off two ajax requests.

from alpine-ajax.

DrSensor commented on May 27, 2024

I tried to add x-target and yup, it perform 2 requests

GET /?username=John+Smith (missing URL path)
GET /user (missing URL params)

index.html

<!DOCTYPE html>
<script defer src=//cdn.jsdelivr.net/npm/@imacrayon/alpine-ajax/dist/cdn.min.js></script>
<script defer src=//cdn.jsdelivr.net/npm/alpinejs/dist/cdn.min.js></script>

<form x-init x-target=user method=GET @submit='
  $event.submitter.disabled = true
  $ajax("/user")
    .finally(() => $event.submitter.disabled = false)
'>
  <input type=text name=username value="John Smith">
  <button>Submit</button>
</form>
<div id=user></div>

server.js

#!/bin/env -S deno run -A
import { serveFile } from "https://deno.land/std/http/file_server.ts";

async function handler(request) {
  const params = new URL(request.url).searchParams;
  if (params.size == 0) return serveFile(request, "./index.html");
  return new Response(
    `<div id=user>${params.get("username")}</div>`,
    {
      headers: {
        "Content-Type": "text/html",
      },
    },
  );
}

Deno.serve({ port: 8000 }, handler);

from alpine-ajax.

DrSensor commented on May 27, 2024

That double request also happen when doing self-target #41

from alpine-ajax.

imacrayon commented on May 27, 2024

I tried to work out a way to support mixing x-target and $ajax, but I couldn't find a pattern that worked without negative tradeoffs. In v0.6.0 $ajax no long inherits settings from attributes, I think this implicit behavior was causing confusion for some newcomers. So you could structure the form example above to one of two ways:

With $ajax:

<form x-init @submit="
  $event.submitter.disabled = true
  $ajax('/user', { target: 'user' })
    .finally(() => $event.submitter.disabled = false)
">...</form>

Or with x-target:

<form x-init method="get"  action="/user" x-target="user">...</form>

I would recommend using x-target in this case because it will automatically handler the $event.submitter.disabled logic for you and it a bit more terse. Generally x-target works for 80% of use cases and $ajax is there when you need it.

from alpine-ajax.

`$ajax` on `<form method=GET>` send formData instead of queryParams about alpine-ajax HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent