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

opps edited it.. acutally dats wat i did, sorry for the type, still the problem persist — lemoncodes, Apr 28 '13 at 13:58
actually that one below already works but the sad thing is it isn't row-link its just outside the table — lemoncodes, Apr 28 '13 at 13:59
Ok [check this fiddle](http://jsfiddle.net/vyUEb/). I added #myModal to href inside `` and classes `"modal fade hide"` to modal. — anpsmn, Apr 28 '13 at 14:25
actually this works fine when your invoking link is outside the rowlink data attribute got no problem with that, my problem is when i put it inside a rowlink table.. see my edit above — lemoncodes, Apr 28 '13 at 14:32
See [this](http://jsfiddle.net/vyUEb/1/). The markup I copied from their site works (If you click on Action). It seems they expect tag in all columns also it expects last column to be action link. Not sure though — anpsmn, Apr 28 '13 at 15:18
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29060/discussion-between-lemoncodes-and-anpsmn) — lemoncodes, Apr 28 '13 at 15:27

anpsmn · Accepted Answer · 2013-04-28T18:26:36.253

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.

yo dude sorry for a very late update, both you and the one who made the jasny extensions made some point, he put explicitly the data-attr while you used js. hmm both of you are right.. i guess u ans first i'll choose this one — lemoncodes, May 01 '13 at 12:58

Arnold Daniels · Answer 2 · 2014-08-12T09:47:06.123

Boostrap 3

This works out of the box with Bootstrap 3.

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
        <tr>
            <td><a href="#myModal" data-toggle="modal">Modals</a></td>
            <td>some text</td>
            <td class="rowlink-skip"><a href="#myModal2" data-toggle="modal">Action</a></td>
        </tr>
    </tbody>
</table>

Bootstrap 2

For now rowlink can't be used to trigger JavaScript events which would take place when clicking the link. It will only open URLs using location.href. This will be fixed in the future.

However, in this case it isn't needed to use rowlink. You can add data-toggle="modal" to each tr and add a property data-target instead of using href.

To get the rowlink style however effect, add the rowlink class to the tr.

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowlink" data-target="#myModal" data-toggle="modal">
            <td>Modals</td>
            <td>some text</td>
            <td class="nolink"><a href="#myModal2" data-toggle="modal">Action</a></td>
        </tr>
    </tbody>
</table>

See the fiddle

good day sir, yes i get it, someone already did some js workaround but both your answer are the same, only thing is that he used js to put the data-attr while yours is explictly written on the trs.. i'll choose this cuz he was the one who answered first. tnx anyways sir. — lemoncodes, May 01 '13 at 12:59
This example is for Bootstrap 2. I'll add a Bootstrap 3 example. — Arnold Daniels, Aug 12 '14 at 09:43

Jasny Bootstrap rowlink Modal invocation

2 Answers2

Boostrap 3

Bootstrap 2

See the fiddle