Question

I’m using twitter bootstrap modals for some update of contacts, but I have some problems. The modal always display the information of the first contact. However when I display the information outside the modal, this is displayed in the correct form

<?php foreach($contacts as $contact):  ?>  
<?php if($school==$contact->Schools_id): ?> 
<table class="table table-bordered  table-hover">
        <tbody><br>

                <button role="button" class="btn"><?php echo anchor('contacts/delete_contact/'.$contact->Contacts_id,' <i class="icon-remove"></i>'); ?></button>
                <a href="#UpdateContact" role="button" class="btn" data-target="#UpdateContact" data-toggle="modal"><i class="icon-pencil"></i></a>
                <tr>
                    <td>Name</td>
                    <td><?php echo $contact->name. " ". $contact->last_name; ?></td>
                </tr>
                <tr>
                    <td>Title</td>
                    <td><?php echo $contact->title; ?></td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td><?php echo $contact->phone; ?> </td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><?php echo $contact->email; ?></td>
                </tr>
                <div id="UpdateContact" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" tabindex="-1" aria-hidden="true">
                    <div class="modal-header">
                        <?php $hidden = array('contact_id' => $contact->Contacts_id,
                                              'school_id' => $contact->Schools_id);
                                echo form_open_multipart('contacts/update_contact', "", $hidden);  ?>
                        <h3>Update Contact</h3>
                    </div>
                    <div class="modal-body">
                        <label for="name">First Name <span class="required">*</span></label>
                        <input id="name" type="text" name="name" maxlength="20" ] 
                               value="<?php echo set_value('name', $contact->name ); ?>"  />
                        <br><br>
                        <label for="last_name">Last Name <span class="required">*</span></label>
                        <input id="last_name" type="text" name="last_name" maxlength="20" ] 
                               value="<?php echo set_value('last_name', $contact != NULL ? $contact->last_name : " " ); ?>"  />
                        <br><br>
                        <label for="title">Title <span class="required">*</span></label>
                        <input id="title" type="text" name="title" maxlength="45" ] 
                               value="<?php echo set_value('title', $contact != NULL ? $contact->title : " " ); ?>"  />
                        <br><br>
                        <label for="phone">Phone<span class="required">*</span></label>
                        <input id="phone" type="text" name="phone" maxlength="11" ] 
                               value="<?php echo set_value('phone', $contact != NULL ? $contact->phone : " " ); ?>"  />
                        <br><br>

                        <label for="email">Email<span class="required">*</span></label>
                        <input id="email" type="text" name="email" maxlength="45" ] 
                               value="<?php echo set_value('email', $contact != NULL ? $contact->email : " " ); ?>"  />
                    </div>
                    <div class="modal-footer">

                    <?php echo form_submit( array('class' => 'btn btn-primary', 'name' =>'submit', 'value' => 'Submit')); ?>
                    <?php echo form_close(); ?> 
                    </div>
                    </div>
              </div>

        </tbody>
    </table>

            <?php endif ?>
        <?php endforeach ?>

Some of the solutions I found in this question Twitter bootstrap remote modal shows same content everytime was:

<script type="text/javascript">       
  $(document).ready( function(){
         $('#UpdateContact').on('hide', '.modal', function () {
          $(this).removeData('modal');
        });
    });  
</script>

But is still not working for me.

Answer 1

Like datasage said your modal DIV id is not unique. concat your DIV id with the contact id to make each modal unique.

<div id="UpdateContact<?php echo $contact->Contacts_id ?>"

Also make sure you link your HREF the same way