HTML checkboxes in Tab cause JaveScript runtime error with unhandled exception

HTML checkboxes in Tab cause JaveScript runtime error with unhandled exception

This tab is one of 6, living inside a dialog. Selecting any of these checkboxes causes :

unhandled exception at line 4679, column 2 in jquery-1.8.2.js

0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: Trip:

Note that the unrecognized expression is the name of the check box, in this case "Trip".

Can someone point me towards a solution?

Robert
TIA



  1. <div id="tabs-6">
                    
    <h3>Purchase</h3>
                    
    <p></p>
                   
                    

    <form method="post" action="DetailsDialog.cshtml">
                    
    <table>
                    
    <tr><td>Buy T:</td><td><input type="checkbox" name="trip" value="yes"  /></td></tr>
                    
    <tr><td>Buy Tr:</td><td><input type="checkbox" name="tr" value="yes" /></td></tr>
                    
    <tr><td>Buy In:</td><td><input type="checkbox" name="in" value="yes" /></td></tr>
                    
    <tr><td>Rel:</td><td><input type="checkbox" name="rel" value="yes" /></td></tr>
                    
    </table>
                        
    <div class="message info">
                            
    <p>T Purchase</p>
                            
    <h5>You agree to..
                            
    </h5>
                            
    <p>Release</p>
                            
    <h5>You ag..
                            
    </h5>
                            
    <p>Terms</p>
                            
    <h5>You agree..
                            
    </h5>
                            
    <p></p>
                            
    <h5>By clicking Agree you have accepted these terms.</h5>
                        
    </div>
                            
    <input type="submit" name="action" value="Agree">
                        
                    

    </form>
                    
                    

    </div>
There are two pieces of jquery that are involved in getting to this point

1: to make webgrid rows hover / clickable, open a dialog and load the file TripDetailsDialog

  1. <script type="text/javascript"> $(function () { $('tbody tr').live('hover', function () { $(this).toggleClass('clickable'); }).live('click', function () { $("#tripdialog").load('/Members/TripDetailsDialog/' + $(this).find("td:first").text()).dialog({ autoOpen: true, height: 675, width: 725, hide: "explode" } ); }); }); </script>
2.  the code for the tabs inside TripDetailsDialog

  1. $(function () { $("#tabs").tabs({selected: 2}); setTimeout(function() { initialize(); }, 500); });