jQuery + x-editable: 动态 url ajax?

Question

我正在使用 x-editable 编辑内容。在官方文档中它说 "Open your page and click on element. Enter new value and submit form. It will send ajax request with new value to /post".

这是我想要做的，但是我的 url 是动态的。我想知道如何生成动态 url？

这里是 UI 显示内容和 editable 启用：

现在只要在浏览器中输入http://localhost:5055/update/department?id=55&name=yoo，我UI上相应的内容就会更新。问题是每个数据都有不同的 ID 和不同的名称，所以 url 将是动态的 /update/department?id=dynamicID&name=newvalue

如何使用 x-editable 生成 dynamica url？

目前我在我的 <a> 中添加 data-url="/update/department?id=${department.optString("departmentId")}&name="，但无法弄清楚如何设置 name=。

在我的js文件中，我试过：

$('.to-be-edited').editable({
    toggle: 'manual',
    //submit data without pk please set send option to "always".
    //send: 'always',
    url: '$(this).data("url") + newValue',
    success: function(res, newValue) {
      console.log(newValue)
    }

  })

我得到一个错误： POST http://localhost:8000/update/department?id=55&name= 405 (Method Not Allowed)

渲染代码table

        <c:if test="${departments.length() > 0}">
          <c:forEach var="i" begin="0" end="${departments.length()-1}">
          <c:set var="department" value="${departments.getJSONObject(i)}"/>
            <tr>
              <td><a href="#"
                class="to-be-edited department-name" data-type="text"
                data-pk="${department.optString("departmentId")}" 
                id="${department.optString("departmentId")}" 
                data-url="/update/department?id=${department.optString("departmentId")}&name=">${department.optString("departmentName")}</a><i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>
              <td> <a href="#" class="edit-name">Edit Name</a> </td>
            </tr>
          </c:forEach>
        </c:if>

Answer 1

这就是我最后做的。首先，我将 object-type="something" 添加到 <a> 标签。这是一个重要的属性，因为其他页面将使用相同的功能，所以 url 必须是动态的。例如，部门页面：

<a href="#"
   class="to-be-edited department-name" data-type="text"
   data-pk="${department.optString("departmentId")}" 
   id="${department.optString("departmentId")}"
   object-type="department"
>

在供应商页面中：

<a href="#"
   class="to-be-edited vendor-name" data-type="text"
   data-pk="$${vendor.optString("vendorId")}" 
   id="$${vendor.optString("vendorId")}"
   object-type="vendor"
>

然后，在我的js中，我创建了一个成功函数，生成了url，然后在成功函数

里面写了ajax

$('.to-be-edited').editable({
    toggle: 'manual',
    success: function(something, data) {
      //generate dynamic url for ajax
      let url = "/update/" + $(this).attr('object-type') + "?id=" + $(this).attr('id') + "&name=" + data;
      $.ajax({
        url: url,
        //http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
        //communication successful with server, check the status
        success: function ajaxSuccess(data, textStatus, jqXHR) {
          let json = JSON.parse(data);
          if (json["status"] === "success") {
            //content will update on server side
            console.log(data);
          } else {
            alert('Unable to update, try again later. ' + json["reason"]);
            return;
          }
        },
        //unable to communicate with server
        error: function communicationError(jqXHR, textStatus, errorThrown) {
          alert('Unable to update, try later. ' + errorThrown);
        }
      });
    }
  });

jQuery + x-editable: 动态 url ajax?

jQuery + x-editable: dynamic url ajax?

jquery

x-editable