jquery datatables breaking links on page

Question

http://pytools.webfactional.com/capstoneTemp/

so I've implemented jquery datatables here on this example using a php serverside processing file which is pulling the data from mysql. probably not really relevant at all but i thought id share that info. the problem i'm having is as follows:

the Sign-in button used to work. now it just reloads the same index page. when I manually type in the address that it shows when I hover over the link,

http://pytools.webfactional.com/capstoneTemp/signIn.html

this page loads. but when i click it just reloads the index.html page and appends a "?" to the URL. I played with the javascript at the bottom of the body which is as follows:

<script src="js/jquery-1.11.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-switch.js"></script>
  <script src="js/DataTables.js"></script>
  <script src="js/jquery.dataTables.js"></script>
<script>
    $( document ).ready(function() {
        $('#login').submit(function(){
        console.log($(this));
            return false;
        });
        $('#prettyTable').dataTable({
            "aLengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
            "iDisplayLength" : 10,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "listOwners2.php"
        });


    });
</script>

whats really bothering me is I've used datatables before in another assignment, and didn't have any issues like this, as demonstrated here

http://collegedata.pytools.webfactional.com/question9

in this page the navigation links still work.

HOW CAN I GET TO THE SIGN-IN PAGE FOR MY PHP app??

are you sure its datatables thats breaking the nav links? ---- I'm using datatables and theres no issues with links for me. — John Ruddell
– John Ruddell, Commented Mar 30, 2014 at 4:38
You are importing DataTables twice. <script src="js/DataTables.js"></script> <script src="js/jquery.dataTables.js"></script> — bingorabbit
– bingorabbit, Commented Mar 30, 2014 at 6:39

bingorabbit · Accepted Answer · 2014-03-30 06:50:30Z

1

Actually the button should do nothing, as it's not linked to JavaScript event. Change it too:

<a class="btn btn-primary" href="http://pytools.webfactional.com/capstoneTemp/signIn.html">Sign-In..</a>

Adding button styles to HTML anchors is valid in Bootstrap. It will give you the same layout.

Or wrap the HTML anchor with the button not the opposite, but the first approach is more valid!

answered Mar 30, 2014 at 6:50

bingorabbit

6951 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bingorabbit Over a year ago

@Kinghenry14 You are welcome..if it worked for you kindly mark it as the right answer.. :)

Collectives™ on Stack Overflow

jquery datatables breaking links on page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related