How to update 'asynchronous update' enabled listview programatically using javascript

Question

I'm have a page in which one custom visual webpart and one listview webpart.

I've have some custom checkboxes and dropdowns in my visual webpart, I'm making an ajax request and when i select the filters and click on submit.

Im updating UI in visual webpart based on the response from ajax call.

Now the problem is, the listview webpart in the page also has to be updated based on the selection.

If I append selected values to URL and reload the page, the ajax call is getting canceled and I'm loosing previous selection of checkboxes and dropdowns. So I enabled the "Asynchronous update" on the listview.

but I do not have any idea how to update the listview using JavaScript; which method I need to call on clientside like'_dopostback' to update listview. I found that the listview webpart is using updatepanel to update asynchronously.

How can I update the list view using JavaScript by passing filter information.

Answer 1

Probably the easiest answer is to just trigger the click event on the little refresh image in the List View Web Part.

Answer 2

You are actually half way there.

I just did this, I enabled the manual refresh and then opened up the page in dev tools and found the javascript was running a dopostback for the element. Copy that code into your javascript wherever you need to refresh and it should work.

In my case, I modified the XSL of my list view so I could add items via CSOM and use the async postback to get the latest.

Here is my code I used for that:

$('#postComment').live('click',function(){

$(this).attr('disabled','disabled');

 comment = {
        Title:"Comment",
        CommentText:$('#commentText').text(),
        Event:JSRequest.QueryString["ID"]
    }
    var deferred = new createListItem("EventComments", comment);
    deferred.done(function(n) {
  //      console.log('add comment done');

        javascript:     __doPostBack("ctl00$m$g_25cf0d13_3640_4f41_a9aa_d80cd7252fd1$ctl02","cancel");return false;
    });
    return deferred.promise();
});

function createListItem(listName, fields) {
    this.dfd = jQuery.Deferred();
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(listName);
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    for (var key in fields) {   
        if (fields.hasOwnProperty(key)) {
            this.oListItem.set_item(key, fields[key]);
        }
    }
    this.oListItem.update();
    clientContext.load(this.oListItem);
    clientContext.executeQueryAsync(
    Function.createDelegate(this, onListItemCreatedUpdated),
    Function.createDelegate(this, onQueryFailed));
    return this.dfd.promise();
}

    function onListItemCreatedUpdated() {
    this.dfd.resolve(this.oListItem);
}


function onQueryFailed(sender, args) {
    var failMessage = 'Request failed. ' + args.get_message() + '\n' + args.get_stackTrace();
    //console.log(failMessage);
    if(this.camlText)
    {
        //console.log(this.camlText)
    }
    if (this.listName)
    {
        //console.log(this.listName)
    }
    SP.UI.Notify.addNotification(failMessage, true);
}