Jquery submit does not work after ajax pagination

I am using an ajax pagination script which works fine – https://github.com/gbirke/jquery_pagination

On the first page everything works great, there are submit buttons (multiple forms) on each page, which send data to the database via a jquery POST.

However, the jquery post only works for forms/buttons on the first page that is loaded. If you switch to another page on the pagination the jquery post / submit button does not work.

Any suggestions would be much appreciated, can’t seem to figure it out.

Thanks!

Main code snippets:

Pagination Scripts

<script>
$(document).ready(function() {
$("#Pagination").trigger('setPage', [<?php echo $member_Program_Week_calc; ?>]);
});
</script>

<script type="text/javascript">
function pageselectCallback(page_index, jq){
var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}

function initPagination() {
// count entries inside the hidden content
var num_entries = jQuery('#hiddenresult div.result').length;
// Create content inside pagination element
$("#Pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}

// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});
</script>

ajaxSubmit function

<script type="text/javascript">
$(document).ready(function() {

$('#completetask_<?php the_sub_field('tasks_id'); ?>').submit(ajaxSubmit); // example

function ajaxSubmit(){

$(this).find(':submit').attr('disabled','disabled');

var completetask = jQuery(this).serialize();

jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: completetask,
success:function(data){
jQuery("#feedback").html(data);
},
error: function(errorThrown){
alert(errorThrown);
}
});
return false;
}

});
</script>

Form Code

<form method="post" id="completetask_<?php echo $task_id; ?>">
<input type="hidden" name="program_id" id="program_id" value="<?php echo $program_id; ?>"/>
<input type="hidden" name="session_id" id="session_id" value="<?php echo $session_id; ?>"/>
<input type="hidden" name="task_id" id="task_id" value="<?php echo $task_id; ?>"/>
<input type="hidden" name="action" value="completeTask"/>

<input class="program_task_submit_no program_task_submit_no_<?php echo $task_id; ?>" type="submit" value="COMPLETE TASK"/>
</form>

  • Elliot Sowersby
    • The Incredible Code Injector

    I’ve managed to solve this.

    The solution is event delegation, using the .on() function.

    With my code, I changed the ajaxSubmit function code around using the .on function.

    Simple Example:

    $(document).on('submit', '#completetask', function(e) {
    //CODE
    });

    My Updated Code:

    $(document).on('submit', '#completetask_<?php the_sub_field('tasks_id'); ?>', function(e) {

    $(this).find(':submit').attr('disabled','disabled');

    var completetask = jQuery(this).serialize();

    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".program_task_title_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";

    document.body.appendChild(css);

    jQuery.ajax({
    type:"POST",
    url: "/wp-admin/admin-ajax.php",
    data: completetask,
    success:function(data){
    jQuery("#feedback").html(data);
    },
    error: function(errorThrown){
    alert(errorThrown);
    }
    });
    return false;

    });

    I removed the original ajaxSubmit function code.

    Working with CSS

    I also needed CSS to execute once the button is submit which changed the style of the form. However, changing page reset this back to normal. In order to solve this I executed CSS styling within the script.

    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".program_task_title_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";

    document.body.appendChild(css);

    Thanks.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.