2

im new to jquery and twitter bootstrap so please forgive the dumb question.

I have an MVC view which setups up a twitter bootstrap modal and this is activated by a link also output within this view.

I want to use data-remote with the modal to load the modal with the contents of an MVC partial view.

I have all of this working nicely.

but what I then wanted to do was be able to access elements (from the partial view) via jquery from the main view, and even though I am sure I have got the selectors right it is not working as expected.

for example I have a href link which I try to assign to the click event, but this does not fire.

however if I move the script so that it is output within the partial view as pulled into the modal-body, then the script does work and the click event is handled.

I would rather not have to have script in the partial view (even if referenced) , I would rather reference one script in the main view.

is there anyway of being able to access the elements that are remotely loaded into the modal-body without having to put the script within the remote partial view?

as an addition, I just mocked up a test where the modal doesn't use the data-remote and the anchor href was inserted directly within the modal-body, and doing this I am still unable to access this anchor.click event from the main page. any suggestions much appreciated.

doing more research I have found an answer in the following post How to set the input value in a modal dialogue?

This seems to suggest the jquery selector should also include .modal-body so I have changed my selector from the following :

 $("#TestButton").click(function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    })

to this 

 $(".modal-body #TestButton").click(function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    })

and now the click event fires as I had originally expected.

However im now unsure why I need the .modal-body as part of the jquery selector.? Could someone explain this?

Community
  • 1
  • 1
Kramer00
  • 1,167
  • 3
  • 12
  • 34

2 Answers2

1

You need to wire up the click events to the href's when the new dynamic content has been loaded into the DOM.

When the page loads, JQuery will look through the DOM for your $("#TestButton") and find nothing as at the time when this happens the dynamic content has yet to be injected.

There are a couple of ways of handling this... firstly you can delay the wire up of the click events with JQuery until the new content has been injected, or you can use the .live function of JQuery.

Your code would be:

$("#TestButton").live('click', function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    });

Actually... it seems Live has been depreciated as of JQuery 1.7

it is... 

$("#TestButton").on('click', function (ev) {
            ev.preventDefault()

            alert('Test Button Clicked'); 
        });

Hope this helps.

BenjaminPaul
  • 2,931
  • 19
  • 18
0

You can manipulate the content of a remote content modal in Bootstrap 3 by using HTML 5 data attributes on the clicked element and listening for the modal show event.

http://jsfiddle.net/dbasch/UbpS6/

/main.html

<a data-toggle="modal" href="/remote.html" data-target="#myModal" data-merchant-name="Bob's House of Pancakes">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" 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">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="te"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script type="text/javascript">

// we can't use the show.bs.modal or loaded.bs.modal events
// because the remote modal content is not accessable in the DOM
// when those events trigger

// when the remote modal content is shown  
$('#myModal').on('shown.bs.modal', function (e) {

    // get a data attribute value from the clicked element
    var merchantName = $(e.relatedTarget).data('merchant-name');

    // and set the content of the shown remote modal
    $('#myModalLabel').text(merchantName);

});

// cleanup the content of the hidden remote modal because it is cached
$('#reservationModal').on('hide.bs.modal', function (e) {

    $(this).removeData('bs.modal');

});

</script>

/remote.html

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

        </button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>

    </div>
    <div class="modal-body">
        <!-- start slipsum code -->
        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
        <!-- please do not remove this line -->
        <div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a>
        </div>
        <!-- end slipsum code -->
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>
dbasch
  • 1,698
  • 1
  • 15
  • 31