javascript – How to create a script for search box (ajax) but I already have a script for modal ajax-ThrowExceptions

Exception or error:

How could I create a search box using ajax when I already have a modal ajax?
here is my layout
I dont know how to combine the script for modal ajax and search ajax
any help would be really appreciated. Thank youu

sorry for very bad english.

THis is a text that will fill out the requirements for this post “It looks like your post is mostly code; please add some more details.” <– please this isnt a some sort of question

Here is my code

<script>  
 $(document).ready(function(){
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");
               
                }  
           });  
      });  
 });  
 </script>

and this is for the layout

<?php  
 if(isset($_POST["employee_id"]))  
 {  
      $connect = mysqli_connect("localhost", "root", "", "db_hkrenewal");  
      $query = "SELECT * FROM tbl_form WHERE student_number = '".$_POST["employee_id"]."'";  
      $result = mysqli_query($connect, $query);
      $search = mysqli_real_escape_string($connect, $_POST["query"]);
    
    }   
      
      
      while($row = mysqli_fetch_array($result))  
      {  
          ?>  <div class="table-responsive">  
                  <table class="table table-bordered">
                <tr>  
                     <td width="30%"><label>Student Number</label></td>  
                     <td width="70%"><?php echo $row['student_number'];?></td> 
                </tr>  
               <tr>  
                     <td width="30%"><label>Assigned Department</label></td>  
                     <td width="70%"><?php echo $row['assigned_dept'];?></td> 
                <tr>  
                     <td width="30%"><label>Student Name</label></td>  
                     <td width="70%"><?php echo $row['student_name'];?></td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Course</label></td>  
                     <td width="70%"><?php echo $row['course'];?></td> 
                </tr>  
                <tr>  
                     <td width="30%"><label>Year Level</label></td>  
                     <td width="70%"><?php echo $row['year_level'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Contact Number</label></td>  
                     <td width="70%"><?php echo $row['contact_no'];?></td>  
                </tr>
                 <tr>  
                     <td width="30%"><label>Email Address</label></td>  
                     <td width="70%"><?php echo $row['email_add'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Vacant Time</label></td>  
                     <td width="70%"><?php echo $row['vacant_time'];?></td> 
                 <tr>  
                     <td width="30%"><label>HK Special</label></td>  
                     <td width="70%"><?php echo $row['hk_special'];?></td>  
                </tr>
                 <tr>  
                     <td width="30%"><label>Remarks</label></td>  
                     <td width="70%"><?php echo $row['Remarks'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>HK Facilitator</label></td>  
                     <td width="70%"><?php echo $row['hk_faci'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Department Office</label></td>  
                     <td width="70%"><?php echo $row['dept_office'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Registration</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['registration'];?>" height="50%" width="100%">
                </tr>
                 <tr>  
                     <td width="30%"><label>Endorsement</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['endorse'];?>" height="50%" width="100%">
                </tr>
                 <tr>  
                     <td width="30%"><label>COM</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['com'];?>" height="50%" width="100%">
                </tr>
                 <tr>  
                     <td width="30%"><label>DTR</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['dtr'];?>" height="50%" width="100%">
                </tr>
                </table></div>
                 <?php }?>
 
How to solve:

Ok as I can understand Ill make a answer here. I assume below points

  1. Simple DB (example_db) table named as table_name with fields id and name
  2. index.html file where there are one div to show the result and one input field to user input
  3. Javascript file as custom.js for ajax with jquery
  4. Controller file name as SearchController

Here is the DB table table_names structure

table_names

id | name 

This is the index.html file

//for user input
<input type="text" id="input_name">

//For search result

<div id="result"></div>

custom.js

    //for each key up
    $('body').on('keyup','#input_name', function(){
    //get user input val
    var val = $('#input_name').val();
    //ajax call
    $.ajax({

    url: '/SearchController.php' // In here I just call for the controller . But you should 
                                 //insert relevant url here
         method:'post',

         //Passing user input val extracted as data
         data:{ 'user_input' :val }

         success:function(data){
         $('#result').html(data);  
         },
         error:function(errors){
         console.log (errors);
        }
    });
 });

SearchController.php

     if(isset($_POST["user_input"]))   {

     //defining empty string to store values 
     $result = '';

     $search_ name = $_POST['user_input'];

     $connect = mysqli_connect("localhost", "root", "", "example_db");  
          //Query -  **% sign at the end is must**

          $query = "SELECT * FROM table_name WHERE name LIKE '$search_name%'"; 

          $result = mysqli_query($connect, $query);

          $search = mysqli_real_escape_string($connect, $search_ name );

  while($row = mysqli_fetch_array($result))  
      {  
        //in here I'm looping a simple html label with fetched data from db and 
        // concatenating that data with the $result string

        $result .= '<label> '.$row['name'].' <label>';
       }
      //Returning result this will be displayed in front-end
      return $result;
     }

For testing

Always use

  1. console
  2. Network

in your web browser developer tools to check whats go wrong. Please note I have not tested this code. But this is what I do normally.

Resources for more info

  1. [Ajax Form Submit examples using jQuery
  2. PHP MySQL Ajax Live Search
  3. PHP Example – AJAX Live Search

Leave a Reply

Your email address will not be published. Required fields are marked *