asp.net mvc - Can we dynamically remove a slide from Carousel in MVC through JQuery? -
i using bootstrap carousel.this want achieve: sorry big post, intention provide more info, can me more effectively.
- delete slide(lets 5th slide) , render(make 'active') next slide(6th).
- if slide deleting(5th), last in sequence,then should redirect specific view(there redirect-url property in button ).
- if slide deleting, should redirect other specific view.
the button(from above functionalities called)are residing in same slide, delete , go next slide/view depending on conditions mentioned.
this code carousel:
<div class="row"> <div class="pull-left"> <button class="btn btn-primary" id="btnprevious">@patientforms.previous</button> </div> <div class="pull-right"> <button class="btn btn-primary" id="btnnext">@patientforms.saveandnext</button> </div> <div class="clearfix"></div> </div> } @html.hiddenfor(m=>m.appointmentid) <div id="divpatientformcarousel" class="carousel slide " data-ride="carousel" data-interval="false"> <!-- indicators --> <ol class="carousel-indicators"> @for (int slidecount = 0; slidecount < @formcount; slidecount++) { if (slidecount == 0) { <li data-target="#divpatientformcarousel" data-slide-to="@slidecount" class="active" onclick="setsaveandnext()"></li> } else if (slidecount == formcount - 1) { <li data-target="#divpatientformcarousel" data-slide-to="@slidecount" onclick="setfinish()"></li> } else { <li data-target="#divpatientformcarousel" data-slide-to="@slidecount" onclick="setsaveandnext()"></li> } } </ol>
and how wrapper looks like:
<div class="carousel-inner" role="listbox"> @{int noofforms = 0; string activeclass = string.empty;} @if (model.demographicformdata != null && model.demographicformdata.demographicformid > 0) { <div class="item active" id="@model.demographicformdata.demographicformid"> @html.hidden("formcount", noofforms) <form novalidate method="post" id="frmdemographics+@model.demographicformdata.demographicformid" data-url='@url.action("savedemographicform", "patientforms")' action="#"> <div class="row"> @html.partial("demographicform", model.demographicformdata) </div> <div class="row"> <div class="col-md-12"> <div class="col-md-4"></div> @if (formcount == 1) { <div class="col-md-1"> <button id="btnsavedemographicform" data-navurl="@url.action("index", "patientforms")" class="btn btn-primary">@patientforms.save</button> </div> } <div class="row col-sm-12 col-xs-12 hidden-md visible-sm visible-xs"> <div class="col-sm-1 col-xs-1"> </div> </div> <div class="col-md-1"> <button id="btndemographicformsubmit" data-navurl="@url.action("index", "patientforms")" class="btn btn-primary">@patientforms.submit</button> </div> <div class="row col-sm-12 col-xs-12 hidden-md visible-sm visible-xs"> <div class="col-sm-1 col-xs-1"> </div> </div> <div class="col-md-1"> <button type="reset" id="btnresetdemographicform" class="btn btn-primary">@patientforms.clear</button> </div> </div> </div> </form> <br /> @{ noofforms = 1; } </div> } @if (model.consentforms != null && model.consentforms.any()) { foreach (var consentform in model.consentforms) { activeclass = noofforms == 0 ? "active" : string.empty; <div class="item @activeclass" id="@consentform.consentformid"> @html.hidden("formcount", noofforms) @{html.renderpartial("consentform", consentform);} </div> noofforms++; } @* render required field if don't have intake forms @ *@ if(model.notes == null){ <button class="btn btn-primary hide" data-url="@url.action("requiredformfields", "patientforms", new { patientid = model.patientid, appointmentid = model.appointmentid })" id="btnlastpage">@patientforms.submit</button> } } @if (model.notes != null && model.notes.any()) { foreach (var note in model.notes) { activeclass = noofforms == 0 ? "active" : string.empty; <div class="item @activeclass" id="@note.noteid" > @html.hidden("formcount", noofforms) <div class="text-primary" style="text-align: center;"> <h2>@note.pagename</h2> <hr /> </div> <div class="row " style="overflow-x:auto" > <div class="col-md-10" style="position:relative;"> <form novalidate id="frmintakeform+@note.noteid" method="post" data-url='@url.action("saveforms", "patientforms")' action="#"> @html.hiddenfor(item => note.noteid) @html.hiddenfor(item => note.islastnote) @html.hiddenfor(m => m.patientid) <div class="row col-md-12 col-xs-12 col-sm-12"> @html.partial("pagecontrols", note.notecontrols) @{var maxheight = note.notecontrols.max(x => x.toplocation)+400+"px";} </div> <br /> <div class="row" style="margin-top:@maxheight;position:relative"> <div class="col-md-4"></div> @if (formcount == 1) { <div class="col-md-2"> <button class="btn btn-primary cancel" data-navurl="@url.action("index", "patientforms")" id="btnsave">@patientforms.save</button> </div> } <div class="col-md-2"> <button class="btn btn-primary cancel " data-url="@url.action("submitforms", "patientforms")" data-navurl="@url.action("index", "patientforms")" id="btnsubmit+@note.noteid">@patientforms.submit</button> @if (formcount - 1 == noofforms) { <button class="btn btn-primary hide" data-url="@url.action("requiredformfields", "patientforms", new { patientid = model.patientid, appointmentid = model.appointmentid })" id="btnlastpage">@patientforms.submit</button> } </div> </div> <br /> </form> </div> <div class="col-md-2 pull-right"> @if (viewbag.askquestion != null && viewbag.askquestion) { <button id="btnaskquestion" class="btn btn-primary btn-sm" data-url="@url.action("sendmessage", "messages", new { category = @note.pagename, patientid = @note.patientid, appointmentid = model.appointmentid, index = noofforms })"><i class="fa fa-edit"></i> @message.askaquestion</button> } </div> </div> <hr /> </div> noofforms++; } } </div> <a id="leftchevron" class="left carousel-control hidden-xs hidden-sm hidden-md hidden-lg" style="margin-left:-90px;filter:none" href="#divpatientformcarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a id="rightchevron" class="right carousel-control hidden-xs hidden-sm hidden-md hidden-lg" style="margin-right: -90px; filter: none; " href="#divpatientformcarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
thanks in advance.
Comments
Post a Comment