I am struggling to implement a change/animate feature for the background color.
When I place the background script within the form submit event but outside the ajax call, I can briefly see the color change. However, once the remote content loads, the color disappears. It seems to be running too early. If I try placing it inside the ajax call, nothing happens at all.
$(function() {
$(document).on("click", ".vote_button", function(event){
var form = $(this).parent();
var page = <?php echo json_encode($page) ?>;
var target = $('.target');
$(form).submit(function (event) {
event.preventDefault();
$(target).animate({
backgroundColor: "#ccc"
}, 'fast' );
$(target).animate({
backgroundColor: "#fff"
}, 'slow' );
$.ajax({
type: "POST",
url: "/forms/increase_rank.php",
data: $(form).serialize(),
success: function(response){
$(function() {
getdata( page ); /* call the function onload */
});
function getdata(pageno){
var targetURL = 'search_results?page=' + pageno;
$('#retrieved-data')
.html('<p id="ajax-load">testing</p>');
$('#retrieved-data')
.load(targetURL)
.hide()
.fadeIn(1000);
}
$(form).html(response);
}
});
});
});
});