jQuery + x-editable: dynamic url ajax?

225
July 24, 2018, at 09:30 AM

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:

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>

READ ALSO
jQuery post method ignores returned value

jQuery post method ignores returned value

I have a form on a site that will either return "invalid email" and reveal a div, or it will be successful, hide the form and reveal a different divWhen I console

108
PHP MYSQL JQUERY - Insert a line break after bullet points

PHP MYSQL JQUERY - Insert a line break after bullet points

I will attempt to ask this question more clearly, as apparently my previous question was not clear enough

190
Remove HTML Element in a parent HTML Element

Remove HTML Element in a parent HTML Element

I have a basic table and one column should have an active/waiting badge

105
Button element not working in safari. Issue with jQuery?

Button element not working in safari. Issue with jQuery?

The Show Me button on my homepage is not working properly in Safari (on both iPhone and mac)When you press or click on it, nothing loads

101