jquery tab load with dynamic href's

Question

I'm not sure if this has already been answered, but here goes

I have 4 tabs, two of which I load through controller calls; the remainder I'd like to vary the hrefs of and load automatically/on demand.

My problem is that even assigning a fixed href like "www.google.com" is not doing the job of displaying the remote page; and the two tabs with the variable href's are properly being changed to the correct value, like so -

$("#anchor_ID").attr("href", "myURL"+var1)

where anchor_ID is the <a href="..." id="anchor_ID" ....></a>

but, these tabs don't load the content as expected.

Any points to check, what could be going on here? How much more info would you like for me to provide?

Thanks a bunch

Answer 1

I guess jQuery UI Tabs doesn't support loading remote content (in the sense of remote == on different domain) via the simple unobtrusive ajax-style. You need to use an iframe as content of the tab for that.

If you check the tab "Local remote file" you notice that the url points to a file on "local" server. If that doesn't work for you you should post a sample to what "myURL"+var1 really evaluates too.

<div id="tabs">
    <ul>
        <li><a href="#inline">Local local content</a></li>
        <li><a href="#remoteajax">Remote remote Google</a></li>
        <li><a href="localajax.htm">Local remote file</a></li>
    </ul>
    <div id="inline"><p>...</p></div>
    <div id="remoteajax">
        <iframe src="http://www.google.com" width="600px" height="300px">
            <p>Your browser doesn't support/allow iframes</p>
        </iframe>
    </div>
</div>

Check this demo page

http://jsbin.com/uqile