[Solved] Displaying a Modal View with Razor

[Stephen]

Hi,

This should be a simple thing to do but I'm obviously missing something obvious.  I am pretty new to MVC and this particular Telerik product so please bear with me.

I am trying to display a modal login dialog when the user clicks on a login button.  This is my current code:

@{
                Html.Telerik().Window()
                .Name("LoginWindow")
                .LoadContentFrom("Index", "Login")
                .Visible(false)
                .Title("Log In")
                .Buttons(buttons => buttons.Close())
                .Width(600)
                .Render();
             }

function showLogin()
        {
            var window = $("#LoginWindow").data("tWindow");
            window.open();
        }

When I click on the button I get a JavaScript error claiming that the object is null or undefined.  Using the debugger I can find an object with the jQuery $("#LoginWindow") but the data method returns no data.  Any ideas on what could be causing this?  If I set Visible to true the window displays as I would expect it to.. 

[Alex Gyoshev]

Hello Stephen,

It sounds like you are requesting a non-partial view (Login/Index). Such views should be placed in an iframe, otherwise another version of jQuery gets loaded on the page (and clears out all data() objects -- thus the error occurs). You can either enter a full URL to the page ("http://example.com/Login/Index") or render the iframe by yourself, like so:

.Content(@<text>
<iframe src="@Url("Index", "Login")" class="t-content-frame" style="width: 100%; height: 100%; border: 0" />
</text>)

Kind regards,
Alex Gyoshev
the Telerik team

[Stephen]

Thanks Alex.  

Using the iFrame fixed my problem with the window not rendering or appearing.  Unfortunately I get another problem now.  When the page which the Window appears on first loads it gets an error stating that Object is undefined on the below statement inside jquery-1.6.4.min.js

D=Object.prototype.toString

I get the same error with jquery 1.7.1 which I believe is unsupported at present.  I can't tell what function it unfortuately, (anonymous in according to the Visual Studio debugger).  This error also occurs in modernizr-1-7.min.js.

If I ignore the errors everything works fine, it is just annoying.  Do you have any ideas?

[Alex Gyoshev]

Hello Stephen,

I'm not sure if that's the cause, but I see that I incorrectly closed the iframe element in my previous post -- something that usually yields very obscure errors in your page. Please try closing it properly (<iframe ...></iframe>) and see how it goes. If that doesn't help, feel free to submit a sample that demonstrates the issue so that we can track it down.

Best wishes,
Alex Gyoshev
the Telerik team

[Stephen]

Hi,

I was closing the iFrame tag correctly.  I have attached an example of the issue occuring, it's probably just something I am missing.  The error occurs inside jQuery 1.6.4.  In my real project the same error also occurs inside Modernizr (1.7) but I haven't included that framework in this example.

Any advice on how to resolve this would be appreciated,

Stephen

[Stephen]

I figured it out.  The answer was in this post here.  The problem was that the View I was loading into the Window also loaded jQuery again.