CODEWITHSUNDEEP
javascriptjquery
tatty27
tatty27

Reputation: 1554

Run JS function on .load() content

I have a function called timepicker which is usually called by using

$(document).ready(function() {
        $('#timepicker').timepicker();
});

But I have been unable to make it work on content that is displayed using jQuery .load().

I have tried several methods including using the below but nothing happens?

$(document).ready(function() {
        var $parent = $('#small_container');
        var time = $parent.find('#timepicker');
        time.timepicker();
});

The #small_container is the ID of the DIV that the content is loaded into and the #timepicker is the id of the input that should call the function when it is clicked on.

Have I added it to the correct place in the callback?

$('.edit_job').on("click", function(){
    var week_start = $('input[name=week_start]').val();
    var job_id_del= $('input[name=job_id]').val();
    var user_id = $('input[name=user_id]').val();
    $('#small_container').load('ajax/edit_weekly_job_load.php?job_id='+job_id_del+'&week_start='+week_start+"&user="+user_id);
    $('#timepicker').timepicker();
    $('#small_container').on("click", '#edit_job_submit', function(){
          jQuery.ajax({
              type: "POST",
              url: "ajax/edit_weekly_job_ajax.php",
              dataType: "json",
              data: $('#edit_job_form').serialize(),
              success: function(response){
                  if(response.success === 'success'){
                    window.opener.$("#diary").load("ajax/diary_weekly_load.php?week_start="+week_start+"&user="+user_id);
                    window.close();
                }
              },
        });//end ajax
    });//save_job_edit_submit
});//end edit job

Upvotes: 0

Views: 84

Answers (1)

Rahul Malu
Rahul Malu

Reputation: 566

The content is loaded asynchronously to the element #small_container. The timepicker function is gets called before the content is actually loaded. Try to call the function in the callback of load() method: $('#small_container').load('ajax/edit_weekly_job_load.php?job_id='+job_id_del+'&week_start='+week_start+"&user="+user_id ,function(){ $('#timepicker').timepicker(); } );

Also validate that element #timepicker is actually appended to the element #small_container.

Upvotes: 1

Related Questions