Jasny Bootstrap rowlink Modal invocation

Question

i just found out that there was an extension to bootstrap when i am trying to find something like .row-linkso when i implemented it on my table, i can't seem to invoke a modal on when i click on each row. the modal in boostrap won't be invoke. I really can't trace why cuz when i debugged (using firebug) the page, the td tag where i put my a tag, my a tag link can't be seen. the one that is displayed is only the value of . e.g <a> some link </a>

some link is the only thing i see on firebug, usually when i debug i see all the html tag like so <a href="some link" data-toggle="modal" data-target="some taget"> click me </a> but i really don't know why i can't invoke a modal using row-link

Again, my goal when i click 1 row a modal box appears

here is my code snippet

<table>
   <thead>
        // some headers
   </thead>
   <tbody data-provides="rowlink">
      <tr>
        <td><a href="#myModal" data-toggle="modal" data-target="modal">Click me</a> </td>
        <td>/*some data*/</td>
        <td>/*some data*/</td>
      </tr>
   </tbody>
</table>

<div id="myModal" /*some legit modal attr please see bootstrap site i just copied them*/>
    <div>
        MODAL HEADER
    </div>

    <div>
        MODAL BODY
    <div>

    <div>
        MODAL FOOTER
    <div>
</div>

WHEN I TRIED THIS ONE, NOTE THAT THIS link is outside the table html tag

<a href="#myModal" data-toggle="modal" data-targe="modal">Click me</a>

Anyone knows how to implement modal view inside row-link please do share

Answer 1

If you check this link, the below code takes the href from the link and changes the window.location to href on click of row and hence it's expecting an URL.

var href = link.attr('href')

$(this).find('td').not('.nolink').click(function() {
   window.location = href;
}) 

Also the <a> tag being stripped is also mentioned in their code.

link.replaceWith(link.html())

A solution to tackle this is to manually write a script where in you target the row which will have modal and add the required attribute to the row. See Fiddle. Here I have given a class .rowlink-modal to the tr which one would want to be clickable and target that class in script and add data attributes.

$('.rowlink-modal').each(function(){
 $(this)
   .attr('data-toggle','modal')
   .attr('data-target','#myModal');
});

The 'Action' link if clicked will open modal2 and when you click the whole row the first modal is opened.