AJAX Hash Submit Form

Question

I am sure this is due to my core.js file with ajax hash url. But I try to submit the form, but it does not submit as I want. 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); } }); } 

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

Click on the “Leave a comment” link, then enter the text, then click on the comment, but it just updates but does not send it.

The actions that I took to solve it were in the comment file, in the form action field I inserted the name="#content" tag simply because this is the name of my div to which I am posting.

The original material is at http://blog.krissales.com/article/7.Testing-3-man (where you can post a comment and it will work)

But apparently, it does not work. Do you guys know what 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 processes the changes in the hash of the URL, and redirects any hash links to load this relative path into #content . There is no code to redirect the form to do the same (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(); } }); 

Answer 2

I noticed that you are not setting the ajax type in comment.php file.

you need...

  $.ajax({ type: 'POST', url: 'comment_ajax.php', data: { form_name: name, form_comment: comment }, success: function(data) { $('#new_comment').prepend(data); // close modal box // do other shit // kthnxbai } }); 

If no type is specified, the default is a GET request that will not send data. :)

Answer 3

You must change the action attribute of your form as follows:

 <form action="script-handling-comment-data.php#/media/article.php" name="#content" method="POST"> 

At the moment, you are sending comments data to http://www.krissales.com/ , and I think the main page does not process sending comments.

Answer 4

It seems that you are handling the links correctly, but the view form is not a link, you probably want to process the view using $(form).submit(function(){ ... })

In your case, if you specified your form id form1

 $('#form1').submit(function(){ var keyValues = $(this).serializeArray(); var map = {}; for(i in keyValues) { var value = keyValues.value; var name = keyValues.name; map[name] = value; } $.post($(this).attr('action'),map,function(){ alert("Submitted values: " + $(this).serialize()); }); return false; }) 

See serializeArray , $.post and .submit for more information.