Question

I have created an MVC application that uses webgrids to display data on my views. In my grid’s toolbar I have drop downs, text boxes and a search button that call Jquery to perform various actions. For example, if I click the search button, I refresh the grid via Ajax based on a text entry. This all works well until interaction with the webgrid (page or sort) occurs. We noticed that if any ajax calls are made, then the sorting and paging do not work anymore. Also, if I load the page and page or sort first, then none of my JavaScript works. I have been researching this issue, but have not seen any concrete solutions. Does anyone have recommendations for a solution?

Answer 1

I would wager to guess that you are attaching your jquery handlers in the document.ready function using something like $("#Sort").click(function(){});. When you reload the grid via an AJAX call, the jquery handlers are not reattached since the DOM was not reloaded. Try using something like this $("#Sort").live('click', function(){}); which will attach the handler to any instance of your identifier once it is present on the page.

This is was a complete guess since you posted no code, but this and the post you referenced above (SO post) seems to have fixed your issue.