Question

Possible Duplicate:
jQuery – is it bad to have multiple $(document).ready(function() {});
Can you have multiple $(document).ready(function() sections?

Here is my one and only jQuery file for the project

// loading search page
$(function(){
  $("#search").click(function() {
    $("#feature").load("templates/search.html", function() {
        $("#search-input").focus();
        $("#search-input").css({
            "margin-left": "20%",
            "margin-top" : "2%"
        });
    });
 });
});

/* 
finding youtube videos
API source : https://developers.google.com/youtube/2.0/developers_guide_jsonc
*/
$(function(){
    $('#search-input').live('keyup',function() {
        var search_input = $(this).val();
        var keyword = encodeURIComponent(search_input);
        var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=10&v=2&alt=jsonc';

        $.ajax({
          url: yt_url,
          type: 'GET',
          dataType: 'jsonp',
          complete: function(xhr, textStatus) {
            //called when complete
          },
          success: function(response, textStatus, xhr) {
            if(response.data.items) {
                var template = $('#item').clone();
                $('#result').html(template);
                $.each(response.data.items, function(i, data) {
                    //console.log(data)
                    search_data = {
                        'id': data.id,
                        'title': data.title,
                        'views': data.viewCount,
                        'thumbnail': data.thumbnail['sqDefault'],
                    }
                    item = video_result_template(search_data);
                    $('#result').append(item).fadeIn('slow');
                });
            } else {

            }
          },
          error: function(xhr, textStatus, errorThrown) {
            //called when there is an error
          }
        });
    });
});

// filling out the search template
function video_result_template(data) {
    var item = $('#item').clone();
    item.removeClass('hide-item');
    item.find('img').attr('src', data.thumbnail);
    item.find('.title').html(data.title);
    item.find('.views').html(data.views);
    item.attr('id', data.id);
    item.addClass('view-item');
    return item;
}

// playing the video from search result on player pane
$(function(){
    $('.item').live('click', function(){
        // alert(this.id);
        var url = $('#video-frame').attr('src');
        var new_url = url.replace(/embed\/[\w -]*/g, 'embed/' + this.id);
        $('#video-frame').attr('src', new_url);
    });
});

// creating new playlist
$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(e){
            var title = $(e.target).closest('.video-detail').find('.title').text();
            alert(title);
        });
    });

    // $('form .create-playlist-button').live('click', function(e){
    //  var title = $(e.target).closest('.video-detail').find('.title').text();
    //  alert('title');
    // });
        // $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(){
        //          alert($('.title').get(1).textContent);
        //      });

});

// animating slideshow on landing page
$(function(){
    $('#slides').slides({
        preload: true,
        pagination: true,
        preloadImage: '../static/img/loading.gif',
        play: 2000,
        pause: 1000,
        hoverPause: true
    });

    $('.slides_control').css({
        "height": "600px",
        "margin-right": "400px"
    });

    $('.pagination').hide('');
});

Question

• This jquery page has multiple $(function)(means when DOM is ready) functions, is that incorrect? Given that
• some jQuery functions apply to different pages
• some element appear later on the page (see load() function)

How does all that work? I am not very sure, but it seems like there is something wrong here which means there is absolutely a chance to learn from people who do it regularily

P.S – I am absolutely new to the land of jQuery. I have been trying to work on my first project.

Answer 1

YES you can use it in this way without any error, but to make your code more neat and readable you should not repeat the tags un-necessarily.

Note: Variable declared in one function will not be accessible in other functions so you will need to be careful about variable scope in repeating function bodies.

Hope this helps.