CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
keisaac
keisaac

Reputation: 356

Pass appendTo dynamic rows value to bootstrap modal

I am currently using appendTo to add dynamic rows. What I want to happen is that if I will click one of the td (not including the remove button), It will open a bootstrap modal window and get the value of other td of its belonging row. here's the image.

enter image description here

enter image description here

Here's my code adding dynamically that I want to get the value of td and pass it to bootstrap modal.

function AddOrder(new_code, new_name, new_qtty, new_cost) {    
    var rows = "";  
    var code = new_code;
    var name = new_name;
    var cost = new_cost;
    var qtty = new_qtty;

    rows += 
        '<tr>"' + 
        '<td class="item_code" data-toggle="modal" data-target="#mymodal">'+code+'</td>'+
        '<td class="item_name" data-toggle="modal" data-target="#mymodal">'+name+'</td>'+       
        '<td class="item_qtty" data-toggle="modal" data-target="#mymodal">'+qtty+'</td>'+ 
        '<td class="item_cost" data-toggle="modal" data-target="#mymodal">'+cost+'</td>'+ 
        '<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
        '</tr>';
    $(rows).appendTo("#dynamic_added tbody");
}

I tried putting putting onclick on td with data-toggle="modal" data-target="#mymodal" but only the modal is working not the function I'm using for example:

function GetData() {
    $('.item_code').click(function(){
        alert($(this).closest('tr').find('.item_code'));
    });
}

Upvotes: 3

Views: 1622

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

Do you want something like this:

$('.item_code, .item_name, .item_qtty, .item_cost').click(function() {
  $('.modal-body').html($(this).closest('tr').html());
  $('#myModal').modal('show');
});
td {
  border: 1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="dynamic_added">
  <tbody>
    <tr>
      <td class="item_code">code_1</td>
      <td class="item_name">name_1</td>
      <td class="item_qtty">qtt_1</td>
      <td class="item_cost">cost_1</td>
      <td>
        <button class="btn remove-button">X</button>+</td>
    </tr>
    <tr>
      <td class="item_code">code_2</td>
      <td class="item_name">name_2</td>
      <td class="item_qtty">qtt_2</td>
      <td class="item_cost">cost_2</td>
      <td>
        <button class="btn remove-button">X</button>+</td>
    </tr>
    <tr>
      <td class="item_code">code_3</td>
      <td class="item_name">name_3</td>
      <td class="item_qtty">qtt_3</td>
      <td class="item_cost">cost_3</td>
      <td>
        <button class="btn remove-button">X</button>+</td>
    </tr>
  </tbody>
</table>


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Upvotes: 1

keisaac
keisaac

Reputation: 356

I just solved my own problem just a bootstrap modal call is all I am missing. I addded a class getdata that I will call to my javascript function 

function AddOrder(new_code, new_name, new_qtty, new_cost) {    
    var rows = "";  
    var code = new_code;
    var name = new_name;
    var cost = new_cost;
    var qtty = new_qtty;

    rows += 
        '<tr>"' + 
        '<td class="item_code getdata" onclick="GetData();">'+code+'</td>'+
        '<td class="item_name getdata" onclick="GetData();">'+name+'</td>'+       
        '<td class="item_qtty getdata" onclick="GetData();">'+qtty+'</td>'+ 
        '<td class="item_cost getdata" onclick="GetData();">'+cost+'</td>'+ 
        '<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
        '</tr>';
    $(rows).appendTo("#dynamic_added tbody");
}

If I will click anywhere to the td except the button It will pop up the modal and pass the current data of that row.

function GetData() {
    $(document).on('click', '.getdata', function(){
        $('#mymodal').modal();
        var modal_code =$(this).closest('tr').find('.item_code').text();
        var modal_name =$(this).closest('tr').find('.item_name').text();
        var modal_qtty =$(this).closest('tr').find('.item_qtty').text();
        var modal_cost =$(this).closest('tr').find('.item_cost').text();

        var modal = $("#mymodal"); // this is the id of my modal 
        modal.find('.modal-body').text(modal_code + modal_name + modal_qtty + modal_cost);
    }); 
}

Upvotes: 1

Related Questions