locked
jQuery Code is not working RRS feed

  • Question

  • User1912965948 posted

    Hi all,

    My code is not working after a lot of effort now I'm writing this post to share with you guys.

    I've a popup and I need to use jQuery Date Picker in this popup, last whole night I was trying to run jQuery code but I'm failed to run it.

    I've a page AddEdit.cshtml and I'm using it as a popup, jQuery code works when I run or view this on browser but jQuery dose not work when I run or view it as popup.

    I hope you guys got my point. I share my code with simple jQuery code.

    AddEdit.cshtml / Popup

    @model Project.Models.ProformaInvoiceModel
    @{
        Layout = null;
    }
    
    @using (Html.BeginForm("AddEdit", "ProformaInvoice", FormMethod.Post, new { onsubmit = "return SubmitForm(this)" }))
    {
        <div id="customerModal" class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="modalHeader" class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="bg" class="modal-body">
                    @Html.HiddenFor(model => model.piId)
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Select Supplier</label>
                            @Html.DropDownListFor(model => model.supId, new SelectList(ViewBag.SupplierList, "supId", "supName"), "--- Select Supplier ---", htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.supId)
                        </div>
                        <div class="col-md-6">
                            <label>Select Customer</label>
                            @Html.DropDownListFor(model => model.cusId, new SelectList(ViewBag.CustomerList, "cusId", "cusName"), "--- Select Customer ---", htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.cusId)
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>PI No</label>
                            @Html.EditorFor(model => model.piNo, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.piNo)
                        </div>
                        <div class="col-md-6">
                            <label>Issue Date</label>
                            @Html.EditorFor(model => model.issueDate, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.issueDate)
    
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Amount</label>
                            @Html.EditorFor(model => model.amount, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.amount)
                        </div>
                        <div class="col-md-6">
                            <label>Inco Term</label>
                            @Html.DropDownListFor(model => model.incoTermId, new SelectList(ViewBag.IncoTermList, "incoTermId", "incoName"), "--- Select Inco Term ---", htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.incoTermId)
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Payment Term</label>
                            @Html.DropDownListFor(model => model.pmId, new SelectList(ViewBag.PaymentTermList, "pmId", "pmName"), "--- Select Payment Term ---", htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.pmId)
                        </div>
                        <div class="col-md-6">
                            <label>Status</label>
                            @Html.EditorFor(model => model.status, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.status)
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    @{
                        if (Model.piId == 0)
                        {
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <input type="reset" value="Reset" class="btn btn-warning" />
                            <input type="submit" value="Submit" class="btn btn-primary" />
                        }
                        else
                        {
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <input type="submit" value="Save Changes" class="btn btn-primary" />
                        }
                    }
    
                </div>
            </div>
        </div>
        <script src="~/Scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            jQuery(function () {
                jQuery('#issueDate').css('background-color', 'black');
                jQuery('#modalHeader').text('Add New');
                jQuery('.modal-body').css('background-color', 'red');
            });
        </script>
    
    }
    

    Index.cshtml / Popup runs from this page.

    <a id="btnModal" class="btn btn-primary btn-icon-split btn-sm" onclick="PopupForm('@Url.Action("AddEdit", "ProformaInvoice")')">
                    <span class="icon text-white-50">
                        <i class="fas fa-plus"></i>
                    </span>
                    <span class="text" style="color: #fff;">Add New PI</span>
                </a>

    jQuery to handle popup

    Index.cshtml

    function PopupForm(url) {
                var formDiv = jQuery('<div/>');
                formDiv.addClass('modal fade');
                jQuery.get(url)
                    .done(function (response) {
                        formDiv.html(response);
                        popUp = formDiv.modal('toggle');
                    });
            }
    
            function SubmitForm(form) {
                jQuery.validator.unobtrusive.parse(form);
                if (jQuery(form).valid()) {
                    jQuery.ajax({
                        type: 'POST',
                        url: form.action,
                        data: jQuery(form).serialize(),
                        success: function (data) {
                            if (data.success) {
                                popUp.modal('toggle');
                                dataTable.ajax.reload();
                                jQuery.notify(data.message, {
                                    globalPosition: 'top center',
                                    className: 'success'
                                });
                            }
                        }
                    });
                }
                return false;
            }

    Ask freely If you need any further information

    Thanks in advance 

    Saturday, February 1, 2020 1:03 PM

All replies

  • User475983607 posted

    fungus.00

    I've a page AddEdit.cshtml and I'm using it as a popup, jQuery code works when I run or view this on browser but jQuery dose not work when I run or view it as popup.

    What does "not work" mean?  What do you expect to happen?  What actually happens?   Keep in mind the JavaScript within the partial does not run.  It is up to you to write code to load the JavaScript in the success handlers. 

    IMHO, the design is overly complex.  I do not see a good reason to do an HTTP request to get a partial containing a modal.  Why are you making two requests to populate the page?  I would simply return the modal in the main view and show the modal rather than fetching the modal from an action then showing the modal.  Can you explain the problem this design solves?

    Saturday, February 1, 2020 1:38 PM
  • User-474980206 posted

    One issue with your code. When a modal is opened, the dom objects are moved to the end of the body, so it will display correctly. In you case it moves it out of the form. Place the form in the modal body.

    Sunday, February 2, 2020 6:28 PM
  • User1912965948 posted

    mgebhard

    What does "not work" mean?  What do you expect to happen?  What actually happens?   Keep in mind the JavaScript within the partial does not run.  It is up to you to write code to load the JavaScript in the success handlers. 

    Sorry for late reply

    I do expect that my javascript code should run but you are telling me javascript within the partial dose not work, accept code to load in success handler.

    Sir will you write a piece code that how javascript code run within partial with success handler.

    mgebhard

    IMHO, the design is overly complex.  I do not see a good reason to do an HTTP request to get a partial containing a modal.  Why are you making two requests to populate the page?  I would simply return the modal in the main view and show the modal rather than fetching the modal from an action then showing the modal.  Can you explain the problem this design solves?

    I think I've to change my whole scenario.

    Would you like to share with me that how you do it if you were me ?

    bruce (sqlwork.com)

    One issue with your code. When a modal is opened, the dom objects are moved to the end of the body, so it will display correctly. In you case it moves it out of the form. Place the form in the modal body.

    Sorry for late reply

    I didn't get your point. Modal body is already within the form tag.

    Tuesday, February 11, 2020 12:30 PM