How to execute ajax if page is load

Question

I am trying to display the database table using php. When the page is loaded I need to show all table data and when I select the dropdown select, I neeed to display only data related to it ie.using where condition. I don't need any sql query or php code for it, I just need jquery.

$(document).ready(function() 
{
    $('#myHref').change(function()
    {
                var value = $('#myHref').val();
                $.get('get_projectName.php',{id:value},function(data)
                { 
                    $('#projectDetail').html(data);
                }); 
    }); 
    $('#myHref').on('change',function()
    {
        $('#projectDetail').fadeIn();
    });
});

Here when I select drop down menu id="myHref" execute get_projectName.php , but I need to execute get_projectName.php when page is load before select dropdown so I can display all data

Plz Help!!

Answer 1

bt I need to execute get_projectName.php when page is load before select dropdown so i can display all data

So I see you want to initially load execute get_projectName.php once when page loads and also execute it if there are any changes in the dropdown. So you can do like below

$(document).ready(function() {
    //make a call initially on page load
    var firstOptionValue = $("#myHref option:eq(1)").val() // take first option value as default
    $.get('get_projectName.php',{id:firstOptionValue},function(data)
    { 
      $('#projectDetail').html(data);
    }); 


    $('#myHref').change(function(){
        var value = $('#myHref').val();
        $.get('get_projectName.php',{id:value},function(data)
        { 
          $('#projectDetail').html(data);
        }); 
    }); 

    $('#myHref').on('change',function(){
      $('#projectDetail').fadeIn();
    });
});

---

Refactoring the code , you can just pull out the common logic into a function and call that function by passing the required value, See below

$(document).ready(function() {
    //make a call initially on page load
    var firstOptionValue = $("#myHref option:eq(1)").val(); // take first option value as default
    GetProjectDetails(firstOptionValue);


    $('#myHref').change(function(){
        var value = $('#myHref').val();
        GetProjectDetails(value);
    }); 

    $('#myHref').on('change',function(){
      $('#projectDetail').fadeIn();
    });

    function GetProjectDetails(value){
     $.get('get_projectName.php',{id:value},function(data)
     { 
       $('#projectDetail').html(data);
     });
    }
});

Answer 2

In the above code you are trying to pass the selected id to php file through $.get() when the dropdown is changed. it is fine, if you want to display all the data when page is loaded then you should have another php which returns all the data in db and doesn't take any value. And write the code as below

$(document).ready(function() {
        $.get('get_allDataFromDb.php',function(data)
            { $('#projectDetail').html(data);
        });
        $('#myHref').change(function(){
            var value = $('#myHref').val();
            $.get('get_projectName.php',{id:value},function(data)
                 { $('#projectDetail').html(data);
            });
        }); 
        $('#myHref').on('change',function(){
            $('#projectDetail').fadeIn();
        });
});

Answer 3

Looks like your element (eg #myHref) don't exist at time when your script . And when you want to show all data on load just call function eg.

 function getData(){//ajax here} getData(); 

running. Are there any errors? or something that can help?

Answer 4

function getData(value) {
    params = {};

    if value
        params.id = value;

    $.get('get_projectName.php', params, function (data) {
        $('#projectDetail').html(data);
    });
}
// Get Data onLoad
getData($('#myHref').val());

$('#myHref').on('change',function(){
    getData($('#myHref').val());
    $('#projectDetail').fadeIn();
});

Answer 5

Try like this

$(document).on("change", "#myHref" , function() {

// Your Code Here

});

let me know in case it still dont work.

Answer 6

Ok , here is my another answer that how you can trigger some event after our document get ready .

hope this will be helpful to you .

<script>
            $(document).ready(function(){

                //Function for AJAX Call
                function GetData(){

                    var value = $('#myHref').val();
                    $.get('get_projectName.php',{id:value},function(data)
                    { 
                        $('#projectDetail').html(data);
                        //
                        $('#projectDetail').fadeIn();
                        // Any other code here you want to write.

                    }); 

                }

                $('#myHref').change();
                //OR you can use
                $("#myHref").trigger("change");

            });            
            $(document).on("change", "#myHref" , function() {
                // Call the function as change evvent is triggered
                GetData();
            });
        </script>