Question

I’m pretty sure it has to do with my core.js file with the ajax hashing url. But I’m trying to submit a form, but it’s not submitting like I want it to. This is the core.js file:

// call init
$(init);


function init() {
    ajax_page_handler();
    page_load($(window.location).attr("hash")); // goto first page if #! is available
}

function page_load($href) {
    if($href != undefined && $href.substring(0, 2) == '#/') {
        // replace body the #content with loaded html
        $('#content').load($href.substring(2), function () {
            $('#content').hide().fadeIn('slow');
        });
    }
}

function ajax_page_handler() {
    $(window).bind('hashchange', function () {
        $href = $(window.location).attr("hash");
        page_load($href);
    });

    // this allow you to reload by clicking the same link
    $('a[href^="#/"]').live('click', function() {
        $curhref = $(window.location).attr("hash");
        $href = $(this).attr('href');
        if($curhref == $href) {
            page_load($href);
        }
    });
}

The live viewing is over at http://www.krissales.com. The form is here: http://www.krissales.com/#/media/5.Testing-1

Hit the link “Post Comment”, then you’ll type info in, then hit comment, but it just refreshes, but doesn’t submit it.

The steps I’ve taken to solve it was in the comment file, in the form action field, I inserted the tag name="#content" simply because that’s the name of my div that I’m submitting to.

The original stuff is on http://blog.krissales.com/article/7.Testing-3-man ( where you can actually post a comment, and it’ll work)

But apparently it’s not working. Do you guys have a clue as to what it is that I’m doing wrong? thanks for your help in advance!

<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "simple"
    });
</script>
<form action="#/media/article.php" name="#content" method="POST">

    Name:
    <br />
    <input type="text" name="name" class="userpass"/>
    <br /><br />
    Comment:
    <br />
    <textarea id="elm1" name="comment" rows="7" cols="30" style="width: 500px;"> 
    </textarea>
    <br />
    <input type="submit" name="submit" value="Comment" class="button" />
    <input type="reset" name="submit" value="Reset" class="button" />

</form> 

Answer 1

Your current core.js handles changes in the URL hash, and it reroutes any links with a hash to load that relative path into #content. What’s missing is code to redirect form submits to do the same thing (add this to ajax_page_handler):

 $('form').live('submit', function(e) {
    var $action = $(this).attr('action');

    if($action.substring(0, 2) == '#/') {
        // replace the #content with result of the form post
        $.ajax({
            url: $action.substring(2),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success: function(data) {
                $('#content').html(data);
                $('#content').hide().fadeIn('slow');
            }
        });
        // stop the real form submit from happening
        e.preventDefault();
    }
});