Not working javascript on AJAX in Python

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>

It looks like you have two $(document).ready functions. $(function() { }); is the same thing as $(document).ready. So is jQuery(function($){}); — The Internet
– The Internet, Commented Aug 13, 2012 at 17:29
@DavidJohnson So should I take off the $(document).ready(function()) line? — mauguerra
– mauguerra, Commented Aug 13, 2012 at 17:31

Fabrício Matté · Accepted Answer · 2012-08-13 17:30:46Z

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:

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

answered Aug 13, 2012 at 17:30

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mauguerra Over a year ago

I already try to put again the complete JQuery function inside the responseText of the Ajax, so it would be as you said, put again the $(´fechaD').datepicker()'. But it wont work

Fabrício Matté Over a year ago

@mauguerra Try moving all scripts outside of the element which you're replacing. It'll save you a lot of headaches.

mauguerra Over a year ago

I have moved them outside the element I am replacing them, but does not detect the new input with the ID="fechaD". This input needs to be inside the responseText, because it would dipslay some values calculated on the AJAX

Fabrício Matté Over a year ago

And that result calculated server-side must have a datepicker associated with it? Once you append the new data to the page, run $('#fechaD').datepicker(); in the JS function which appends the data and it'll work. Otherwise edit your question to include some more of your code.

mauguerra Over a year ago

How do I run ´$('#fechaD').datepicker();´ after appending the new data?

|

The Internet · Accepted Answer · 2012-08-13 17:31:28Z

0

It looks like you have two $(document).ready functions. $(function() { }); is the same thing as $(document).ready. So is jQuery(function($){});

Maybe try combining them.

  <script type="text/javascript">  
            $(document).ready(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']);

                $("#fechaD").datepicker();
            });
        </script>

answered Aug 13, 2012 at 17:31

The Internet

8,11312 gold badges59 silver badges92 bronze badges

3 Comments

Fabrício Matté Over a year ago

There's absolutely no problem in having more than one DOM ready handler. Combining them is better practice though.

The Internet Over a year ago

Do they both get called on load?

Fabrício Matté Over a year ago

Exactly. =] They are first-in-first-out like all other handlers which are bound as listeners, the only way that one would overwrite another is when you're doing vanilla JS with properties like element.onclick = function(){} (as well as the corresponding HTML onclick="" which can be overwritten by the element.onclick later on).

Collectives™ on Stack Overflow

Not working javascript on AJAX in Python

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related