Trying to implement jQuery tabs in .NET Web Application

Question

I am attempting to implement this simple example. However, the Javascript isn't working (all the content is showing at all times, no tab 'switching' is occurring). All the JS files are hosted locally.

In my head content placeholder:

<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
    // not working
    $(document).ready(function () {
        $("#tabs").tabs();
    });
</script>

In my main body content placeholder:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">One</a></li>
    <li><a href="#tabs-2">Dos</a></li>
    <li><a href="#tabs-3">Drei</a></li>
  </ul>
  <div id="tabs-1">
    <p>Blah blah blah.</p>
    </div>
  <div id="tabs-2">
    <p>Blah some more.</p>
  </div>
  <div id="tabs-3">
    <p>Blah again.</p>
  </div>
</div>

So far from searching SO and wherever else Google has taken me, this is what I've found and tried (with results for each listed):

Wrap the jQuery code in $(document).ready(function () { // code here }); rather than a simple function ($(function() { $( "#tabs" ).tabs(); });). It doesn't work either way.
Instead of $("#tabs").tabs();, use $("#<%= tabs.ClientID %>").tabs(); so that .NET can get the ID of the html element. In addition to not working, this also produces the error: tabs does not exist in the current context.
Place the JavaScript in the same content placeholder as the #tabs div tags. Still doesn't work.
Add runat="server" to the #tabs div tag. Still doesn't work.
Delete the designer file, then right click on the aspx file and select "Convert to Web Application". This doesn't work because this is already a web application and there is no designer file.

I can't figure out what else to do to make it work.

UPDATE: I was asked to view my browser console logs and found the following:

One of the JS files is giving a HTTP/1.1 401 Unauthorized error. I noticed it was blocked and I unblocked it from the file system, but it still isn't working.

Only if you have runat="server" on the tags would you need to do $("#<%= tabs.ClientID %>").tabs();. — mason
– mason, Commented Feb 18, 2014 at 16:03
Your Javascript works - see Fiddle . I would suggest checking that all of the JS is loading correctly in the network tab in the browser. Also check the ID of the DIV hasn't been changed if you're using Web Forms. — DAC84
– DAC84, Commented Feb 18, 2014 at 16:08
@DAC84 there are some 404's for missing png files, but these should have no impact on the JS. The JS code just has 304's (content not modified), which is normal. — Dan
– Dan, Commented Feb 18, 2014 at 16:11
@DAC84 hmm there are some 401 unauthorized errors for the JS files in the JS browser console log. — Dan
– Dan, Commented Feb 18, 2014 at 16:13

user2886551 · Accepted Answer · 2014-02-18 16:17:49Z

1

I think problem could be in path to the jquery scripts.

Try to check loading of resources in browser console, or you can try to include jquery from jquery server...

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

answered Feb 18, 2014 at 16:17

user2886551

1122 bronze badges

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

2 Comments

Dan Over a year ago

I've hosted all of the JS locally.

Dan Over a year ago

For whatever reason, this wasn't working locally, loading them from their works. Thanks.

Collectives™ on Stack Overflow

Trying to implement jQuery tabs in .NET Web Application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related