alan_k Posted November 30, 2014 Share Posted November 30, 2014 I need to assign the data attribute data-toggle used in Bootstrap two values like: echo "<td><a class='one glyphicon glyphicon-trash' id='delete-row' data-toggle='modal tooltip' data-placement='bottom' title='Delete Record' href='#' data-target='#myModal' aria-hidden='true' data-id='" . $row['id'] . "'></a></td>"; cause this element has a tooltip and is also used to trigger a modal when clicked. However I cant get this to work. Does anyone know if this can be done and how because I see no documentation and I've tried several different scenarios all no good. Link to comment Share on other sites More sharing options...
Ingolme Posted November 30, 2014 Share Posted November 30, 2014 It doesn't look like bootstrap was prepared for that. What you can do is use the jQuery function for the tooltop. Give your link a class or ID and call the tooltip() method. $("#delete-row").tooltip(); I suspect you're creating multiple rows and you're giving the same ID "delete-row" to all the links. This isn't going to work, an ID can only appear once on the page. If you want more than one use a class instead. 1 Link to comment Share on other sites More sharing options...
alan_k Posted November 30, 2014 Author Share Posted November 30, 2014 The only thing is then will I have the styling the same? The Edit option is right before it and uses the tooltip from Bootstrap. I was wondering, I tried activating the modal thru javascript($('#myModal').modal(show) but it did not work, that is why I fell back on the attribute data-target way of activating the modal for the confirmation box. Do you have any experience using the js way and is there something there not mentioning in the Bootstrap documentation to make it work? Link to comment Share on other sites More sharing options...
alan_k Posted November 30, 2014 Author Share Posted November 30, 2014 (edited) Follow Up. I stand corrected the jquery function does style it the same way, and thanks for the heads up I had to add class=delete-row. I would be curious though if you have any experience calling the modal plugin via js and how it is done. Edited November 30, 2014 by alan_k Link to comment Share on other sites More sharing options...
Ingolme Posted November 30, 2014 Share Posted November 30, 2014 If you want to open a modal box you have to assign an event handler to the link which calls the modal('open') method on the box. $(".delete-row").click(function(e) { $("#myModal").modal('open'); e.preventDefault(); // Prevent the link from opening a new page}) Remember that if you want to add a class "delete-row" to your link, you have to add it inside the same class attribute that has the glyphicon and other classes. You can't have two class attributes. class='one glyphicon glyphicon-trash delete-row' Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now