[Solved] jQuery On Tab

[David]

Being new to MVC, I have a question about javascript.
I have a tab control. The tab in question is not loaded when the page first loads.
It uses a jQuery plugin to display pictures, which are loaded into a "LightBox" upon clicking a link.

In the Webforms world, I used the following 2 lines of code to achieve that:
        RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
        manager.ResponseScripts.Add("$(\"a.lib\").fancybox({ 'transitionIdn': 'fade','transitionOut': 'fade' });");

I cannot figure out what I need to do in MVC. So far, I have added the following code at the foot of the partial control which is being loaded for the tab in question:

@section scripts {
    <script type="text/javascript">
        (function AttachFancyBoxAnimations() {
            $(a.lib).fancybox({ 'transitionIdn': 'fade', 'transitionOut': 'fade' });
        } ())
    </script>
}

When I use fiddler and firebug, there's no sign of that javascript at all.
Can anyone please shed a light?

Cheers

[David]

I will get my colleague to submit a ticket.

[Georgi Tunev]

Hi David,

Generally speaking, there is no direct analogy to this (manager that controls all Ajax requests) in MVC. To be able to provide you with an appropriate solution, we will need to get a better view over your exact setup and logic. Please attach a sample project that reproduces the case and we will check it.


Best wishes,
Georgi Tunev
the Telerik team

[David]

Hi Georgi,

You can download the project with this link.

In the site, on each of the inner tabs of the Applications tab (BooLender2.cshtml and ColorHexGrabber.cshtml) there are some hyperlinks which throw up LightBoxes of photos when clicked upon. The code to attach the jQuery plugin to those tabs can be found in Behaviours.js. I am not having any luck attaching the behaviour to those links.

Cheers

[Georgi Tunev]

Hi David,

Thank you for the project.
Part of the problem that I see in that project is that the scripts were not loaded properly - I removed the first ScriptRegistrar declaration and added the script in the second one, at the end of the master view

@(Html.Telerik().ScriptRegistrar().jQuery(false)
    .DefaultGroup(group => group
        .Add("jquery-1.4.4.js")
        .Add("jquery.fancybox-1.3.1.js")
        //.Add("Behaviours.js")
        .Combined(false).Compress(false)))

Next, to call the JS when the tab is loaded, you could use a simple document ready function, in the partial veiw:

$(document).ready(function () {
    $("a.lib").fancybox({ 'transitionIdn': 'fade', 'transitionOut': 'fade' });

});

I modified the project and attached it back - I hope this helps. You might also need to set the fancybox plugin properly - I see that it does not calculate its position correctly and it doesn't make requests for the images (e.g. loading, etc.), so you will need to configure the CSS as well.

Kind regards,
Georgi Tunev
the Telerik team

[David]

Thanks Georgi,

That worked perfectly!