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/javascript" 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.