tags:

views:

130

answers:

1
Q: 

Setting width and height of modal window from JavaScript/JQuery to ASP.NET MVC inline code

This is my HTML ActionLink helper in the view:

<%=Html.ActionLink(Resources.Localize.Routes_WidgetsEdit, "Edit", Model.ContentType.ToString(), 
new {slug = Model.Slug, modal = true}, 
new { 
      rel = "shadowbox;height=_HEIGHT_;width=_WIDTH_", 
      title = Resources.Localize.Routes_WidgetsEdit, 
      @class = "editWidget" 
})%>

It renders out this HTML

<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" rel="shadowbox;height=_HEIGHT_;width=_WIDTH_" title="Edit tab">Edit tab</a>

What I would like to do is insert dynamic values for HEIGHT and WIDTH, in JavaScript I get them like this:

<script type="text/javascript">
var width = $(window).width();
var height = $(window).height();
</script>

Now I need a jQuery selector or command to select the "rel" attribute of all the links on page that are wired up to Shadowbox (see shadowbox value in rel) and if they contain shadowbox and HEIGHT and WIDTH replace those two placeholders with actual values at runtime. The solution should be quite bulletproof.

Hopefully this will be a piece of cake for all you jqueryists out there. ;)

A: 

Not sure how bullet proof it is, but how about something like the following:

<html>
<head>

    <script src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script>
        $(document).ready(function(){
            $("a").each(function()
            {
                if($(this).attr("rel").length > 0)
                {
                    if($(this).attr("rel").indexOf("shadowbox;") >= 0)
                    {
                        $(this).attr("rel", "shadowbox;height=" + $(window).height() + ";width=" + $(window).width());
                    }
                }
            });
        });
    </script>
</head>

<body>

<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" rel="shadowbox;height=_HEIGHT_;width=_WIDTH_" title="Edit tab">Edit tab</a>

<!-- don't set this one -->
<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" title="Edit tab">Edit tab</a>

<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" rel="shadowbox;height=_HEIGHT_;width=_WIDTH_" title="Edit tab">Edit tab</a>

</body>

</html>
Brandon Boone  2010-08-03 01:27:04
Perfect. By bullletproof I meant it won't pick up other links that don't have rel="shadowbox" set 99% of time. I guees your solution should work 100% of time.
mare  2010-08-03 11:55:38
Great! Glad I could help.
Brandon Boone  2010-08-03 15:15:10

related questions

What's the best way to implement field validation using ASP.NET MVC?
How do I handle page flow in MVC (particularly asp.net)
Entity diagrams in ASP.NET MVC
How do I get rid of Home in ASP.Net MVC?
Can I generate ASP.NET MVC routes from a Sitemap?
ASP.NET Model-view-controller (MVC) - where do I start from?
user controls and asp.net mvc
ASP.Net MVC route mapping
RSS Feeds in ASP.NET MVC
Open Source Licensing Options for ASP.NET MVC Application?
Does the OutputCacheFilter in the Microsoft MVC Preview 4 actually save on action invocations?
MVC Learning Resources
Validating posted form data in the ASP.NET MVC framework
Best mock framework that can do both WebForms and MVC?
Use the routing engine for form submissions in ASP.NET MVC Preview 4
How do you get a custom id to render using HtmlHelper in MVC
MVC Preview 4 - No route in the route table matches the supplied values.
Is there a way to include a fragment identifier when using Asp.Net MVC ActionLink, RedirectToAction, etc. ?
In ASP.NET MVC I encounter an incorrect type error when rendering a user control with the correct typed object
ASP.NET MVC - Is it worth it yet?
Multiple languages in an ASP.NET MVC application?
Is it better to create Model classes, or just stick with generic database utility class?
ASP.NET MVC Without Visual Studio
ASP.NET MVC "CRUD" Database Sample
How to RedirectToAction in ASP.NET MVC without losing request data