Question

i have this simple code to load data from other php page using get method

$(function(){
    $("#Right").click(function(){
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: "5"
        },function(data) {
            $('#testid').html(data);
        });
    });
    $('#block').change(function(){      
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: $(this).attr('value')
        },function(data) {
            $('#testid').html(data);
        });
    });
});

this code work with only 1 problem the loading image only appear when clicking the button but not working while changing the select menu but ajax call data without no problem in both events
my problem that i tried to call data once the page loaded because for now it show no result until i click the button or change option within the select menu
i tried this code

$(function(){
    $(document).ready(function(){
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: "5"
        },function(data) {
            $('#testid').html(data);
        });
    });


    $("#Right").click(function(){
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: "5"
        },function(data) {
            $('#testid').html(data);
        });
    });

    $('#block').change(function(){      
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: $(this).attr('value')
        },function(data) {
            $('#testid').html(data);
        });
    });
});

but this is not working at it all
i tried other thing

$(function(){
    $.get("modules/plugins.php",{
        count: "5"
    },function(data) {
        $('#testid').html(data);
    });

    $("#Right").click(function(){
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: "5"
        },function(data) {
            $('#testid').html(data);
        });
    });

    $('#block').change(function(){      
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: $(this).attr('value')
        },function(data) {
             $('#testid').html(data);
        });
    });
});

neither code work
the other 2 parts still working with no issues
the only issue when page loaded no result appear

Answer 1

Under the assumption that $(this) is being correctly assigned to your dropdown (you can check with a debug or console.log) and that it has a value correctly assigned, you should change:

$(this).attr('value')

to

$(this).val()

You can actually use this.value if it doesn’t need to be turned into a jQuery object for any specific reason

$(function(){
    $("#Right").click(function(){
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: "5"
        },function(data) {
            $('#testid').html(data);
        });
    });
    $('#block').change(function(){      
        $("#testid").html('<img src="theme/gfx/loading.gif">').fadeIn(400);
        $.get("modules/plugins.php",{
            count: this.value   //        <---- change here
        },function(data) {
            $('#testid').html(data);
        });
    });
});