Include data in form that is disaplayed in modal

phatlix

Link to test case:
https://dilih.link/DataTable/

Description of problem:

I was able to hack together a a modal that opens when my "Request Song" (on each row) is clicked. I am also able to receive the "Name" that is typed into the modal, when I hit "Request". But I am unable to pull the Artist and Title out of the modal form and send it along with the Name.

I have added a modal that looks like this (found this code in another thread):

  $('#catalog tbody').on('click', 'button', function() {
    var data = table.row( $(this).parents('tr') ).data();
    
    table.row( $(this).parents('tr') ).select();
    c = table.rows( { selected: true } ).nodes().length;
    console.log("# selected rows after 'click': ", c);
                              
    // craft modal body                                                                 
    $('#artist').html(data.artist);
    $('#title').html(data.title); 
    $('#reqModal').modal('show');                                 
  });

I have a modal/form that looks like this:

<div id="reqModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Song Request</h4>
      </div>
      <div class="modal-body">

<form id="myform" action="" method="POST">

        <p><strong>Name: </strong><input type="text" id="name" name="name"></p>
        <p><strong>Artist: </strong><span id="artist"></span></p>
        <p><strong>Title: </strong><span id="title"></span></p>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-secondary" data-dismiss="modal">Cancel</button>
        <button id="submit" type="submit" class="btn btn-info">Request</button>
      </div>

</form>
    </div>
  </div>
</div>

and a submit function that looks like this:

$("#myform").on('submit' ,(function(event) {
        event.preventDefault();
        var fdata = new FormData(this);
        //fdata.append('artist', '#artist');
        $.ajax({
            type: "POST",
            url: "/post/submit.php",
            data: fdata,
            processData: false,
            contentType: false,
            cache: false,
            success: function (fdata) {
 
            }
        });
 
    }));

SO many times I thought I was close to nailing this... but have just failed miserably. I was trying to use a append() on the submit function, and it works. But I can not make it pull the selected row data into the append.

Thanks for your help!

kthorngren

I was trying to use a append() on the submit function, and it works. But I can not make it pull the selected row data into the append.

Are you trying to get the row data or the form data?

Using formData() is a standard Javascript method not a Datatables method. It doesn't look like artist and title are input elements. I believe these need to be inputs so formData()` can fetch the input values from the form.

You may want to use the append method when creating the form in the // craft modal body section. See the formData() docs for more details.

Handling the form is outside of Datatables. You will find better answers on Stack Overflow or other tutorials to learn how to handle forms.

If you want help getting the form working then please build a test case with what you have so we can help debug and modify your code. The Ajax request is not needed to help with handling the form.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

phatlix

Hey Kevin,

Thanks for looking at it. I tried to create a test case but the buttons dont show up, so it kind of makes the "test" useless. http://live.datatables.net/haxuvubo/1/edit

The real question I had was how to I turn a field on a row into a variable that I can use in something else? I don't really care what the solution is, may it be input tags, formdata, etc..

I just want a button that automagically when clicked grabs the artist and title out of the row, generates a form (of any sort), allows the user to put there name on it, then it sends that info to me.

I say "I just..." but there may be nothing "just" about this. I "just" want to return to 1980, but I "just" can't.

Thanks for your time Kevin, and again I appreciate you.

Regards,

Kenny

allan

Hi Kenny,

You can use row().data() to get the data from a row (i.e. the one that had its button clicked on in this case) - there is a basic example of that here.

You might also be interested in this Editor example which is a bit more complete - it pops up a form for the row. Is that more along the lines of what you are looking for?

Allan

phatlix

Hi Allan,

I will dig into those and see what I can conjure up. I hadn't really thought about using editor in that way. It might be worth throwing some time in that direction.

I appreciate your help and insight Allan.

Thank you,

Kenny

phatlix

I got the buttons to work on the test case. Looking through some other test cases / examples, I'm curious if I could figure out what I'm looking to do without using a form.
http://live.datatables.net/haxuvubo/5

In an attempt to stay as close to my actual build, is it possible to use columnDefs on the live.datatables.net? I was unable to get a button to show on the rows using,

        columnDefs: [
            {   "targets": [ -1 ], 
                "data": 'request', 
                "defaultContent": "<button type='button'>Request Song</button>"
           }
        ]

phatlix

Oh! Allen,

I was pondering your comment about using Editor. It would be extremely clean to go that route. What I would need to do though is hijack the "Update" button in the Edit screen somewhere, and turn it into a "Send this info to my email/or wherever" button.

phatlix

Figured it out! Here is the working code.
http://live.datatables.net/cibocese/1

I moved back to the form tags so I could work with the FormData again, and start screwing with the append() option. I understand forms is not something you do here, but I just wanted to post back and complete this thread. Maybe it might help someone else.

The code that worked...

      var data = new FormData(myform);
          data.append("name", $('input:text').val());
          data.append("artist", $('#fartist').text());
          data.append("title", $('#ftitle').text());

Pulled the input value from the modal/form and then the two cells from the original modal row().data() function.

Take care!

colin

Excellent, thanks for reporting back,

Colin