phpjqueryajaxdatetimepickercascading

PHP cascading select & datetimepicker not working on dynamic data loaded in modal via ajax


Due to performance issues (because my data loads around 2k data), I was forced to load user information from another page to a modal via ajax. This is the tutorial that I have followed. From the tutorial, I made two page (index.php and file.php). Data in index.php are loaded via datatables with a button on the side that opens a modal. The data inside the modal will be coming from file.php which is loaded via ajax. The goal was for users to edit user data saved from the database.

In another modal (via add button in index.php), there is a cascading select and a datetimepicker that is working. I tried adding it to the other page (file.php) which is being loaded via ajax, unfortunately, the code is not working and nothing happens`.

Concept

col1   col2    col3       action
id     name    address    edit/delete

Index.php

<html>
 <head></head>
  <body>
    <table>
      <td>
         <button>
      </td>
    </table> 
    
     <script></script> //insert ajax here which will be triggered by the button from table

     <modal> //blank modal that will be populated via ajax from file.php

  </body>
</html>

File.php

<?php some_query ?>//query here for populating form
<form>
   <select>  //cascading
   <select 2> //triggered via first selection
   <input text> //datetimepicker
</form>

Code for the cascading under add user in index.php

<select class="form-control" name="province" onChange="getSubcat(this.value);" >

<script>
    function getSubcat(val) {
        $.ajax({
        type: "POST",
        url: "/sis/php/get-subcat.php",
        data:'cat_id1='+val,
        success: function(data){
            $("#governate2").html(data);
        }
        });
    }
</script>

I tried modifying file.php by adding an html,head,and body tag and the jquery links to see if it will work but was not successful.


Solution

  • Okay. I was able to solve the problem. As mentioned in the comments, I have used the console and was able to figure out the problems.

    For the Cascading Select

    The console showed that it can't find the ajax trigger so I just added the code above in the index.php page. And now it works perfectly

    For the Datetimepicker

    This part is tricky since it didn't show any error in the console. I tried adding the code and script source in the file.php and now it works perfectly.