javascript - Submit button not posting on modal -
i have form on bootstrap modal 2 buttons. form tied action named "deletewidgetconfirmed" trying remove widget database , front end, panel gets removed front end not seem removed database.
here modal
<div class="modal fade" id="deletewidgetmodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">delete widget?</h4><!--add depending on panel have clicked--> </div> <div class="modal-body" id="mymodalbody"> <!--depending on panel insert content--> @using (html.beginform("deletewidgetconfirmed", "dashboard", formmethod.post)) { @html.antiforgerytoken() <div class="form-horizontal"> wish delete widget? <div class="form-group"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> <button type="submit" value="deletewidgetconfirmed" class="btn btn-danger btn-ok" id="delete-widget">delete</button> </div> </div> </div> } </div> </div> </div>
here action:
// post: dashboardmodels/delete/5 [httppost] [validateantiforgerytoken] public actionresult deletewidgetconfirmed(int? id) { if(id == null) { return new httpstatuscoderesult(httpstatuscode.badrequest); } dashboardmodel dashboardmodel = db.dashboards.find(id); db.dashboards.remove(dashboardmodel); db.savechanges(); return new emptyresult(); }
from javascript id panel , store variable, action attribute form , append id action attribute.
$(document).ready(function () { $('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) { var panel = this; //get id here //toggle modal $('#deletewidgetmodal').modal('show'); var widgetid = $(this).closest('.panel.panel-default').attr('data-widgetid'); document.getelementbyid('delete-widget').onclick = function (event) { event.stoppropagation(); //we make ajax call controller on click $.ajax({ url: '@html.raw(url.action("dashboard", "deletewidgetconfirmed"))', data: { id: widgetid}, type: 'post', datatype: 'json', contenttype: 'application/json; charset=utf-8', success: function(data){ var parentelement = $(panel).closest(".col-md-4.column"); var targetelement = $(panel).closest(".panel.panel-default"); targetelement.remove(); //parentelement.addclass("expand-panel"); checkemptypanelcontainers(); $('#deletewidgetmodal').modal('hide'); }, error: function (response) { } }) } })
});
i have hunch maybe within javascript have overridden default behaviour of event.
what want achieve
- within onclick event button remove panels(which works)
- remove entry within database related panel.
- when executing post method not refresh.
try using ajax asynchronously post controller:
$(document).ready(function () { $('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) { var panel = this; //get id here //toggle modal $('#deletewidgetmodal').modal('toggle'); var widgetid = $(this).closest('.panel.panel-default').attr('data-widgetid'); $.ajax({ url: '/dashboard/deletewidgetconfirmed/', type: 'post', data: { id: widgetid }, datatype: 'json', contenttype: 'application/json; charset=utf-8', error: function (xhr) { // request failed, handle here! }, success: function (result) { // request succeeded! handle here. close modal? remove item ui? } }); } }); });
how handle success callback depends on ui, can use data- attributes quite easily.
you need decorate action method post if this:
[httppost] public actionresult deletewidgetconfirmed(int id) { ... }
Comments
Post a Comment