pjax; some scripts in injected content do not work on page refresh

Question

I have built an app with NancyFx and pjax based on this post:

http://www.jhovgaard.com/nancy-pjax/

I have the basics working well. When I click the links my content is loaded and the ajax forms in that content work fine.

However, when I press F5 and refresh the page some of the javascript does not run.

For example, a form contains a div which is shown after the form is submitted to display a success/error message. This panel is hidden when the form loads with this code:

$('#successPanel').hide();

If I click a link and pjax loads the content then the success panel is hidden. The problem is that when I hit F5 and force a page refresh then this code does not work. The js is in a file included in the content injected by pjax like this:

<script type="text/javascript" src="/Content/js/formIncomeExpenses.js"></script>

I have a console.log in that file and it is getting called when the page is refreshed. But the successPanel stays visible.

My layout contains the jquery and pjax scripts and the form plugin I am using from here:

http://jquery.malsup.com/form/

I am also using Bootstrap and Datatables.net. All these work fine together and the non pjax version of the app works fine.

Any ideas what I'm doing wrong?

Answer 1

Thnkfully, this turned out to be just a case of the DOM not being ready and using this fixed the issue:

$(document).ready(function() { // hide the success panel $('#successPanel').hide(); });