How to "refresh" the JQuery's DOM scope post AJAX execution

Question

So I have a calendar system; with a bunch of dates each with unique IDs. The page loads with current calendar dates (NO AJAX on first load) and these can be scrolled through by the user with a button-clicker AJAX routine to load future/past months. The calendar is for users to click dates to add date values to a separate <form> element and works to convert the date box into a text input on the associated form.

This all runs under jQuery 1.12 $(document).ready(function() {.

However, the Calendar is reloaded via AJAX which means the numerous references to the [always unique] calendar date IDs are not recognised because the various calender routines need to be refreshed to recognise the latest AJAX-loaded data.

I would really like to "refresh" the whole $(document).ready(function() { post-AJAX-call because there's so much of it, but I'm not having success with this ;

My JQUERY:

$(document).ready(function() {

    /* Clear input box and also clear marked calendar dates*/
    $('#clearFrom').on('click', function() { 
        var valueA = $('#coreDateA').val();
        $('div').find("[data-core='" + valueA + "']").removeClass( "dateChoice" ); /* Clear marked calendar date */
        $('#bookDatesa').val("");
        $('#coreDateA').val("");

        var valueBnum = parseInt($('#coreDateB').val());

        /* Clear each marked calendar date */
        $("[data-core]").each(function(){ 
            var timestamp=parseInt($(this).attr("data-core")); 
            if(timestamp != valueBnum) {
                $(this).removeClass("dateChoice"); 
            }
        });
    });

    ... more similar actions here ... 

    $('td > div').on('click', function() { /* Calendar table td "button" */

       $('#mailbox').show(360);

       $(this).toggleClass( "dateChoice" );
       var dateValueOutput = $(this).attr('data-value');
       var dataCore =  parseInt($(this).attr('data-core')); /* Value from calendar table */
       var checkDataA = parseInt($('#coreDateA').val());
       if (isNaN(checkDataA)) {
           checkDataA = 0;
           $('#coreDateA').val("");
       }
       ...
       ....
       /* Yet more similar code here */
       ....
       ...
    });


   ....

   /* AJAX calendar loader */

    $(document).on('click','table.picker a',function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "/calendarURL",
            data: "date="+ dataValues,
            dataType: 'text',
            success: function (response) {
                $('#calendarZone').html(response);
                /** Something in here to reload the "document ready" JQuery */ 
            }
        });
    });



});

Would how refresh the document ready in jquery deligation be appropriate here?

How else can I cause all the inline script to refresh it's DOM recognition post AJAX call?

score 0 · Accepted Answer · answered Oct 18 '22 at 11:43

Got it!

After reading jQuery re-call $(document).ready()? I found that the most logical solution was to extact all the various functionality that involved the calendar aspects and wrap them in a function and then call this function both within $(document).ready(function() and then also on the AJAX success.

So;

$(document).ready(function() {
     CalendarFunct();

     ....


    /* AJAX calendar loader */

    $(document).on('click','table.picker a',function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "/calendarURL",
            data: "date="+ dataValues,
            dataType: 'text',
            success: function (response) {
                $('#calendarZone').html(response);
                /** Something in here to reload the "document ready" JQuery */ 
                CalendarFunct(); /** THIS! **/
            }
        });
    });

}


/** External function to call on AJAX and document Ready. **/
function CalendarFunct(){
    /* Clear input box and also clear marked calendar dates*/
    $('#clearFrom').on('click', function() { 
        var valueA = $('#coreDateA').val();
        $('div').find("[data-core='" + valueA + "']").removeClass( "dateChoice" ); /* Clear marked calendar date */
        $('#bookDatesa').val("");
        $('#coreDateA').val("");

        var valueBnum = parseInt($('#coreDateB').val());

        /* Clear each marked calendar date */
        $("[data-core]").each(function(){ 
            var timestamp=parseInt($(this).attr("data-core")); 
            if(timestamp != valueBnum) {
                $(this).removeClass("dateChoice"); 
            }
        });
    });

    ... more similar actions here ... 

    $('td > div').on('click', function() { /* Calendar table td "button" */

       $('#mailbox').show(360);

       $(this).toggleClass( "dateChoice" );
       var dateValueOutput = $(this).attr('data-value');
       var dataCore =  parseInt($(this).attr('data-core')); /* Value from calendar table */
       var checkDataA = parseInt($('#coreDateA').val());
       if (isNaN(checkDataA)) {
           checkDataA = 0;
           $('#coreDateA').val("");
       }
       ...
       ....
       /* Yet more similar code here */
       ....
       ...
    });


}

How to "refresh" the JQuery's DOM scope post AJAX execution

My JQUERY:

1 Answers1