Question

我正在使用x-editable编辑内容。在正式文档中显示为“打开页面并单击element。输入新值并提交表单。它将带有新值的ajax请求发送到/post”。

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

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

现在，当我在浏览器中输入http://localhost:5055/update/department?id=55&name=yoo时，UI上的相应内容将被更新。问题在于每个数据都有不同的ID和名称，因此该网址将是动态/update/department?id=dynamicID&name=newvalue

如何使用x-editable生成动态网址？

目前，我在data-url="/update/department?id=${department.optString("departmentId")}&name="内添加了<a>，但是在弄清楚如何设置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)

呈现表格的代码

        <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可编辑：动态网址Ajax？

1 个答案: