Reputation: 65

Getting data from div to modal via jQuery

I have PHP generated div's that have some data from database. every one of them have unique ID. I need to get data from selected div (I have this coded) and through it's ID it's supposed to put data from this div to modal.

MODAL:

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="form-horizontal" id="edit-form">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
            </div>
          </div>
          <div class="form-group">
            <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
            </div>
          </div>
          <div class="form-group">
            <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
            </div>
          </div>
          <div class="form-group">
            <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
            </div>
          </div>
          <div class="form-group">
            <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
            </div>
          </div>
          <div class="form-group">
            <label for="b" class="col-sm-2 control-label">Płeć</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
            </div>
          </div>
          <div class="form-group">
            <label for="d" class="col-sm-2 control-label">Typ Konta</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
          <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
        </div>
      </form>
    </div>
  </div>
</div>

function that calls modal out:

function edit(){
    $('#edit-modal').modal('show');
}

one of divs:

<div class="panel panel-kol" mid="4"><div class="panel-body profile white">
  <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
  <div class="profile-data">
    <div class="profile-data-name" style="font-weight: bold;">Krzysztof Marczewski</div>
    <div class="profile-data-title">Recepcjonista</div>
  </div>
</div>                                
<div class="panel-body">                                    
  <div class="contact-info text-center" style="margin-top: -20px;">
    <p><small>Telefon komórkowy</small><br>997998999</p>
    <p><small>Od - Do</small></p>
    <div class="row">
      <div class="col-md-2"></div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" value="00:00:12">
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" value="00:00:19">
          </div>
        </div>
        <div class="col-md-2"></div>
      </div>            
    </div>
  </div>
</div>

"mid" is unique ID assigned to every div generated by PHP. I just need to take data from already generated div into modal

ss:

ss v2.

Upvotes: 1

Answers (3)

Ivan Karaman

Reputation: 1234

watch this, if i understood correct...

$(document).ready(function(){
function edit(){
            $('#edit-modal').modal('show');
        }
function insertData(mid){
  var panel = $('.panel[data-mid="'+mid+'"]'),
      fullName = panel.find('.full-name').text(),
      arrName = fullName.split(" "),
      modal = $('#edit-modal');
				
  modal.find('#add-firstname').val(arrName[0]);
  modal.find('#add-nazwisko').val(arrName[1]);
  modal.find('#add-pesel').val(panel.find('.phone').text());
  modal.find('#g').val(panel.find('.start-time').val());
  modal.find('#t').val(panel.find('.end-time').val());
}
				
				edit();
				insertData(4);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" id="edit-form">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
              </div>
              <div class="modal-body">
                    <div class="form-group">
                        <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="b" class="col-sm-2 control-label">Płeć</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="d" class="col-sm-2 control-label">Typ Konta</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
              </div>
            </form>
        </div>
      </div>
    </div>
		
		<div class="panel panel-kol" data-mid="4"><div class="panel-body profile white">
                                <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
                                <div class="profile-data">
                                    <div class="profile-data-name full-name" style="font-weight: bold;">Krzysztof Marczewski</div>

                                    <div class="profile-data-title">Recepcjonista</div>
                               </div>
                            </div>                                
                            <div class="panel-body">                                    
                                <div class="contact-info text-center" style="margin-top: -20px;">
																<p><small>Telefon komórkowy</small><br><span class="phone">997998999</span></p>
                                    <p><small>Od - Do</small></p>
                                    <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control start-time" value="00:00:12">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control end-time" value="00:00:19">
                                        </div>
                                    </div>
                                     <div class="col-md-2"></div>
                                </div>            
                        </div>
                    </div>
                </div>

Upvotes: 1

Alexandr Lazarev

Reputation: 12882

To assign inputs from modal to data from a div, I would suggest to set an data-* attribute for each node with the information we need. For example:

<div class="profile-data-name" style="font-weight: bold;">
  <span data-imie="firstname">Krzysztof</span> 
  <span data-nazwisko="lastname">Marczewski</span>

It should be equal with the name attribute for the associated input from the modal.

And afterwards, in edit() function, you should iterate through all the inputs and set their value with associated data:

function edit(mid){
  var inputs = $('#edit-modal').find('.modal-body').find('input);
  inputs.forEach(function(input) {
    $(input)
      .val($("div[mid='" + mid + "']")
      .find('[data-name="' + $(input).attr('name') + '"]).text())
  })
  $('#edit-modal').modal('show');
}

Upvotes: 1

Milena Michalska

Reputation: 11

Forgive me if i understood wrong what the problem is. Try var divValue = $( "div[mid='4']" ).val() and push it into modal :) Here's jQuery documentation for atribute equals select.

Upvotes: 0

Getting data from div to modal via jQuery

Answers (3)

Related Questions