Jquery Question posted in
The official Jquery Api Documentation can be found here.

Why doesn't any jQuery code and some icons work after loading the partial view in ASP.NET Core?

I have a page with a list of information, and I can search this information using a series of fields and Ajax. I can reload the information on the page by loading it as a partial view. However, after the page is reloaded, no jQuery code works. What could be the issue?

Code in C#:

public async Task<IActionResult> InvoiceSearch(string CurrentPage, string createDate, int? id,
    int? remoteFactorNumber, string deliverToPhoneNumber, int? statusInvoice)
{
    try
    {
        var branchId = 0;

        if (!User.IsInRole(ConstantRoles.Admin))
        {
            branchId = User.Identity.GetBranchId();
        }

        var invoiceParams = new BranchInvoicesResourceParameters
        {
            PageNumber = !string.IsNullOrEmpty(CurrentPage) ? Convert.ToInt32(CurrentPage) : 1,
            CreateDateTime = createDate?.ToEnglishNumbers() ?? null,
            InvoiceId = id,
            RemoteFactorId = remoteFactorNumber,
            StatusInvoice = statusInvoice == null ? null : (StatusInvoice)statusInvoice,
            DeliverToPhoneNumber = deliverToPhoneNumber?.ToEnglishNumbers() ?? null,
            BranchId = branchId,
        };

        var branchInvoice = await _invoiceService.GetBranchInvoices(invoiceParams);
       
        return PartialView("_BranchInvoiceList", branchInvoice.Data);
    }
    catch(Exception ex)
    {
    }
}

Ajax call:

function getSearchInvoice(page) {

    var createDate = $('#searchCreateDate').val();
    var id = $('#searchId').val();
    var remoteFactorNumber = $('#searchRemoteFactorNumber').val();
    var deliverToPhoneNumber = $('#searchDeliverToPhoneNumber').val();
    var statusInvoice = $('#searchStatusInvoice').val();

    var invoice = new Object();
    invoice.createDate = createDate;
    invoice.id = id;
    invoice.remoteFactorNumber = remoteFactorNumber;
    invoice.deliverToPhoneNumber = deliverToPhoneNumber;
    invoice.statusInvoice = statusInvoice;

    $.ajax({
        type: "Get",
        url: "@Url.Action("InvoiceSearch", "Home")",
        headers: {
            "RequestVerificationToken": requestVerificationToken
        },
        data: {
            CurrentPage: page,
            createDate: createDate,
            id: id,
            remoteFactorNumber: remoteFactorNumber,
            deliverToPhoneNumber: deliverToPhoneNumber,
            statusInvoice: statusInvoice
        },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
          
        },
        error: function (xhr, ajaxOptions, thrownError) {
     
    });
};

If I refresh the page, there is no problem, but when I retrieve the partial view again through Ajax, no jQuery code works.

Tags:

2

Answers


  1. 0

    put all the query code in

    $(document).ready(function() {
   // your code here
});
    Login or Signup to reply.
  2. 0

    Your jQuery code gets executed before the partial view has been loaded.
    In other words, the selector which you used was not even available in DOM at the first place.

    Better to use

    $(document).ready(function() { //code });

    Or, you could simply move your code related to partial view to a separate script and load it along with the partial view.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search