Question

I hava a HTML program which uses AJAX.THe responseText of the AJAX will be printed on a DIV. Inside that DIV already exist a <input tpe="text value="" id="fechaD" />. I have a JQuery function that is called when the input is clicked. Obviously, that input will be replaced by the responseText of the AJAX, so I added again on the responseText. The problem comes that now the JQuery does not work.

I dont know if the <script type="text/javascript"> with the jQery function should be outside the DIV so it wont be replaced by the response of AJAX, or should be added again as a responseText. I already try both and wont worked.

I have tried this whithout using jQuery and it works, so I think this should have something to do whith my function in jQuery, but my problem is that I didnt programmed that function, because I dont know anything abaout jQuery.

Here is the jQuery Function that works when the input in onclicked:

(The function looks for the ID=”fechaD” and displays a Calendar. When the User selects any date, then the date will appear as the input’s value. After using AJAX, it wont detect the new ID=”fechaD” input).

    <script type="text/javascript">
        jQuery(function($){
            $.datepicker.regional['es'] = {
                monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
                dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);
        });    
        $(document).ready(function() {
                $("#fechaD").datepicker();
        });
    </script>

Answer 1

If you replace the #fechaD input, the new one will no longer have a datepicker instance associated with it.

To solve it, you can either:

1. Call $('#fechaD').datepicker(); again after replacing it (creates a new datepicker instance);
2. Move the #fechaD input outside of the area which you’re replacing (recommended).