Directory Listing randomly shows up in a jQuery UI tabs inside a Dialog

Question

I want to display a jQuery UI tabs inside a Dialog but it shows up Directory Listing of my asp.net app for no reason. It also changes the css of my page. What's going on here?

Javascript:

$("#editAddress").click(function () {
        var personId = window.location.search.slice(1).split('=')[1];
        //Use Get API to fill the form:
        $.getJSON('/ipad/api/Address/' + personId, function (data) {
            var tabs = $('#tabs');
            $("#dialogAddress").empty().append(tabs);
            $("#dialogAddress").dialog("open");
            tabs.show();
            tabs.tabs();
        });    
    });

HTML:

<div id="tabs" style="display:none">      
      <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
      </ul>
      <div id="tabs-1">
        <fieldset>
        <label for="address1">
            Address1:</label>
            <input type="text" name="address1" id="address1" value="" />
        <label for="city">
            City:</label>
            <input type="text" name="city" id="city" value="" />
        <label for="country">
            Country:</label>
             <input type="text" name="country" id="country" value="" />
        </fieldset>
      </div>
</div>

Answer 1

This can probably be solved by setting the hyperlinks href in code-behind. I have such problem when I use ASCX (User Controls).

I got my solution from here: asp.net user control, getting htmlAnchor resolve to href="#"

Hope this helps.