ajaxComplete firing multiple times

I am currently having an issue with a piece of code on my website which uses ajaxComplete and it keeps firing multiple times.

Here is a bit of background on the actual system. I have developed a small plugin for wordpress which allows you to input a start date, end date and reference code number. When you go into a giving course you can add, edit and delete these fields.

Read More

The edit part is where I am currently having an issue, when I go to edit an existing course date my code logic grabs the data of that record and feeds it through to the form directly from the database.

The issue I have is when I press on the edit button to make an amendment to the start date, end date and course reference for that record the ajaxComplete request keeps firing and in result refreshes the inputs and grabs the default data again and adds it back in every 5 – 7 seconds. This does not give me enough time to edit the start date, end date and course code and then press “Update” as the fields keep going back to default.

Is there anyway I can stop this from happening?

$j("a.edit-date").live("click", function(e) {
            e.preventDefault;

            var target = $j(this);

            var postData = {};
            postData['data[_course-date-id]'] = target.attr('rel');
            postData['data[_course-post-id]'] = <?php echo $post->ID; ?>;
            postData['data[_cancel-edit]'] = 'no';

            $j.ajax({
                type: "POST",
                url: "<?php echo get_bloginfo('stylesheet_directory'); ?>/code/module-courses-edit-date.php",
                data: postData,
                success: function(msg) {

                    $j("#dates").ajaxComplete(function(event, request, settings) {

                        result = msg;
                        var json = $j.parseJSON(result)
                        var form = '<label>Edit the date below and hit update</label><br /><input type="text" class="course-start-date" name="_course-start-date" id="_course-start-date-' + json.course_date_id + '" placeholder="Start Date" value="' + json.course_start_date + '" /> &nbsp; <input type="text" class="course-end-date" name="_course-end-date" id="_course-end-date-' + json.course_date_id + '" placeholder="End Date" value="' + json.course_end_date + '" /> &nbsp; <input type="text" class="course-date-reference" name="_course-date-reference" id="_course-date-reference-' + json.course_date_id + '" placeholder="CDC 01" size="5" value="' + json.course_date_reference + '" /> &nbsp; <a href="#" id="update-date-' + json.course_date_id + '" class="button update-date" rel="' + json.course_date_id + '">Update</a> &nbsp; <a href="#" class="cancel-edit">Cancel</a>'

                        $j(this).html(form);

                    });

                }

            });

            return false;

        });

Related posts

Leave a Reply

1 comment

  1. use below code . you are already in success function so no need to add ajaxComplete request.

              $j.ajax({
                type: "POST",
                url: "<?php echo get_bloginfo('stylesheet_directory'); ?>/code/module-courses-edit-date.php",
                data: postData,
                success: function(msg) {
                        var json = $j.parseJSON(msg);
                        var form = '<label>Edit the date below and hit update</label><br /><input type="text" class="course-start-date" name="_course-start-date" id="_course-start-date-' + json.course_date_id + '" placeholder="Start Date" value="' + json.course_start_date + '" /> &nbsp; <input type="text" class="course-end-date" name="_course-end-date" id="_course-end-date-' + json.course_date_id + '" placeholder="End Date" value="' + json.course_end_date + '" /> &nbsp; <input type="text" class="course-date-reference" name="_course-date-reference" id="_course-date-reference-' + json.course_date_id + '" placeholder="CDC 01" size="5" value="' + json.course_date_reference + '" /> &nbsp; <a href="#" id="update-date-' + json.course_date_id + '" class="button update-date" rel="' + json.course_date_id + '">Update</a> &nbsp; <a href="#" class="cancel-edit">Cancel</a>'
    
                        $j("#dates").html(form);
                }
    
            });