jquery - Partial view modal popup is not working at first postback -
i have pop in partial view not working when post back. using jquery ajax , partial view calling when click on user record in table.
here code on click partial view called.
<td><a href="#" class="details" data-id="@item.teamid" data-dialogmodalbind=".dialog_content3"> @html.displayfor(modelitem => item.description)</a> </td>
here code calling partial view
<div id="detailsplace" class="dialog_content3" style="display:none"> </div>
here jquery code
<script type="text/javascript"> $(function () { $('.details').click(function () { var $buttonclicked = $(this); var id = $buttonclicked.attr('data-id'); $.ajax( { url: '@url.action("details","team")', type: "post", datatype: "html", data: { id: id }, success: function (partialview) { //event.preventdefault(); $('#detailsplace').html(partialview); } }); }); }); </script>
here partial view
@model app.viewmodels.viewdetailteam @using app.helpers @{htmlhelpers.getdynamiclabels(model.dynamiclabel);} <div class="dialogmodal_header"> @model.teamdetails.teamname</div> <div class="dialogmodal_content"> <div class="main-content"> <div class="navi-but"> <a href="#"><span class="previous">previous</span></a> <a href="#"><span style="padding-right:7px">next</span><span class="next"></span></a> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="images/settings.png" /> </a> <ul class="dropdown-menu" role="menu"> <li><a href="@url.action("edit", "team", new { id = model.teamdetails.teamid })">edit</a></li> <li><a href="@url.action("delete", "team", new { id = model.teamdetails.teamid })">delete</a></li> </ul> </li> </div><br /><br /> <div style="float:left;margin-top:15px;"> @html.customlabel("lblteam","ct team name:") </div> <div style="margin-top:15px; margin-left:115px;"> @model.teamdetails.teamname </div> <div style="float:left;margin-top:15px;"> @html.customlabel("lbldescription","description:") </div> <div style="margin-top:15px; margin-left:115px;"> @model.teamdetails.description </div> <div style="float:left;margin-top:15px;">@html.customlabel("lblctusercount","user count:") </div> <div style="margin-top:15px; margin-left:115px;"> @model.teamdetails.usercount </div> </div> </div>
controller
public actionresult details(int id) { session[applicationconstants.currentpageid] = 111; flightcoremodel.user loggedinuser = new flightcoremodel.user(); int pageid = convert.toint16(session[applicationconstants.currentpageid]); if (session[applicationconstants.usermodel] != null) { loggedinuser = (flightcoremodel.user)session[applicationconstants.usermodel]; } if (loggedinuser.userid > 0) { viewdetailteam viewdetailteam = new viewdetailteam(flightdbcontext, loggedinuser.userid, pageid); viewdata["detailmodel"] = viewdetailteam; viewdetailteam.retrieve(id); return partialview("_teamdetails", viewdetailteam); //return view(viewdetailteam); } else { return redirecttoaction("signin", "account", new { area = "" }); } }
change javasript below. access html code has been got ajax functions.
$(document).on('click','.details', function () { { var $buttonclicked = $(this); var id = $buttonclicked.attr('data-id'); $.ajax( { url: '@url.action("details","team")', type: "post", datatype: "html", data: { id: id }, success: function (partialview) { //event.preventdefault(); $('#detailsplace').html(partialview); } }); });
Comments
Post a Comment