jQuery x-editable：动态url ajax？

Question

我使用x-edable来编辑内容。在官方文档中，它说“打开页面，点击元素”。输入新值并提交表单。它将向/post发送带有新值的ajax请求。

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

以下是显示内容和可编辑启用的用户界面：

现在当我输入http://localhost:5055/update/department?id=55

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

目前，我添加data-url="/更新/部门？id=${department.opt字符串（"departmentId"）}

在我的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)
    }

  })

我得到一个错误：POSThttp://localhost:8000/update/department?id=55

渲染表的代码

        <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

这就是我最后做的。首先，我将objecttype=“something”添加到

<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中，我创建了一个success函数，生成url，然后在success函数中编写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);
        }
      });
    }
  });