jquery: POST data + redirect page not working as expected_问答_开发者

I'm trying to submit some data using POST method and redirect the page. But whenever I click on the submit button, the jquery does not load properly on the new page. I was able to reduce my problem to the following code. For example, If I press submit, a new page gets loaded. But Submit button doesn't give any response, and no alert box appears.

<html lang="en">
<head>
<script type="text/javasc开发者_如何学Cript" src="{{ MEDIA_URL }}site/jquery-1.4.2.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
  $('#submit').click( function() {
  alert("Submit button pressed" );
  $.post("/questions/submit/", 
    {qid:1, ans:"dummy" },
    function(data) {
       $('html').html(data);
    });
  });
});
</script>
</head>
<body>
    <a href="/accounts/logout">Logout</a>
    {{ section.qid }}
    <button id="submit">Submit</button> 
</body>
</html>

Apparently, whenever the new data is loaded into the page through jquery, jquery scripts and functions are not executed. So I have to do a "refresh" on the page, and everything works perfectly. However, in the post function, if I change 'html' to 'body', submit works just fine.

$('body').html(data);

But different pages may have different script files included. So I'm not in favor of doing this. What should be the ideal way to implement this, so that jquery functions get loaded properly?

PS: On checking the "page source", I noticed that old section.qid is present in page source. However, the browser renders the new (and apparently correct) section.qid. I'm stumped.

You can't reload the entire contents of <html> like this...you're refreshing the entire page anyway (kind of defeating the point of AJAX), why not just use a normal <form> and postback? It would look like this:

<html lang="en">
  <head></head>
  <body>
    <a href="/accounts/logout">Logout</a>
    {{ section.qid }}
    <form method="post">
      <input type="hidden" name="qid" value="1" />
      <input type="hidden" name="ans" value="dummy" />
      <button id="submit">Submit</button> 
    </form>
  </body>
</html>

you haven't redirected to a page, you're using javascript to replace everything between the <html> and </html> tags after getting the text/html from another page using AJAX.

The browser view source will generally show the original source of the page from when it first loaded. Any changed you make after that will not be reflected here. You can see the changes you've made to the elements on the page, if you use a tool like Firebug for Firefox, or Firebug Lite for IE.

The reason why things seem to work when you replace contents inside the <body> is because you're scripts are outside the <body> in the <head> tag which gets replaced when you use html

what exactly are you trying to do? Maybe explaining the scenario in detail can help us help you better. What needs to happen after your form POST?

AJAX is generally used to avoid refreshing the entire page, or entire contents, instead refreshing only the elements on the page that need changing.

On button click call this function() below and pass the parameter, in my case I passed new to servlet

function checkforNew(){

            jQuery.ajax({
                type: "POST",
                url: '<%=request.getContextPath()%>/MyController?&oper=new',
                //data: {'obj':data},
                dataType: "json",
                success: function(response){
                    window.location.href = response.redirect;
                }
            });
        }

Inside servlet you need to mention following code, for the page to redirect.

String destination = "/mypage.jsp;

            response.setContentType("application/json");
            JSONObject responsedata = new JSONObject();
            responsedata.put("redirect", destination);

            out.print(responsedata);
            out.flush();