I have strange problem with an MVC3 application. The application works as expected on Firefox and Chrome but not IE.
I have a partial view that is repeated in a loop on a page. At the bottom of the partial view I am doing a check on Request.IsAuthenticated. If authenticated an ajax form should display. This works on all browsers but IE. In IE if there is more than one instance of the partial view rendered the form does not appear (even when the user is logged in).
I have attached the partial view code below. The form is right at the bottom.
Has anyone else had a similar problem? Any help or thoughts would be great. Thank you
@using HERE_MVC.Extenstions
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
@model HERE_MVC.Models.TilesModel
@{
Layout = String.Empty;
}
@foreach (var t in Model.NearestTiles)
{
<div id="div_tile @t.TileId" style="float: left; height: 235px; width: 300px; border: 0px solid black; margin: 5px;
background-color: #DDDDDD;">
<div id="tile @t.TileId" style="background-image: url(@Url.Action("GetTileBgImageWithCache", "Account", new { userName = @t.aspnet_Users.UserName })); background-repeat:no-repeat; height: 200px; width: 300px; border: 0px solid black;">
@t.aspnet_Users.UserName
<br />
@t.Title
<br />
@t.Quote1
<br />
@t.UpdatedDateTime
</div>
<div id="collectbtn @t.TileId" style="padding-top: 5px;">
@Html.ActionImage("Profile", "Home", new { userName = @t.aspnet_Users.UserName }, "~/content/img/Profile-Icon.jpg", "View Profile", "25")
@if (Request.IsAuthenticated)
{
if (@User.Identity.Name == @t.aspnet_Users.UserName)
{
}
else if (!Model.CheckAlreadyFollowing(@User.Identity.Name, @t.aspnet_Users.UserName))
{
@Ajax.ActionImageLink("../content/img/add.jpg", "Collect Tile", "25", "imgOn1" + @t.aspnet_Users.UserName, "AddFollowedUser", "Home", new { userToFollowName = @t.aspnet_Users.UserName }, new AjaxOptions { HttpMethod = "POST", OnSuccess = " $(#imgOn1" + @t.aspnet_Users.UserName + ").hide();" })
}
else
{
@Ajax.ActionImageLink("../content/img/minus.jpg", "Drop Tile", "25", "imgOff2" + @t.aspnet_Users.UserName, "UnFollow", "Home", new { userToUnFollowName = @t.aspnet_Users.UserName }, new AjaxOptions { HttpMethod = "POST" })
}
}
<a href="http://www.facebook.com/sharer.php?u=@t.ShareLink&t=%22+encodeURIComponent(document.title)" onclick="PopupCenter('http://www.facebook.com/sharer.php?u=@t.ShareLink&t=%22+encodeURIComponent(document.title)', 'NearRoar - Facebook',680,400); return false;" class="pin-it-button" count-layout="none">
<img src="../../Content/img/Facebook-share.jpg" width="25px" alt="Facebook share" /></a>
<a href="http://pinterest.com/pin/create/button/?url=@t.ShareLink&media=@t.PintrestShareImage&description=@t.PinterestShareText" onclick="PopupCenter('http://pinterest.com/pin/create/button/?url=@t.ShareLink&media=@t.PintrestShareImage&description=@t.PinterestShareText', 'NearRoar - Pin It',600,400); return false;" class="pin-it-button" count-layout="none" target="_blank">
<img border="0" src="../../Content/img/pintrest.jpg" title="Pin It" width="25px" /></a>
<a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="@t.TwitterHashTag,NearRoar" data-url="@t.ShareLink" data-count="none" data-lang="en">
</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="msg_list">
<p class="msg_head @t.TileId">
Comments (<span id='commentCount '@t.TileId>@t.CommentLines.Count</span>)</p>
<div class="msg_body">
@foreach (var c in t.CommentLines)
{
<div class="clearfix">
<div class="msg_body_comment_item_image">
<img width="50" src="@Url.Action("GetImageWithCache", "Home", new { userName = @c.aspnet_Users.UserName })"/>
</div>
<div class="msg_body_comment_item_text">
@c.CommentLine1
<br />
@c.CommentTime
</div>
</div>
}
<div id="newComment @t.TileId">
</div>
<div id="formdiv @t.TileId">
@if (Request.IsAuthenticated)
{
<div>
@using (Ajax.BeginForm("Comment" + @t.TileId, "Home", new { tileId = @t.TileId }, new AjaxOptions { }, new { id = "form" + @t.TileId, name = "form" + @t.TileId }))
{
<fieldset>
@Html.TextBox("commentText " + @t.TileId, null, new { @class = "msg_body_comment_text_input", maxlength = 200 })
<input type="hidden" name="date" id="cmTimeHidden @t.TileId" value="" />
<input type="hidden" name="commentText" id="commentTextHidden @t.TileId" value="" />
<input type="submit" value="Post Comment" onClick="setHiddens(@t.TileId);setNewComment(@t.TileId);"/>
</fieldset>
}
</div>
}
</div>
</div>
</div>
</div>
}
I would double check that rendered markup is valid. It’s possible that one of your IDs is duplicated and that IE is just kicking it away.
UPDATE: You have 4 elements with ID t.titleId. As I said above, you can have only one specific ID on the HTML page. Move this to class instead and all should be fine.