Search code examples
jqueryasp.net-mvcjquery-uirenderpartial

MVC RenderPartial jQuery problem with selector (ID)

I have this infoflyout.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<script type="text/javascript">
    $(document).ready(function () {
        $("#flyoutdialog").dialog({ autoOpen: false });

        $('#opener').click(function () {
            $("#flyoutdialog").dialog('open');
            return false;
        });
    });
</script>
<a class="flyouticon" href="#">
    <img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" /></a>

<div id="flyoutdialog" title="<%: Model.Title %>">
    <p>
        <%: Model.Message %></p>
</div>

This is supposed to help me with making a form more understandable.

what i want is a questionmark icon behind a formfield. when the user hovers, the dialog with some extra info opens. the jquery of hovering over the thing and opening and closing, i'm sure i can figure out.

I want to call the renderpartial as so:

<% Html.RenderPartial("infoflyout", new {Title="This is the title", Message="You have to fill in a date, dummy!"}); %>

the problem is, how do i give my <a> element an ID. now it has a class, but if i have multiple of these renderpartials in my form, all dialogs will open when i hover over 1 <a>

So can MVC render an ID which i could use? or could i alter the jQuery code to make this work, or shouldnt i use a renderpartial?

EDIT: extra question

The next() doesnt work. this is the JS file now:

$(document).ready(function () {
    $(".flyoutdialog").dialog({ autoOpen: false });

    $('.flyouticon').click(function () { return false });

    $('.flyouticon').hoverIntent({
        over: function () {
            // alert("over");
            alert($(this).attr('class')); //gives me flyouticon
            alert($(this).next(".flyoutdialog").attr('class')); //undefined
            alert($(this).next().html()); //null
            $(this).next(".flyoutdialog").dialog('open'); //no dialog shows.
        },
        timeout: 500,
        out: function () {
            // alert("and out");
            $(this).next(".flyoutdialog").dialog('close');
        }
    });
});

the renderpartial:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<a href="#" class="flyouticon">
    <img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" /></a>
<div class="flyoutdialog" title="<%: Model.Title %>">
    <p>
        <%: Model.Message %></p>
</div>

the HTML

    <div class="editor-label">
        <label for="Postcode">Postcode</label>
    </div>
    <div class="editor-field">
        <input id="postcode" name="postcode" type="text" value="" />
<a href="#" class="flyouticon">
    <img src="/img/help.png" alt="Flyout" width="16" /></a>
<div class="flyoutdialog" title="This is the title">
    <p>

        You have to fill in a date</p>
</div>

    </div>
Solution

  • You can use a class, but render find the flyout you want relatively, like this:

    First, change it to a class as well:

    <div class="flyoutdialog" title="<%: Model.Title %>">

    Then remove all script from the control, and use this in an external JS or in the page, but you only need to include it once:

    $(function () {
  $('.flyouticon').each(function() {
    var dlg = $(this).next(".flyoutdialog");
    $(this).click(function() {
      dlg.dialog('open');
      return false;
    });
  });
  $(".flyoutdialog").dialog({ autoOpen: false });
});

    You can give it a try here.

    Now it's going from the icon you clicked to the .next() sibling class="flyoutdialog", since it's relative you don't need distinct IDs and you can include the script once to work for all instances of the control.

    Note: We have to iterate in an odd way here because calling .dialog() moves the element to the end of the <body> element, so we need to keep a reference to it for each respective anchor.