CODEWITHSUNDEEP
jquerytwitter-bootstrap
Devmasta
Devmasta

Reputation: 563

How to change modal content on click (Bootstrap)

I was searching answers about this question but I didn't find the right answer that I need it. I'm using modal dialog with bootstrap and I want on click event to change the content of the modal.

This is my modal dialog code

<div class="modal fade" id="myModal{{ $user->id }}" tabindex="-1" class="closemodal" 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"></button>
                <h4 class="modal-title" id="myModalLabel">More About {{ $user->name }}</h4>
            </div>
            <div class="modal-body">
                <center>
                    <img src="http://bootdey.com/img/Content/user_1.jpg" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
                    <h3 class="media-heading">{{ $user->name }}<small>, USA</small></h3>
                    <span><strong>Skills: </strong></span>
                    <span class="label label-warning">HTML5/CSS</span>
                    <span class="label label-info">Adobe CS 5.5</span>
                    <span class="label label-info">Microsoft Office</span>
                    <span class="label label-success">Windows XP, Vista, 7</span>
                </center>
                <hr>
                    <center>
                        <p class="text-left"><strong>Email: </strong>
                            {{ $user->email }}</p>
                        <br>
                    </center>
            </div>
            <div class="modal-footer">
                <center>
                    <button type="button" class="btn btn-default" data-dismiss="modal">I've heard enough about {{ $user->name }}</button>
                    <button type="button" class="btn btn-danger" id="editUserAdmin">Edit informations</button>
                </center>
            </div>
        </div>
    </div>
</div>

After I click on the button Edit informations I want to change all content, I want to insert some input fields.

Upvotes: 1

Views: 7752

Answers (2)

sTx
sTx

Reputation: 1221

You can:

  1. make 2 divs: <div id="default"></div><div id="on_click" style="display:none"></div> and hide default and show on_click on an click event added to Edit informations button; and switch between them like this.
  2. make a container div with initial content then on click do this:var html = "<p>New html</p>";$(".container_div").empty().append(html); - but like this the old content will be erased from dialog and remain the new one until page refresh

Upvotes: 1

Ultrazz008
Ultrazz008

Reputation: 1688

You could create function:

function show_my_modal() {
    var modal = $('#my_modal_id');

    // change modal content
    modal.find('.i_want_to_change_value_of_element').val('element value');

    // show my modal:
    modal.modal('show');
}

And you can use on button onClick='show_my_modal();'

Upvotes: 4

Related Questions