Open and Load Modal Window Dynamically

[eluser]Hayezb[/eluser]
Hello!

I'm using Codeigniter with Datatables and Bootstrap, freaking love using them all together. But, I'm stuck with this issue and need some help!

I've got a datatable pulling data from my "notes" table. There is a "view" link in each row, I want the user to click on it and a BS modal pop up so they can view the notes they entered. I've had some help on StackOverFlow and this is where I'm at.

Link in Datatable ( it's not wanting to let me show my on click function here):

Code:

<a href="#" >view</a>

JS it's calling:

Code:

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

I've created a subfolder called "modal" in my views, the URL linking to the function that calls that view is correct. I've checked in my JS Console, there are no errors either. Nothing happens when I click it.

[eluser]CroNiX[/eluser]
2 things I see:
1) There isn't anything telling it to trigger your notes_modal/ajax function when clicking on the link.

2) In your ajax success event, you retrieve the html but don't do anything with it. You just tell the modal to show.

Something like:

Code:

// Give class so we can assign a click event to it
<a href="#" class="ajax-modal">view</a>

Code:

$('.ajax-modal').click(function(e){
  e.preventDefault(); //cancel native click event
  $.ajax({
   type: "POST",
   url: "../load_notes_modal",
   success: function (html) {
    $("#viewnoteModal").html(html).modal('show'); //insert retrieved data into modal, and then show it
   },
   error: function() {
    alert('Ajax did not succeed');
   }
  });
});