How can I access the row inside the ajax url?

How can I access the row inside the ajax url?

ak47ak47 Posts: 16Questions: 5Answers: 2

I'm trying to convert these calls to work against my rest API without an intermediary function on the server. So in order to construct a REST url for, say, an edit operation against a listing, I need to do a PUT request against:

/listings/12345

Where 12345 is the identifier for the listing, and I have that as DT_Rowid for the row that is being edited. What I don't know how to do is append that identifier to the url.

  editor = new ($.fn.dataTable.Editor)(
    ajax: {
      url: "listings/" + ?
      method: 'PUT'
      data: (d) -> {
        model_name: 'listings;
      }
      }
    table: '#listings_table'
    fields: [...

This question has an accepted answers - jump to answer

Answers

  • ak47ak47 Posts: 16Questions: 5Answers: 2
    edited June 2022

    And of course I can't do this:

     editor = new ($.fn.dataTable.Editor)(
        ajax: {
          url: 'listings/' + $('.selected').attr('id')
          method: 'PUT'
          data: (d) ->
            console.log $('.selected')
            console.log $('.selected').attr('id')
            d.id = '123'
          }
        table: '#listings_table'
        fields: [...
    

    Because $('.selected').attr('id') is blank on page load.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    Looks like you can use the ajax() API to change the URL.

    Kevin

  • ak47ak47 Posts: 16Questions: 5Answers: 2

    It works on the DataTable object, but I kept getting:

    editor.ajax.url is not a function
    

    editor is indeed defined earlier in my Javascript, so, not sure what's going on there.

    I found this:

    https://editor.datatables.net/reference/option/ajaxUrl

    which almost gives me the flexibility I need but unfortunately it's deprecated. I'm trying to hook Editor up against a REST API where I need different urls for each CRUD action, as well as different methods (POST, PUT, DELETE).

  • ak47ak47 Posts: 16Questions: 5Answers: 2

    The only thing I can think of is I'm going to have to override the ajax of the editor upon click of the New, Edit, and Delete buttons.

  • ak47ak47 Posts: 16Questions: 5Answers: 2

    Check it out, I got it working. First I add classes to the buttons in the DataTable:

        buttons: [ 'copy', 'excel', 'pdf',
            { extend: 'create', editor: editor, className: 'table-button create' },
            { extend: 'edit',   editor: editor, className: 'table-button edit' },
            { extend: 'remove', editor: editor, className: 'table-button delete' }
        ]
    

    Then I listen for a click on those specific buttons, and set the ajax using different values:

      $("body").on 'click', '.table-button', (e) ->
        classList = $(this).attr("class")
        if ~classList.indexOf('edit')
          editor.ajax ({
            url: location.pathname + '/' + $('.selected').attr('id')
            method: 'PUT'
            data: (d) ->
              d.id = $('.selected').attr('id')
            })
        else if ~classList.indexOf('create')
          editor.ajax ({
            url: location.pathname
            method: 'POST'
            data: (d) ->
              d.id = $('.selected').attr('id')
            })
        else if ~classList.indexOf('delete')
          editor.ajax ({
            url: location.pathname + '/' + $('.selected').attr('id')
            method: 'DELETE'
            data: (d) ->
              d.id = $('.selected').attr('id')
            })
    

    Works across all my controllers automatically in my Ruby on Rails application.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    editor.ajax.url

    Looks like you are using the ajax() API incorrectly. It is different than the Datatables ajax.url() API. See the example in the docs.

    Kevin

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    In Editor's ajax option, you can use {id} in the URL string and Editor will substitute it:

    ajax: {
      url: 'listings/{id}',
      ...
    }
    

    There is an example of that available here.

    Allan

Sign In or Register to comment.