skip to Main Content

Hey Im trying to load another div with passing variable.
Im in the div#main , I want a after click #modifybtn button pass the btn value and load it with another div#modify and working with some query.
im noob for jQuery and ajax, I search in web but cant get solution for this.
please check relevant code and tell me about issue.

here is the div#main #modifybtn button and div#modify

<div id=main>
 <button id="modifybtn" value="some_value" >Modify</button>
</div>

<div id="modify">
<?php 
$resultmodi=$conn->query("SELECT * FROM vacancy WHERE vc_id='{$_GET['id']}' LIMIT 1 ");
?>
</div>

dashcompany.php inside

<div class="contentcm" >
//contentcm.php page load content here
</div>

this is my jQuery, after clicking button alert showing but not redirect to the #modify div

$(document).ready(function(){
    $('.contentcm').load('contentcm.php #main');

    $('a').click(function(){  //main and modify division in contentcm.php 
        var clickedLink1 = $(this).attr('id');
        $('.contentcm').load('contentcm.php #' + clickedLink1);
    });
});

$(document).on("click", '#modifybtn', function(event) { 

  var id = $(this).val();
  alert(id);
  event.preventDefault(); 
  $.ajax({
    url: 'dashcompany.php',
    type: 'get',
    data: {'id' : id},
      success: function(response) {
        $('#modify').html(response); 
      }
  });
});

2

Answers


  1. This will be initial.html file

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src = "FILE_NAME.js"></script>
    </head>
    <body>
    <div id=main>
     <button id="modifybtn" value="some_value" >Modify</button>
    
    <div id="modify"></div>
    
    </div>
    
    </body>
    </html>
    

    Your code in FILE_NAME.js should be like

    $(document).on("click", '#modifybtn', function(event) { 
      var id = $(this).val();
      alert(id);
      event.preventDefault(); 
      $.ajax({
        url: 'dashcompany.php',
        type: 'get',
        data: {'id' : id},
          success: function(response) {
            $('#modify').html(response); 
          }
      });
    

    Your js file will load the data from dashcompany.php and load in #modify which is in initial.html file

    dashcompany.php

    <?php
    include_once('connection.php');
    $id = $_GET['id'];
    $resultmodi=$conn->query("SELECT * FROM vacancy WHERE vc_id='$id' LIMIT 1 ");
    $row = $resultmodi->fetch_assoc();
    echo "Name: " . $row["name"];
    ''' print data whatever you need '''
    $conn->close();
    ?>
    

    REASON:
    May be you forgot to print data in dashcompany.php file that’s why you are getting blank response from ajax request.

    And don’t forget to include #modify div in the same html file where #main#modify div exists

    Login or Signup to reply.
  2. You can use as follow code, and I suggest you to use post method

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    
    <body>
    
    <button type='button' id="modifybtn" class='btn btn-info' value="some_value">click here</button>
    
    
    <div class="" id="modify"></div>
    
    <script type="text/javascript">
     $(document).on("click", '#modifybtn', function(event) {
     var  id = $(this).val();
     //alert(id);
     $.ajax({
     url: 'dashcompany.php',
     type: 'post',
     data: {'id' : id},
     dataType: 'json',
     success: function(response) {
        //now you can call with column name of data table
       $('#modify').html("<P>"+response.column_one_name+"</p><br><P>"+response.column_two_name+"</p>");
       }
      });
    });
    </script>
    

    And your dashcompany.php page should like this,

    <?php 
     // $localhost = "127.0.0.1";
     // $username = "root";
     // $password = "";
     // $dbname = "db_304";
     // 
     // $connect = new mysqli($localhost, $username, $password, $dbname);
     // // check connection
     // if ($connect->connect_error) {
     //     die("Connection Failed : " . $connect->connect_error);
     // }
    
     $id = $_POST['id'];
     
     $sql = "SELECT * FROM vacancy WHERE vc_id = '$id' LIMIT 1 ";
     $result = $connect->query($sql);
    
     if ($result->num_rows > 0) {
        $row = $result->fetch_array();
     } // if num_rows
    
     $connect->close();
    
     echo json_encode($row);
    

    Hope this will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search