Question posted in
You can find the official documentation here.

View Component Not loading properly the css and js is not working on ajax call – Jquery ajax

Hi I’m trying to load the viewcomponent using ajax when the button is click. But the view component does work properly it seems that css and js is not working.

Here is the ajax call for the controller Load component

$.ajax({
  url: window.location.origin + "/TestDashbook/LoadComponent",
  type: "post",
  dataType: "json",
  data: { 'dbid' : dbid },
  complete: function (result) {
        $("#divcontent").empty();
        $("#divcontent").html(result.responseText);
  }
});

Here is the Controller

        [HttpPost]
        public async Task<IActionResult> LoadComponent(string dbid)
        {
            var dashtabcount = "0";
            var companyId = "1";
            var defaultdashbooklist = await dashbookService.FetchDefaultDashbooks();
            var dashbooklist = await dashbookService.FetchDashbooks(companyId);
            List<DashbookModelView> dblist = new List<DashbookModelView>();
            DashbookModelView dbmodel = dashbooklist.Where(s => s._id.ToString() == dbid).FirstOrDefault();
            return ViewComponent("TestMultiDash", new { dashbookModel = dbmodel, dashtabcount = dashtabcount, companyId = companyId });
        }

Here is the output

enter image description here

This is what it should look like

enter image description here

Tags:

2

Answers


  1. 0

    You are using the complete callback that won’t receive the data you are sending back. What you are looking fore is the success callback.

    From spec:

    complete
    Type: Function( jqXHR jqXHR, String textStatus )
    A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request (“success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, or “parsererror”). As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

    success
    Type: Function( Anything data, String textStatus, jqXHR jqXHR )
    A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter or the dataFilter callback function, if specified; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

    See the jquery documentation for more details.

    Login or Signup to reply.
  2. 0

    Try this:

               success: function (result) {
                  $("#divcontent").empty();
                  $("#divcontent").html(result.responseText);
            },
            error: function (xhr, status, error) {
                console.log(status + " : operation failed, " + error)
            }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search