Ajax call with return large data

Question

I have an index page split in 2. The left side is a list of documents in a folder. On selecting a document, i make an ajax call to a method within the controller and receive that data which i then display in the right side.

Index view.

<div id="files">
            <ul>
                @foreach (string file in ViewBag.Files)
                {
                    <li class="fileName">@file</li>
                }
            </ul>
        </div>
 <div id="fileContent">
     <h3>Choose a log file to view it's content</h3>    
 </div>

Jquery ajax call

$('.fileName').click(function () {
    var fileName = $(this).html();
    $(".loader").show();
    $.ajax({
        type: "POST",
        url: '@Url.Content("~/SystemReports/ViewContent")' + "?fileName=" + fileName,
        dataType: "text",
        data: {},
        success: function (data) {
            $('#fileContent').html(data);
        }
        ,error: alert('error')
    });
});

The first problem I am having is that when the call is made, the alert('error') is displayed and only after that the controller method is accessed. And I Do not know why(if you could help me with this one too, really appreciate).

The second problem I am having is that if the content of the file is very large (for example over : 400.000 chars) the browser freezes while trying to display the received data. I have tried the following on the success parameter :

success: function (data) {
      for(var i=0; i<=data.length-4; i++) <- -4 is because of some special char at the end
             $('#fileContent').append(data[i])

        }

The controller

public PartialViewResult ViewContent(string fileName){

     OpenFile(fileName);

return PartialView("PartialViewName");
}

error: alert('error') must be error: function(){alert('error');} just as for success... — A. Wolff
– A. Wolff, Commented Mar 1, 2014 at 8:27

A. Wolff · Accepted Answer · 2014-03-01 08:39:35Z

1

For the error callback, your issue is obvious, see comment. For the success callback, try instead:

var $fileContent = $('#fileContent').before('<div id="swap"/>').detach()[0].innerHTML = data.substring(0, data.length - 4);

$('#swap').replaceWith($fileContent);

answered Mar 1, 2014 at 8:39

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mihai Tibrea Over a year ago

this is working, but now, i cannot select a different log from the left side. The #fileContent div is gone ? I still want to be able to select other Docs from the left side after I viewed one of them

A. Wolff Over a year ago

You can easily check if #fileContent is gone or not, right?! Check btw your console, any error?

Mihai Tibrea Over a year ago

I could not edit the previous comment. Yes, the #fileContent is gone and so is the #swap. The console shows no error. How can I put the swarp and filecontent div back, after the load, so that I can choose another doc to see ?

Mihai Tibrea Over a year ago

I tried with a bigger file, a 6mb(~4.000.000 chars) file full of text. The page still freezes until the load is complete. I am thinking that displaying all that data is not a very good solution. I think I should try something else..no ?

A. Wolff Over a year ago

Ya for sure, you shouldn't try to display so much data at once.

|

Collectives™ on Stack Overflow

Ajax call with return large data

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related