Open and Load Modal Window w/ Javascript and Codeigniter

Question

I'm using Codeigniter and Datatables together and need to load a modal popup when the user clicks "view" for a certain row of data.

Here is my link with my onClick:

<a href="#" onClick="javascript:notes_modal()">view</a>

Here is my JS:

function notes_modal(data) {
    $.ajax({
        type: "POST",
        url: "../load_notes_modal",
    }).done(function ( html ) { 
        $("#selected_note").modal('show');
    });
}

Here is my view that is being loaded by the "load_notes_modal" function I'm calling:

<div class="modal fade" id="selected_note" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        Random Content!
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">View Location Note</h4>
        </div>
        <div class="modal-body"></div>
    </div>
</div>

I'm not getting any errors, just no luck getting the modal to show. I'm new to JS and trying to learn, I might be headed in the complete wrong direction!

Answer 1

You will want to put your modal trigger in the success callback like so:

HTML

<a href="#" class=".openModal">view</a>

JS

function notes_modal() {
    $.ajax({
        type: "POST",
        url: "../load_notes_modal",
        success: function ( html ) { 
            $("#selected_note").modal('show');
        },
        error: function() {
            alert('ajax did not succeed');
        }
    });
}

function clickListener() {
    $('.openModal').unbind();
    $('.openModal').click(function (e) {
        e.preventDefault();
        notes_modal();
    });
}

You have your dataTable something like below. Call the functions from within fnDrawCallback() so that each time the table is drawn, the listeners are called. Note the changes made above as well.

var oTable = $('#myTable').dataTable({
    "fnDrawCallback": function (oSettings) {
        notes_modal();
        clickListener();
    }
});

New Update: To work with dataTable redraw.