javascriptpythonjqueryflaskjquery-inputmask

Using jquery inputmask with flask


I'm upgrading my math department's internal webpages to use Python3 and the Flask framework. The page I'm currently working on uses input masking to enforce a particular date format (among other things):

With the "Date Given" box selected, the input masking appears

The basic layout of the code that handles this page is

def manage_exams():
    kwargs['content']=Markup(gl.get_html_to_list_all_exams())
    
    if form_name in ["add","edit"]:
        html=gl.get_html_for_exam_add_edit_pages(form_name, exam_id, course_id)
        return html

    return render_template("manage_exams.html", **kwargs)

The relevant part of the accompanying javascript is

$(document).ready(function() {
    $(".date").mask("99-99-9999");
    $("#weight").mask("9.9?9?9");
});

function manage_exam_AJAX(form_name, exam_id, course_id){
    var data = {form_name: form_name,
                exam_id: exam_id,
                course_id: course_id};
    $.ajax({
        type: 'post',
        dataType: 'html',
        url: 'manage_exams',
        async: false,
        data: data,
        success: function (response, status, xml) {
            if(response.error)
            {
                alert(response.data);
            }
            else
            {
                $("#main_content").html(response);
            }
        },
    error: function(response, status, xml) {
        alert(JSON.stringify(response));
        }
    });
}

What I've found that is if I re-render the template, the input masking works as intended:

def manage_exams():
    kwargs['content']=Markup(gl.get_html_to_list_all_exams())
    
    if form_name in ["add","edit"]:
        kwargs['content']=Markup(gl.get_html_for_exam_add_edit_pages(form_name, exam_id, course_id))
    return render_template("manage_exams.html", **kwargs)

With this second approach, I'll have to tweak/eliminate my javascript because now the page loads inside of itself, but what should I be doing instead? Is there anyway I can just return the html variable and use jquery?

EDIT: Per @8oh8's solution, I now am calling the mask functions in the success portion of my javascript. This now works with my original approach of returning my 'html' variable rather than generating a new request:

$(document).ready(function() {
    mask_functions();
});

function mask_functions(){
    $(".date").mask("99-99-9999");
    $("#weight").mask("9.9?9?9");
};

function manage_exam_AJAX(form_name, exam_id, course_id){
    var data = {form_name: form_name,
                exam_id: exam_id,
                course_id: course_id};
    $.ajax({
        type: 'post',
        dataType: 'html',
        url: 'manage_exams',
        async: false,
        data: data,
        success: function (response, status, xml) {
            if(response.error)
            {
                alert(response.data);
            }
            else
            {
                $("#main_content").html(response);
                mask_functions();
            }
        },
    error: function(response, status, xml) {
        alert(JSON.stringify(response));
        }
    });
}

Solution

  • I'm not exactly sure what the mask() function does but I suspect that some bindings are being destroyed after the HTML is swapped. Try calling the mask function again once the new HTML is set.