Question

i am using MVC and my design for my website is that there is header and body and footer,
every page in my website will have the same header and the same footer, but with different body

and for ever page there is a JS file contains the jquery calls

and for many many pages when it is opening, jquery call works and get data from database using ajax and put that data in that page

my question is : sense the jquery calls begins with $(document).ready, so when i open any page, all the jquery call starts, i don’t want that, but i want just the jquery for that page which is opening to be loaded

example

this jquery just for a page

$(document).ready(function(){
    $.getJSON("http://localhost/Mar7ba/Cell/getAllCountries/TRUE",function(data){
        var select = $("#countrySelector");
        var options = '';
        for(var i=0;i<data.length;i++){
            options += "<option>"+data[i]+"</option>";
        }
        select.html("<option>Select Source</option>"+options);
    });
});

and this jquery for another page , but it is loaded when i load the first page

$(document).ready(function(){
        $.getJSON("http://localhost/Mar7ba/Type/getAllTypes/TRUE",function(data){
            var options = '';
            options+="<option>Select Type</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $("#addPlace #apTypeSelect").html(options);
        });
    });

Answer 1

Test for the existence of the elements you’re operating on, before you fire off the AJAX method. For instance, in your first example:

$(document).ready(function(){
    var select = $("#countrySelector");
    if (select.length) { // must test .length; 'select' always exists even if it's empty
        $.getJSON("http://localhost/Mar7ba/Cell/getAllCountries/TRUE",function(data){
            var options = '';
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            select.html("<option>Select Source</option>"+options);
        });
    }; // end if
});