locked
More Flexible Jquery dialog RRS feed

  • Question

  • User-1641868886 posted

    I have the following function to create a popupForm to "AddOrEdit" an item for a dataTable:

    function PopupForm_Add_Edit(url) {
                var formDiv = $('<div/>');
                $.get(url)
                    .done(function (response) {
                        formDiv.html(response);
                        Popup = formDiv.dialog({
                            autoOpen: true,
                            resizable: false,
                            title: 'Add/Edit Record',
                            height: 600,
                            width: 700,
                            close: function () {
                                Popup.dialog('destroy').remove();
                            }
    
                        });
    
                    });
            }

    My problem is that I have loaded the popup with two additional popups to "CreateNew" of two other parameters, "sku" and "Vend_Id". My issue is that when the form is changed (user goes back and enters a different "sku" or uses the popup to create a new "sku" or "Vend_Id") then completes and submits the form, it adds the record, but the "success" function does not invoke (close the form, show "notify" message).

    Here is the submit, which filters the array:

    function SubmitPopupForm_Add_Edit(form) {
                $.validator.unobtrusive.parse(form);
                var Vend_Id = $("#Vend_Id :selected").val()
                var Whol_Id = $("#Whol_Id :selected").val()
                if ($(form).valid()) {
    
                    $.ajax({
                        type: "POST",
                        url: form.action,
                        data: $(form).serializeArray().filter(function (r) {
                            return ["UserName", "Sku", "Vend_Id", "Cashier", "DateOfSale", "Price", "NetPrice", "Whol_Id"].indexOf(r.value) < 0
                        }),
                        dataType: "json",
                        success: function (data) {
                            
                            if (data.success) {
                                Popup.dialog('close');
                                dataTable.ajax.reload();
                                $.notify(data.message, {
                                    globalPosition: "top center",
                                    className: "success"
                                })
    
                            }
                        }
    
                    });
                }
                return false;
            }

    The form has a built-in "Reset" button but using it does not seem to FULLY reset, that is re-initialize the form. For now, I need to close and open it again.

    Is there a simple command I can use either on the "Reset" button tag or in the "Submit" function that will persist execution THROUGH the "success" function? My true goal is to NOT have to use "Reset" but have the form execute normally, including the "success" function, even when the user either makes a pre-submit change, or uses one of the "Create" buttons inside the popup.

    One other factor: when the user inputs the "sku" there is a "Confirm" button that displays the "Description" for the sku. If they change the "sku" and then re-use the "Confirm" button, this is the main cause of the above-referenced problem of "success" not invoking. Here is the "Confirm" function for the "sku":

    $("#Confirm").click(function () {
            $.validator.unobtrusive.parse("#Sku");
            var CurrSku = $("#Sku").val();
            if (CurrSku.length === 0) {
                $("#Sku_Validation_Msg").html("Enter a valid Sku");
            }
            else {
                $.ajax({
                    type: "Get",
                    url: "/GrocBills/GetSkuDetails",
                    data: { Sku: CurrSku },
                    dataType: "json",
                    success: function (response) {
                        $("#Description").html(response);
                        $("#Sku_Validation_Msg").hide();
                    },
                    error: function () {
                        $("#Description").empty();
                        $("#Sku_Validation_Msg").html("Sku does not exist");
                        $("#Sku_Validation_Msg").fadeOut(4000, function () {
                            $("#Sku_Validation_Msg").val('');
                        });                                         
                    }
                });
            }
        })

    Perhaps this "error: function()" needs to have something added to reset the "sku" textbox, and clear both the "Description" AND the "Sku_Validation_Msg" ... or perhaps the existing error function should be simplified? Currently, I'm getting most of what I want here, but it seems like convoluted commands.

    Thanks for any ideas.

    Thursday, March 12, 2020 3:37 PM

Answers

  • User288213138 posted

    Hi ReidLMeLSam,

    The problem appears AFTER using this function to execute the "Vendors/AddOrEdit" post method, when you return and resume using the primary form and click "SubmitPopupForm_Add_Edit" which executes "GrocBills/AddOrEdit" and then THAT function's "success" function fails.

    Is there any error message in the console when the success method fails?

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 27, 2020 2:50 AM

