Как выполнить ajax, если страница загружается

Question

Я пытаюсь отобразить таблицу базы данных, используя php. Когда страница загружается, мне нужно показать все данные таблицы, и когда я выбираю выпадающий список, я должен отображать только связанные с ним данные, т. Е. Используя условия. Мне не нужен sql-запрос или PHP-код для него, мне просто нужен 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(); 
    }); 
}); 

Здесь при выборе выпадающего меню id="myHref" выполнить get_projectName.php, но мне нужно выполнить get_projectName.php когда страница загрузки, прежде чем выберите в раскрывающемся списке, так что я могу отобразить все данные

PLZ Помощь !!

Answer 1

Похоже, что ваш элемент (например, #myHref) не существует в момент вашего скрипта. И когда вы хотите показать все данные о загрузке, просто вызовите функцию, например.

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

работает. Есть ли ошибки? или что-то, что может помочь?

Answer 2

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 3

В приведенном выше коде вы пытаетесь передать выбранный идентификатор в файл php через $ .get(), когда выпадающее меню было изменено. это хорошо, если вы хотите отображать все данные при загрузке страницы, тогда вы должны иметь еще один php, который возвращает все данные в db и не принимает значения. И писать код, как показано ниже

$(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 4

Попробуйте как этот

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

// Your Code Here 

}); 

дайте мне знать, в случае, если он по-прежнему не работают.

Answer 5

BT Мне нужно выполнить get_projectName.php когда страница загрузки, прежде чем выберите в раскрывающемся списке, так что я могу отобразить все данные

Так что я вижу, что вы хотите, чтобы сначала загрузить выполнить get_projectName.php один раз при загрузке страницы, а также выполнять это, если в раскрывающемся списке есть какие-либо изменения. Так что вы можете сделать, как показано ниже

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

---

Рефакторинг кода, вы можете просто вытащить общую логику в функцию и вызвать эту функцию, передав требуемое значение, см ниже

$(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 6

Хорошо, вот мой еще один ответ, что вы можете вызвать какое-то событие после того, как наш документ будет готов.

надеюсь, что это будет полезно для вас.

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