Question

I am using Codeigniter framework and twitter bootstrap for my development purpose. Here I encountered a problem where I have to edit a form in the modal box. How can I pass data to the form displayed in twitter bootstrap modal box?. Please help me with a possible solution.

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Header of Modal</h3>
  </div>
  <div class="modal-body">

    <form class="form-element">
        Title: <input type="text" class="form-title" value="initial title" /><br />
        Something Else: <input type="text" class="form-element2" value="initial value" /><br />
        <div class="some-box">
            The elements inside the box
        </div>
    </form>

  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

<a href="#" class="changeTitle">Click here to change title</a>
<a href="#" class="changeElement">Click here to change Element2</a>
<a href="#" class="changeDiv">Click here to change div's contents</a>

<script>
$(".changeTitle").click(function(){
    $(".form-title").val("New title");
});
$(".changeElement").click(function(){
    $(".form-element2").val("New value of element");
});
$(".changeDiv").click(function(){
    $(".some-box").html("New Contents of the div element");
});
</script>