All replies

  • User288213138 posted

    Hi ReisMelSam,

    My problem is that I have loaded the popup with two additional popups to "CreateNew" of two other parameters, "sku" and "Vend_Id". My issue is that when the form is changed (user goes back and enters a different "sku" or uses the popup to create a new "sku" or "Vend_Id") then completes and submits the form, it adds the record, but the "success" function does not invoke (close the form, show "notify" message).

    The form has a built-in "Reset" button but using it does not seem to FULLY reset, that is re-initialize the form. For now, I need to close and open it again.

    Is there a simple command I can use either on the "Reset" button tag or in the "Submit" function that will persist execution THROUGH the "success" function? My true goal is to NOT have to use "Reset" but have the form execute normally, including the "success" function, even when the user either makes a pre-submit change, or uses one of the "Create" buttons inside the popup.

    One other factor: when the user inputs the "sku" there is a "Confirm" button that displays the "Description" for the sku. If they change the "sku" and then re-use the "Confirm" button, this is the main cause of the above-referenced problem of "success" not invoking. Here is the "Confirm" function for the "sku":

    According to your description, I cannot understand your question.

    I want to understand your problem by running your code, but your code is not complete, so please post more details information about your requirement and code.

    Best regards,

    Sam

    Friday, March 13, 2020 7:36 AM
  • User-1641868886 posted

    The only thing missing from here are "@Html" helper tags from the razor view. I can provide if nec'y, but what I really need someone to help with: when I call a Popup function and then I call a SECOND popup function from inside the first one, it is causing the "success" function of the original popup "Submit" to NOT invoke. Here is the secondary popup submit, called "SubmitPopupForm_1":

    function SubmitPopupForm_1(form) {
            $.validator.unobtrusive.parse(form);
    
            if ($(form).valid()) {
                $.ajax({
                    type: "POST",
                    url: form.action,
                    data: $(form).serialize(),
                    success: function (data) {
                        if (data.success) {
                            Popup.dialog('close');
                            $("#PopupForm_Add_Edit").reload();
                            $("#Vend_Id").append(
                                $("<option></option>")
                                    .val($("#VendorName").html())
                                    .html($("#VendorName").val())
                                    .prop("selected", true));
    
                            $.notify(data.message, {
                                globalPosition: "top center",
                                width: 300,
                                className: "success"
                            })
    
                        }
                    }
    
                });
            }
            return false;
        }

    You can see from the javascript here that I am attempting to 1) return to the primary popup, "PopupForm_Add_Edit" after creating a new "Vendor" (Vend_Id, VendorName) in the secondary popup "PopupForm_1", then 2) append the "Vend_Id" ddl with the newly created choice, then 3) make the new choice the selected option in the ddl, then 4) show a "notify" message on the screen that the new choice was successfully "created", and finally 5) continue with the "PopupForm_Add_Edit" and then submit. 

    The problem is that if I use the secondary popup and submit it, I get the new choice, it appends the list, it shows the new value as chosen in the ddl, but when I click "Submit" for the "SubmitPopupForm_Add_Edit" the success function does not invoke...the "Add_Edit" popup (primary popup) does not close, and its "notify" does not invoke. (Maybe the "notify" in the second popup is interfering with the "notify" in the first popup?)

    Something in the way I have written this, or the "SubmitPopupForm_1" or both is not correct.  Something needs to "tell" the primary popup "Add_Edit" to accept the change from "PopupForm_1" (which it does) but to allow the "SubmitPopupForm_1" to operate normally through the success function.

    Thanks for any suggestions.

    RC

    Monday, March 16, 2020 10:30 PM
  • User288213138 posted

    Hi RedmeLSam,

    The only thing missing from here are "@Html" helper tags from the razor view. I can provide if nec'y

    I can't tell where your problem is from your code, so I need this code.

    You can see from the javascript here that I am attempting to 1) return to the primary popup, "PopupForm_Add_Edit" after creating a new "Vendor" (Vend_Id, VendorName) in the secondary popup "PopupForm_1", then 2) append the "Vend_Id" ddl with the newly created choice, then 3) make the new choice the selected option in the ddl, then 4) show a "notify" message on the screen that the new choice was successfully "created", and finally 5) continue with the "PopupForm_Add_Edit" and then submit. 

    The problem is that if I use the secondary popup and submit it, I get the new choice, it appends the list, it shows the new value as chosen in the ddl, but when I click "Submit" for the "SubmitPopupForm_Add_Edit" the success function does not invoke...the "Add_Edit" popup (primary popup) does not close, and its "notify" does not invoke. (Maybe the "notify" in the second popup is interfering with the "notify" in the first popup?)

    Something in the way I have written this, or the "SubmitPopupForm_1" or both is not correct.  Something needs to "tell" the primary popup "Add_Edit" to accept the change from "PopupForm_1" (which it does) but to allow the "SubmitPopupForm_1" to operate normally through the success function.

    Have you tried setting breakpoints and then debugging your code to find where the problem is?

    Best regards,

    Sam

    Tuesday, March 17, 2020 6:58 AM
  • User-1641868886 posted

    Okay, here is razor code for the secondary (PopupForm_1) dialog. I have deleted some formatting divs and validator helpers to save clutter:

    @using (Html.BeginForm("AddOrEdit", "Vendors", FormMethod.Post, new { onsubmit = "return SubmitPopupForm_1(this)" }))
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            
            @Html.HiddenFor(model => model.Vend_Id)
            <div class="form-group">
                
                    @Html.LabelFor(model => model.VendorName, htmlAttributes: new { @class = "control-label col-md-2" })
                    @Html.EditorFor(model => model.VendorName, new { htmlAttributes = new { @class = "form-control" } })
                    
                
            </div>
    
            <div class="form-group">
                
                <div class="col-md-10">
    @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> <div class="col-md-10"> @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" }) @if (ViewBag.StatesList != null) { @Html.DropDownListFor(m => m.State, ViewBag.StatesList as SelectList, "- - Select State - -", new { @class = "form-control" }) } </div> </div> <div class="form-group"> @Html.LabelFor(model => model.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input id="Vend_Send" type="submit" value="Save" onclick="SubmitPopupForm_1" class="btn btn-default" /> </div> </div> </div> }

    ...and here is the razor code for the primary (PopupForm_Add_Edit) dialog which creates a new record for the base dataTable:

    @using (Html.BeginForm("AddOrEdit", "GrocBills", FormMethod.Post, new { onsubmit = "return SubmitPopupForm_Add_Edit(this)" }))
    {
        
        @Html.HiddenFor(m => m.Groc_Id)
    
        <div>
            <div class="form-group">
                    @Html.LabelFor(model => model.Sku, htmlAttributes: new { @class = "control-label col-md-2" })
                    @Html.EditorFor(m => m.Sku, "- -Enter your Sku- -", new { htmlattributes = new { @class = "form-control", @style = "max-width:150px" } })
                    <input type="button" id="Confirm" class="btn btn-success" style="margin-left:20px" value="Confirm" />
                    
                    
                        <p>@Html.DisplayFor(m => m.Description)</p>
                            
                
                
                    <span style="padding-right:55px" class="lead">Click to Create Sku:</span>  <a id="SkuAddLink" class="btn btn-warning" onclick="PopupForm_2('@Url.Action("CreateSku", "GrocBills")')"><i class="fa fa-plus"></i> Create Sku</a>
                
             </div>   
            
                    <div class="inline-flex">
    @Html.LabelFor(model => model.VendorName, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.DropDownList("Vend_Id", new SelectList(string.Empty, "Value", "Text"), "- - Select Vendor - -", new { @class = "form-control" }) <a class="btn btn-warning" style="right:30px; " onclick="PopupForm_1('@Url.Action("AddOrEdit", "Vendors")')" id="VendAddLink"><i class="fa fa-plus"></i> Add New Vendor</a> </div> </div> <div style="; top: 15px; right:30px; font-size: 14px; font-family:'Microsoft YaHei'; font-weight: normal"><p style="color:#f12828">** USE THIS PANEL TO SELECT<br />YOUR VENDOR OR USE THE<br />BUTTON TO CREATE A NEW ONE:</p></div> </div> <div class="form-group"> @Html.LabelFor(model => model.Cashier, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(m => m.Cashier, new { htmlattributes = new { @class = "form-control" } }) </div> <div class="form-group"> @Html.LabelFor(model => model.DateOfSale, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(m => m.DateOfSale, new { htmlattributes = new { @class = "form-control" } }) </div> <div class="form-group"> <div class="input-group">
    @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" }) <span class="input-group-addon">$</span> @Html.EditorFor(m => m.Price, new { htmlattributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> <div class="input-group">
    @Html.LabelFor(model => model.NetPrice, htmlAttributes: new { @class = "control-label col-md-2" }) <span class="input-group-addon">$</span> @Html.EditorFor(m => m.NetPrice, new { htmlattributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Wholesaler, htmlAttributes: new { @class = "control-label col-md-2" }) @if (ViewBag.Whol_List != null) { @Html.DropDownListFor(m => m.Whol_Id, ViewBag.Whol_List as SelectList, "- - Select Wholesaler - -", new { @class = "form-control" }) } </div> </div> <div class="form-group"> <input id="AddEditSend" type="submit" value="Submit" class="btn btn-primary" style="margin-right:40px" /> <input type="reset" value="Reset" class="btn btn-warning" /> </div> }

    UPDATE:  I altered the "success" function of "PopupForm_1" submit (shown below, "SubmitPopupForm_1") to remove the commands to append the "Vend_Id" ddl and also remove the "notify", and simply call a "location.reload" when this dialog is closed, I am in effect starting the primary form "PopupForm_Add_Edit" fresh, so then it operates normally. But what I am obviously trying to get to is to return to the primary form and have it accept the append and then submit and invoke the entire "success" function, including 1) close popup, 2) show "notify" message on screen, and 3) re-load the dataTable of the "Index" view with the new "AddOrEdit" form result added.

    Thanks again for looking.

    RC

    Tuesday, March 17, 2020 4:26 PM
  • User288213138 posted

    Hi reidMeSam,

    Thank you for the detailed explanation, but I am still a bit confused.

    Is your problem that the success method of ajax is not triggered?

    If so, you can use the F12 to set breakpoint to the success method to see if it has entered the if method.

    And what is the data returned by your action? json or html, or something else? 

    If the returned is html, please change the dataType to html, if not, then please show me your action code.

    Best regards,

    Sam

    Wednesday, March 18, 2020 8:06 AM
  • User-1641868886 posted

    Is your problem that the success method of ajax is not triggered?

    Yes, that is the problem. The "success" method of "SubmitPopupForm_Add_Edit" is NOT triggered, but ONLY when I use the "PopupForm_1" to add a new vendor. 

    If so, you can use the F12 to set breakpoint to the success method to see if it has entered the if method.

    I set breakpoints all through the "success" function of "SubmitPopupForm_Add_Edit", but in the above-described scenario (using the "PopupForm_1") when the "serializeArray().filter" function is complete, the debugger jumps past the "success" function and so the "success" breakpoints are not hit. This is the problem. Somehow, using the inner form, "PopupForm_1" causes the "SubmitPopupForm_Add_Edit" function to short-circuit (my term) and not complete itself through all steps.

    The "SubmitPopupForm_Add_Edit", or the "SubmitPopupForm_1" need to be revised or joined into one single function. I don't know the answer to this.

    If the returned is html, please change the dataType to html, if not, then please show me your action code.

    dataType = "json" and it needs to be, I believe. Also, problem is NOT in action code, it is in the javascript function. The form DOES post, but the success function does not trigger, so the popup does not close, and the "notify" function does not post the "success" message.

    Thanks again for any suggestions.

    RC

    Wednesday, March 18, 2020 6:58 PM
  • User288213138 posted

    Hi ReidMelSam,

    Also, problem is NOT in action code, it is in the javascript function. The form DOES post, but the success function does not trigger, so the popup does not close, and the "notify" function does not post the "success" message.

    I know your action may be okay, but based on the code you posted, I can’t test your code.

    The premise of solving your problem is to reproduce your problem, so I need action code to find the problem.

    Best regards,

    Sam

    Thursday, March 19, 2020 2:13 AM
  • User-1641868886 posted

    Thanks, Sam...sorry I'm a little slow. Here is the controller action for the "submit" that is the problem...for the "SubmitPopupForm_Add_Edit":

    public ActionResult AddOrEdit(GrocBillsModel groc)
            {
    
                DynamicParameters param = new DynamicParameters();
    
                var UserName = User.Identity.GetUserName();
                param.Add("@Groc_Id", groc.Groc_Id);
                param.Add("@UserName", UserName);
                param.Add("@Sku", groc.Sku);
                param.Add("@Vend_Id", groc.Vend_Id);
                param.Add("@Cashier", groc.Cashier);
                param.Add("@DateOfSale", groc.DateOfSale);
                param.Add("@Price", groc.Price);
                param.Add("@NetPrice", groc.NetPrice);
                param.Add("@Whol_Id", groc.Whol_Id);
                DataAccess.ExecuteWithoutReturn("spGrocBills_AddorEdit", param);
                
                return Json(new { success = true, message = "Saved/Updated Successfully" }, JsonRequestBehavior.AllowGet);
                
            }

    Thanks again for reviewing, and any ideas or suggestions.

    RC

    Thursday, March 19, 2020 3:42 PM
  • User288213138 posted

    Hi ReidMelSam,

    success: function (data) {
                        if (data.success) {

    I tested your posted code, and i find  the success method of ajax is triggered.

    Try setting a breakpoint to see if the AddOrEdit () method is executed.

    And use F12 to break the point to see what the data returns.

    Best regards,

    Sam

    Friday, March 20, 2020 7:28 AM
  • User-1641868886 posted

    Thanks again, Sam for looking into this. Actually, I think it's a real mess...the "PopupForm_1" brings up an "AddOrEdit" for "Vendor" and it is from "VendorModel" so once it is submitted to VendorController, we want to return to the original popup, "PopupForm_Add_Edit" which is from "GrocBillsModel" and submits to the "GrocBillsController".

    I have removed this line from the javascript you are reviewing in your above debugger snippet:

    $("#PopupForm_Add_Edit").reload();

    This is because when I return to the original popup, "PopupForm_Add_Edit" I want to append "Vend_Id" per the javascript, but persist the "PopupForm_Add_Edit". 

    I have tried debugging the area you focused on in the "SubmitPopupForm_1". It hits the breakpoints, but does not give me all the results on the client. "PopupForm_1" closes, but there is no "success" message on the screen, and the "PopupForm_Add_Edit" is NOT appended with the newly-created Vendor in the "Vend_Id" ddl. Also, the "success" method of "SubmitPopupForm_Add_Edit" does not trigger, so this popup does not close, and there is no "success" message on-screen. HOWEVER, the new record IS present when I refresh the table, so the action method "AddOrEdit" in the GrocBillsController is executing.

    Clearly, the javascript is not formatted correctly.

    Thanks again.

    RC

    Friday, March 20, 2020 4:24 PM
  • User288213138 posted

    Hi ReidMelSam,

    Can you give me all the code for me to test? Including how you implement popups, and all actions, views and Controllers.

    Best regards,

    Sam

    Monday, March 23, 2020 7:13 AM
  • User-1641868886 posted

    Okay, it'll be lengthy. But starting with the "PopupForm_Add_Edit" here is controller, then popup script, then popup submit, then .cshtml:

    public ActionResult AddOrEdit(GrocBillsModel groc)
            {
    
                DynamicParameters param = new DynamicParameters();
    
                var UserName = User.Identity.GetUserName();
                param.Add("@Groc_Id", groc.Groc_Id);
                param.Add("@UserName", UserName);
                param.Add("@Sku", groc.Sku);
                param.Add("@Vend_Id", groc.Vend_Id);
                param.Add("@Cashier", groc.Cashier);
                param.Add("@DateOfSale", groc.DateOfSale);
                param.Add("@Price", groc.Price);
                param.Add("@NetPrice", groc.NetPrice);
                param.Add("@Whol_Id", groc.Whol_Id);
                DataAccess.ExecuteWithoutReturn("spGrocBills_AddorEdit", param);
                
                return Json(new { success = true, message = "Saved/Updated Successfully" }, JsonRequestBehavior.AllowGet);
                
            }

    ...scripts:

    function PopupForm_Add_Edit(url) {
                var formDiv = $('<div/>');
                $.get(url)
                    .done(function (response) {
                        formDiv.html(response);
                        Popup = formDiv.dialog({
                            autoOpen: true,
                            resizable: false,
                            title: 'Add/Edit Record',
                            height: 600,
                            width: 700,
                            close: function () {
                                Popup.dialog('destroy').remove();
                            }
    
                        });
    
                    });
            }
    function SubmitPopupForm_Add_Edit(form) {
                $.validator.unobtrusive.parse(form);
                var Vend_Id = $("#Vend_Id :selected").val()
                var Whol_Id = $("#Whol_Id :selected").val()
                if ($(form).valid()) {
    
                    $.ajax({
                        type: "POST",
                        url: form.action,
                        data: $(form).serializeArray().filter(function (r) {
                            return ["UserName", "Sku", "Vend_Id", "Cashier", "DateOfSale", "Price", "NetPrice", "Whol_Id"].indexOf(r.value) < 0
                        }),
                        dataType: "json",
                        success: function (data) {
                            
                            if (data.success) {
                                Popup.dialog('close');
                                dataTable.ajax.reload();
                                $.notify(data.message, {
                                    globalPosition: "top center",
                                    className: "success"
                                })
    
                            }
                        }
    
                    });
                }
                return false;
            }

    ...now the "AddOrEdit" .cshtml:

    @model Groc_Site_Web.Models.GrocBillsModel

    @{
    layout = null;
    }
    @using (Html.BeginForm("AddOrEdit", "GrocBills", FormMethod.Post, new { onsubmit = "return SubmitPopupForm_Add_Edit(this)" })) { @Html.HiddenFor(m => m.Groc_Id)
    <div> <div class="form-group"> @Html.LabelFor(model => model.Sku, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(m => m.Sku, "- -Enter your Sku- -", new { htmlattributes = new { @class = "form-control", @style = "max-width:150px" } }) <input type="button" id="Confirm" class="btn btn-success" style="margin-left:20px" value="Confirm" /> <p>@Html.DisplayFor(m => m.Description)</p> </div> <div class="inline-flex">
    @Html.LabelFor(model => model.VendorName, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.DropDownList("Vend_Id", new SelectList(string.Empty, "Value", "Text"), "- - Select Vendor - -", new { @class = "form-control" }) <a class="btn btn-warning" style="right:30px; position: absolute" onclick="PopupForm_1('@Url.Action("AddOrEdit", "Vendors")')" id="VendAddLink"><i class="fa fa-plus"></i> Add New Vendor</a> </div> </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Cashier, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(m => m.Cashier, new { htmlattributes = new { @class = "form-control" } }) </div> <div class="form-group"> @Html.LabelFor(model => model.DateOfSale, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.EditorFor(m => m.DateOfSale, new { htmlattributes = new { @class = "form-control" } }) </div> <div class="form-group"> <div class="input-group">
    @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" }) <span class="input-group-addon">$</span> @Html.EditorFor(m => m.Price, new { htmlattributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> <div class="input-group">
    @Html.LabelFor(model => model.NetPrice, htmlAttributes: new { @class = "control-label col-md-2" }) <span class="input-group-addon">$</span> @Html.EditorFor(m => m.NetPrice, new { htmlattributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Wholesaler, htmlAttributes: new { @class = "control-label col-md-2" }) @if (ViewBag.Whol_List != null) { @Html.DropDownListFor(m => m.Whol_Id, ViewBag.Whol_List as SelectList, "- - Select Wholesaler - -", new { @class = "form-control" }) } </div> </div> <div class="form-group"> <input id="AddEditSend" type="submit" value="Submit" class="btn btn-primary" style="margin-right:40px" /> <input type="reset" value="Reset" class="btn btn-warning" /> </div> }


    Next is the controller for the "AddOrEdit" for "Vendor", then the  scripts entitled "PopupForm_1" and "SubmitPopupForm_1":

    [HttpPost]
            public ActionResult AddOrEdit(VendorsViewModel Vend)
            {
                DynamicParameters param = new DynamicParameters();
                param.Add("@Vend_Id", Vend.Vend_Id);
                param.Add("@VendorName", Vend.VendorName);
                param.Add("@Address", Vend.Address);
                param.Add("@City", Vend.City);
                param.Add("@State", Vend.State);
                param.Add("@ZipCode", Vend.ZipCode);
                DataAccess.ExecuteWithoutReturn("spVendors_AddOrEdit", param);
                
                return Json(new { success = true, message = "Vendor Added Successfully." }, JsonRequestBehavior.AllowGet);
            }
    function PopupForm_1(url) {
            var formDiv = $('<div/>');
            $.get(url)
                .done(function (response) {
                    formDiv.html(response);
    
                    Popup = formDiv.dialog({
                        autoOpen: true,
                        resizable: false,
                        title: 'Add A New Vendor',
                        height: 550,
                        width: 700,
                        close: function () {
                            Popup.dialog('destroy').remove();
                        }
    
                    });
    
                });
    
        }
    
    function SubmitPopupForm_1(form) {
            $.validator.unobtrusive.parse(form);
    
            if ($(form).valid()) {
                $.ajax({
                    type: "POST",
                    url: form.action,
                    data: $(form).serialize(),
                    success: function (data) {
                        if (data.success) {
                            Popup.dialog('close');
                            
                            $("#Vend_Id").append(
                                $("<option></option>")
                                    .val($("#VendorName").html())
                                    .html($("#VendorName").val())
                                    .prop("selected", true));
    
                            $.notify(data.message, {
                                globalPosition: "top center",
                                width: 300,
                                className: "success"
                            })
    
                        }
                    }
    
                });
            }
            return false;
        }

    ...finally, the .cshtml for the partialView of "AddOrEdit" for new Vendor:

    @model Groc_Site_Web.Models.VendorsViewModel
    
    @{
        Layout = null;
    }
    
    
    @using (Html.BeginForm("AddOrEdit", "Vendors", FormMethod.Post, new { onsubmit = "return SubmitPopupForm_1(this)" }))
    {
        @Html.AntiForgeryToken()   
        <div class="form-horizontal">
            
            
            @Html.HiddenFor(model => model.Vend_Id)
            <div class="form-group">
                @Html.LabelFor(model => model.VendorName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.VendorName, new { htmlAttributes = new { @class = "form-control" } })                
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })                
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })                
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
    
                    @if (ViewBag.StatesList != null)
                    {
                        @Html.DropDownListFor(m => m.State, ViewBag.StatesList as SelectList, "- - Select State - -", new { @class = "form-control" })
                    }
                    
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } })                
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input id="VendSend" type="submit" value="Save" onclick="SubmitPopupForm_1" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    This will give you all code for the primary popup ("PopupForm_Add_Edit"), the secondary popup ("PopupForm_1") and their scripts and controllers.

    Thanks,

    RC

    Monday, March 23, 2020 4:54 PM
  • User288213138 posted

    Hi ReidMelSam

    I tested your code and I did not encounter any errors.

    The "success" method of "SubmitPopupForm_Add_Edit" is triggered.

    This is my tested result:

    Is there any error in your console when your success is not triggered?

    Best regards,

    Sam

    Thursday, March 26, 2020 2:20 AM
  • User-1641868886 posted

    Sam, thanks again for your time to check on this.

    Remember that the "success" function you're showing is actually from the "SubmitPopupForm_1" function, which is the sub-popup. It works fine.

    The problem appears AFTER using this function to execute the "Vendors/AddOrEdit" post method, when you return and resume using the primary form and click "SubmitPopupForm_Add_Edit" which executes "GrocBills/AddOrEdit" and then THAT function's "success" function fails.

    Thx,

    RC

    Thursday, March 26, 2020 2:40 PM
  • User288213138 posted

    Hi ReidLMeLSam,

    The problem appears AFTER using this function to execute the "Vendors/AddOrEdit" post method, when you return and resume using the primary form and click "SubmitPopupForm_Add_Edit" which executes "GrocBills/AddOrEdit" and then THAT function's "success" function fails.

    Is there any error message in the console when the success method fails?

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 27, 2020 2:50 AM
  • User-1641868886 posted

    I'm not good at reading what is in the console. Need more experience, tutorial, etc. But here's what I see:

    Error: No response from frame: #st_gdpr_iframe
        at F (browserLink:379)
        at browserLink:379
    browserLink:379 Error: No response from frame: body > iframe:nth-of-type(2)
        at F (browserLink:379)
        at browserLink:379

    ...and when I click, I see a lot of gibberish and that's where my knowledge breaks down-reading the jquery function error strings. BUT...something is making me think about this little section of the "SubmitPopupForm_1" success function:

    $("#Vend_Id").append(
                                $("<option></option>")
                                    .val($("#VendorName").html())
                                    .html($("#VendorName").val())
                                    .prop("selected", true));

    ...I'm wondering if the way this is written is POSSIBLY sending the new "VendorName" to the ddl on "PopupForm_Add_Edit" but it is NOT SUPPLYING the newly-created "Vend_Id" because maybe I'm telling it TWICE to send the "VendorName" but not telling it to send the .val which is the new "Vend_Id" ?

    Also, after I follow the debugger through this ("SubmitPopupForm_1") and resume with the "PopupForm_Add_Edit" I do see the new "VendorName" in the ddl editor, but when I complete the "PopupForm_Add_Edit" form and click "Submit" NOTHING happens-I do not see the debugger start to check through "SubmitPopupForm_Add_Edit" and I do not enter the controller action's breakpoints on "AddOrEdit" in the GrocBillsController. It just stops and gives me the console errors I reference above.

    Tell me what you think about this.

    Thanks again,

    RC 

    Friday, March 27, 2020 7:41 PM