model view controller - jquery not firing from modal -
the issue: form not submit.
(inside index sits directly inside layout)
<!-- modal --> <div id="modalcategory" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"></h4> </div> <form class="form-horizontal" id="frmcategory" name="frmcategory"> <div class="modal-body"> <div class="form-group"> <label class="control-label col-lg-4">category name</label> <input type="text" class="form-control" id="txtname" required /> </div> <div class="form-group"> <label class="control-label col-lg-4">category description</label> <textarea class="form-control" id="txtdescription" cols="22"></textarea> </div> </div> <div class="modal-footer"> <input type="submit" id="categorysubmit" class="btn btn-info" data-dismiss="modal" value="ok" /> </div> </form> </div> </div> </div> @section scripts{ <script type="text/javascript" src="~/viewscripts/admin/storeadmin.js"></script> }
updated js based on suggestions:
$("body").on("submit", "#frmcategory", function () { //do stuff here alert('foo1'); }); $("#modalcategory").on("submit", "#frmcategory", function () { alert("foo2"); }); $(function () { loadactivetab(); function loadactivetab() { var activetab = $("#storenav > li[class='active'] > a"); loadtabdata(activetab); } function loadtabdata(container) { var hrefval = $(container).attr("href"); var $detaildiv = $(hrefval); var url = $(container).data('url'); $detaildiv.empty(); $.get(url, function (data) { $detaildiv.append(data); }); } $(".btnstoreadmin").on("click", function (evt) { loadtabdata(this) }); //product categories $("#btnaddnew").on("click", function () { clearmodal(); $(".modal-title").append("<div class='h3'>add product category</div>"); }); function clearmodal() { $(".modal-title").empty(); $('#frmcategory')[0].reset(); } function buildmodal(modalid) { } $("#frmcategory").submit(function () { var data = { name: $("#txtname").val(), description: $("txtdescription").val() }; $.ajax({ url: '/admin/addproductcategory', type: "post", data: data, success: function (data, textstatus, jqxhr) { clearmodal(); $("#modalcategory").toggle(); }, error: function (jqxhr, textstatus, errorthrown) { } }); }); $("body").on("submit", "#frmcategory", function () { //do stuff here alert('foo3'); }); $("#modalcategory").on("submit", "#frmcategory", function () { alert("foo4"); }); });
things i've tried
- moving modal partial index page hosts partial
- $("#frmcategory").on("submit", function()(){});
- $("#categorysubmit").on("click", function()(){});
- $(document).on("submit", "#frmcategory", function(){});
- all variations inside , outside ready function
- moved jquery bundles bottom top of page.
- used both name, id , both attributes on form
thanks
remove data-dismiss="modal" submit button , catch event this
$('body').on('submit', '#frmcategory',function () { //do stuff here });
Comments
Post a Comment