0

Here I have a gviz table with data: http://jsbin.com/OJAnaji/9 and CODE: http://jsbin.com/OJAnaji/9/edit

I also create an modal window with input fields. Now I want when I click on table row to show row data into input fields in modal window... How I can do that?

<!-- Button trigger modal -->
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">
Edit selected row</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Add new row</h4>
      </div>
      <div class="modal-body">
        <div class="input-group">
  <span class="input-group-addon">Name</span>
  <input type="text" id-"name" class="form-control" placeholder="Type name">
        </div></br>
        <div class="input-group">
  <span class="input-group-addon">Gender</span>
  <input type="text" id="gender" class="form-control" placeholder="Gender?">
</div></br>
        <div class="input-group">
  <span class="input-group-addon">Age</span>
  <input type="text" id="age" class="form-control" placeholder="Number of age">
</div></br>
        <div class="input-group">
  <span class="input-group-addon">Donuts eaten</span>
  <input type="text" id="donuts_eaten" class="form-control" placeholder="Number of donuts eaten">
</div></br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

So: 1.user click on table row 2.user click on button "Edit row" 3.User get values from row to input fields

Is this possible to do ?

sorry for my english its bad but i'm learning hard

2 Answers 2

1

Check this fiddle, this is partially working i.e. only for table rows with white background. Change necessary things to get it worked for all rows.

1

because im not familiar with the code of yours i will write a code i think will suit you and add some comments to make it more clear and you tell me if you need something else.

$("#YourTableId tbody tr").click(function () {
    //this = the row a user has clicked
    var storedNameInTable = $(this).find("#name").text(); // will get the label with id = name from the same row a user has clicked
    $("#name").val(storedNameInTable); //will take the name and put it on the textbox.
    var self = this;        //saves the row scope
    $("#SaveChanges").click(function () {
        var NameAfterChange = $("#name").val();  //takes the newly changed name
        $(self).find("#name").text(NameAfterChange);  //puts it in the table
        $("#SaveChanges").unbind("click");  //make sure you want call this button again so you want have more than 1 click event
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.