Unable to mask a text field

Question

I am trying to mask a text field that is created after an Ajax response. Everyhing is okay with Ajax request and response. To make this i am using jquery maskedinput plugin. I have already imported neccesarry js files to my HTML page. Currently i am unable to do this. I think Ajax loading causes that but i dont know how to fix this problem. Any help will be appriciated. Here is what i tried:

$(document).ready(function(){
   $("#stuPhoneText").mask("(999) 999-9999");
});

Answer 1

My guess is that you need to run

$("#stuPhoneText").mask("(999) 999-9999");

on the 'complete' callback of your ajax function. Not in the document ready.

I'm sure the plugin isn't written in such a way that it constantly examines the entire Dom for new elements matching the ID you specified.

Something like this:

var request = $.ajax({
   url: "targetURL.html",
   type: "POST",
   complete: function(){ $("#stuPhoneText").mask("(999) 999-9999"); },
   dataType: "html"
});