CODEWITHSUNDEEP
javascriptjqueryajax
user5863306
user5863306

Reputation:

How to execute ajax if page is load

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!!

Upvotes: 2

Views: 444

Answers (6)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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);
     });
    }
});

Upvotes: 2

Punit Gajjar
Punit Gajjar

Reputation: 4987

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>

Upvotes: 0

Punit Gajjar
Punit Gajjar

Reputation: 4987

Try like this 

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

// Your Code Here

});

let me know in case it still dont work.

Upvotes: 0

Alexandr Sargsyan
Alexandr Sargsyan

Reputation: 724

Looks like your element (e.g. #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?

Upvotes: 0

Sivaprasad derangula
Sivaprasad derangula

Reputation: 1169

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();
        });
});

Upvotes: 1

Jairo Malanay
Jairo Malanay

Reputation: 1347

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();
});

Upvotes: 0

Related Questions