Jquery ajax not refreshing in modal

Question

I'm using a fancybox modal to display comments from a news page pulled from a mysql database. The modal also has a section that allows users to post new comments. I'm using jquery to send the form information to another script for processing.

Instead of returning the successful message, it's posting the information and redirecting to the page instead of displaying the information in the modal.

Here's the jquery that should cause this to happen:

$(document).ready(function(){ 
$("#submit").click(function() {
/* Set some vars */
                        var messageText = $("textarea#message").val();
                        var newsID = $("hidden#newsid").val();


                        $.post('/process/newmsg.php',
                            { message : messageText, newsid: newsID },
                            function(data) {
                                $("#fancybox_content").before(data);
                            }
                        );



});

});

Any idea what I'm missing here?

Answer 1

this is not a valid selector: $("hidden#newsid"). So, "newsID" is empty and the post parameters give syntax error

{ message : messageText, newsid: },

Answer 2

Try $("#fancybox_content").html(data);

before() wont put the result INSIDE the fancybox_content, it will put it before it.

also, if the result is a full html document including the head and everything, it will cause problems. you should parse the results first

Answer 3

Assuming #submit is a submit button, you need to cancel the default behavior of that button, which is to submit the form. Either return false from your click handler function or use e.preventDefault().