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开发者_StackOverflow中文版').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>
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.
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>
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"]%>'>
加载中,请稍侯......
精彩评论