ansaurus

Question

MVC RenderPartial jQuery problem with selector (ID).

Answer 1

+2 A:

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.

Nick Craver 2010-09-15 10:41:52

i was waiting for you to post the sollution here :D

Stefanvds 2010-09-15 10:56:25

Nick, i cant get your 'next' to work. it just doesnt select anything. check my updated code.

Stefanvds 2010-09-15 11:51:16

@Stefanvds - It's because `.dialog()` moves the element making this a bit trickier, check the updated answer :)

Nick Craver 2010-09-15 12:07:35

should have checked the HTML after the jquery kicked in. thanks. this does work :)

Stefanvds 2010-09-15 12:43:28

Answer 2

+1 A:

Hello, I think I understand your problem.

Would this help : Html Markup

<div class="someCssClass">
    <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>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $("#flyoutdialog").dialog({ autoOpen: false });

        $(".flyouticon").click(function(e){
            $(this).parent().children("#flyoutdialog").dialog('open');
            e.preventDefault();
        });
    });
</script>

James 2010-09-15 10:45:49

IDs have to be unique, this would repeat the `#flyoutdialog` for every instance of the control. Also `.siblings()` is much easier than `.parent().children()` :)

Nick Craver 2010-09-15 10:47:27

Cheers Nick, I'll keep the .siblings() in mind! - Every day's a school day!

James 2010-09-15 10:52:01

thanks for your answer

Stefanvds 2010-09-15 10:57:27

Answer 3

A:

If you want to set the href id inside the usercontrol, there is a overload for Html.RenderPartial which accepts the ViewDataDictionary , which is nothing but ViewData, which you can pass to the infoflyout.ascx and then set the id for the href as :

<a class="flyouticon" href="#" id='<%=ViewData["HrefId"]%>'>

Siva Gopal 2010-09-15 10:50:06

i know i can set an id manually but that was not what i wanted...

Stefanvds 2010-09-15 10:57:02

ansaurus

tags:

views:

answers:

MVC RenderPartial jQuery problem with selector (ID).

related questions