Question

I have an ajax form in asp.net mvc which is as simple as this:

    <% using (this.Ajax.BeginForm("LatestBlogPosts", "Blog", null, new AjaxOptions { UpdateTargetId = "blogPostPanel" }, new { id = "BlogPostForm" })) { %>
    <div class="panel" id="blogPostPanel">
        <img src="/images/ajax-loader.gif" alt="ajax-loader" />
    </div>
    <% } %>

I want to invoke the form submit when document is loaded. This should supposedly, call the controller’s action and return a result that should be replaced with the placeholder DIV. If I add a SUBMIT button to the form, it works perfectly, but when I invoke the submit via jQuery, the whole page is refreshed, and the content returned by the server is displayed in the newly displayed page. Here’s my jQuery code:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#BlogPostForm").submit();
        });
    </script>

Anyway to do this?

Answer 1

I think it may work if you use the trigger method to generate the submit event, but I think there’s a less complicated way to do this using jQuery.

<div class="panel" id="blogPostPanel">
    <img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>

<script type="text/javascript">
    $(function() {
         $('#blogPostPanel').load( '<%= Url.Action( "LatestBlogPosts", "Blog" ) %>' );
    });
</script>