Search code examples
jqueryx-editable

jQuery + x-editable: dynamic url ajax?

I am using x-editable to edit content. In the official doc it says "Open your page and click on element. Enter new value and submit form. It will send ajax request with new value to /post".

This is what I would like to do, however my url is dynamic. I want to know how can I generate a dynanmic url?

Here's the UI showing content and editable enable:

enter image description here

enter image description here

Right now when I just enter http://localhost:5055/update/department?id=55&name=yoo in my browser, the corresponding content on my UI will be update. The problem is each data has a different id and different name, so the url will be dynamic /update/department?id=dynamicID&name=newvalue

How can I generate a dynamica url using x-editable?

Currently I add data-url="/update/department?id=${department.optString("departmentId")}&name=" inside my <a>, but having trouble figure out how to set name= .

In my js file, I tried:

$('.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)
    }

  })

And I got an error: POST http://localhost:8000/update/department?id=55&name= 405 (Method Not Allowed)

code to render 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>

enter image description here

Solution

  • This is what I ended up doing. First, I added object-type="something" to the <a> tag. This in an important attribute because other page will use the same function, so the url must be dynamic. For example, in department page:

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

    in vendor page:

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

    Then, in my js, I create a success function, generate the url, then write the ajax inside the success function

    $('.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);
        }
      });
    }
  });